添加贝塞尔曲线工具类

src/graphic/Renderer/Draw.js

@@ -69,7 +69,6 @@ export default class Draw {
       point2 = coordinate.getScreenXY(vector.end);
       this.drawEdge(vector, isTemp);
     } else {
-      this.context.globalAlpha = 1;
       let start = dataService.getPoint(vector.startId);
       let end = dataService.getPoint(vector.endId);
       point1 = coordinate.getScreenXY(start);
@@ -86,48 +85,28 @@ export default class Draw {
     this.context.lineTo(point2.x, point2.y);
     this.context.stroke();
     this.context.restore();
-
-    for (let i = 0; i < vector.leftLanes.length; ++i) {
-      this.drawPoint(vector.leftLanes[i].start);
-      this.drawPoint(vector.leftLanes[i].end);
-    }
-    for (let i = 0; i < vector.rightLanes.length; ++i) {
-      this.drawPoint(vector.rightLanes[i].start);
-      this.drawPoint(vector.rightLanes[i].end);
-    }
-
-    if (vector.midDivide != null && vector.midDivide.display) {
-      let midDivideStart = coordinate.getScreenXY(vector.midDivide.start);
-      let midDivideEnd = coordinate.getScreenXY(vector.midDivide.end);
-      this.context.save();
-      this.context.globalAlpha = 1;
-      this.context.strokeStyle = "blue";
-      this.context.beginPath();
-      this.context.setLineDash([10, 3, 1]); //设定实线与空白的大小
-      this.context.moveTo(midDivideStart.x, midDivideStart.y);
-      this.context.lineTo(midDivideEnd.x, midDivideEnd.y);
-      this.context.stroke();
-      this.context.restore();
-    }
   }
 
   drawCurveRoad(vector, isTemp) {
     const getStyleLines = () => {
       const styleLines = {
-        dotted: [...vector.leftLanes, ...vector.rightLanes],
+        dotted: [
+          ...vector.leftLanes,
+          ...vector.rightLanes
+        ],
         solid: [
           vector.points,
           dataService.getCurveEdge(vector.rightEdgeId).points,
-          dataService.getCurveEdge(vector.leftEdgeId).points,
-        ],
-      };
+          dataService.getCurveEdge(vector.leftEdgeId).points
+        ]
+      }
       return Object.entries(styleLines).reduce((t, [key, lines]) => {
-        t[key] = lines.map((line) =>
-          line.map((point) => coordinate.getScreenXY(point))
-        );
+        t[key] = lines.map(
+          line => line.map(point => coordinate.getScreenXY(point))
+        )
         return t;
-      }, {});
-    };
+      }, {})
+    }
 
     const draw = (points, drawPoints = false) => {
       if (drawPoints) {
@@ -135,7 +114,7 @@ export default class Draw {
         for (const point of points) {
           ctx.beginPath();
           ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
-          ctx.fill();
+          ctx.fill()
         }
       }
 
@@ -148,45 +127,42 @@ export default class Draw {
           curve.end.x,
           curve.end.y,
           curve.control.x,
-          curve.control.y
-        );
+          curve.control.y,
+        )
       }
       ctx.stroke();
-    };
+    }
+
 
     const ctx = this.context;
     ctx.save();
 
     const itemsEntry = [
-      [stateService.getSelectItem(), "Select"],
-      [stateService.getDraggingItem(), "Select"],
-      [stateService.getFocusItem(), "Focus"],
-    ];
+      [stateService.getSelectItem(), 'Select'],
+      [stateService.getDraggingItem(), 'Select'],
+      [stateService.getFocusItem(), 'Focus']
+    ]
     const strokeStyle = itemsEntry.reduce((prev, [item, attr]) => {
-      if (
-        item &&
-        item.type === VectorType.Road &&
-        vector.vectorId === item.vectorId
-      ) {
+      if (item && item.type === VectorType.Road && vector.vectorId === item.vectorId) {
         return Style[attr].Road.strokeStyle;
       }
-    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)");
+    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)")
 
     ctx.lineWidth = 2;
-    ctx.lineCap = "butt";
-    ctx.strokeStyle = strokeStyle;
+    ctx.lineCap = 'butt'
+    ctx.strokeStyle = strokeStyle
 
     const styleLines = getStyleLines();
     for (const style in styleLines) {
-      const isSolid = style === "solid";
+      const isSolid = style === 'solid';
       ctx.setLineDash(isSolid ? [] : [15, 15]);
 
-      const lines = styleLines[style];
+      const lines = styleLines[style]
       for (const points of lines) {
         if (points.length < 2) {
           break;
         }
-        draw(points, isSolid);
+        draw(points, true)
       }
     }
     ctx.restore();
@@ -421,11 +397,6 @@ export default class Draw {
       },
       vector.rightEdgeId
     );
-
-    this.drawPoint(leftEdge.start);
-    this.drawPoint(leftEdge.end);
-    this.drawPoint(rightEdge.start);
-    this.drawPoint(rightEdge.end);
   }
 
   drawPoint(vector) {

src/graphic/Style.js

@@ -1,6 +1,6 @@
 const Style = {
   Road: {
-    strokeStyle: "#000000",
+    strokeStyle: "rgba(255,0,0,0.5)",
     lineWidth: 4,
     error: {
       strokeStyle: "rgba(255,0,0,0.5)",