更新绘画曲线bug

src/graphic/Renderer/Draw.js

@@ -99,98 +99,71 @@ export default class Draw {
   }
 
   drawCurveRoad(vector, isTemp) {
-    const getStyleLines = () => {
-      let leftPoints = vector.leftLanes
-        .map(line => line.map(coordinate.getScreenXY.bind(coordinate)));
-      leftPoints = leftPoints.map(points => mathUtil.getCurvesByPoints(points))
-      const rightPoints = vector.rightLanes
+    const getLinesCoves = (lines) => lines
         .map(line => line.map(coordinate.getScreenXY.bind(coordinate)))
-        .map(points => mathUtil.getCurvesByPoints(points))
-
-      console.log(dataService.getCurveEdge(vector.rightEdgeId))
-
-      const styleLines = {
-        dotted: [
-          ...leftPoints,
-          ...rightPoints,
-        ],
-        solid: [
-          vector.curves.map(line =>
-            Object.entries(line).reduce((t, [key, val]) => {
-              t[key] = coordinate.getScreenXY(val)
-              return t;
-            }, {})
-          )
-        ],
-      };
-      return styleLines
-    };
-
-    const draw = (curveLines, drawPoints = false) => {
-      if (drawPoints) {
-        const curveLines = [
-          ...vector.leftLanes, ...vector.rightLanes,
-          vector.points,
-          dataService.getCurveEdge(vector.rightEdgeId).points,
-          dataService.getCurveEdge(vector.leftEdgeId).points,
-        ]
-        const radius = Style.Point.radius * coordinate.ratio;
-        for (const line of curveLines) {
-          for (let point of line) {
-            point = coordinate.getScreenXY(point)
-            ctx.beginPath();
-            ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
-            ctx.fill();
-          }
-        }
-      }
+        .map(line => mathUtil.getCurvesByPoints(line))
+
+    const linesArrayMap = {
+      dotted: [
+        ...vector.leftLanes,
+        ...vector.rightLanes,
+      ],
+      solid: [
+        dataService.getCurveEdge(vector.rightEdgeId).points,
+        dataService.getCurveEdge(vector.leftEdgeId).points,
+        vector.points
+      ]
+    }
 
-      // ctx.lineCap = "round"; //线段端点的样式
-      let i = 0;
-      for (const curve of curveLines) {
-        ctx.beginPath();
-        ctx.moveTo(
-          curve.start.x,
-          curve.start.y
-        )
-        if (curve.controls.length === 1) {
-          ctx.quadraticCurveTo(
-            curve.controls[0].x,
-            curve.controls[0].y,
-            curve.end.x,
-            curve.end.y,
-          );
-        } else {
-          ctx.bezierCurveTo(
-            curve.controls[0].x,
-            curve.controls[0].y,
-            curve.controls[1].x,
-            curve.controls[1].y,
-            curve.end.x,
-            curve.end.y,
-          )
-        }
-        ctx.strokeStyle = ['red', 'blue'][i++ % curveLines.length]
-        ctx.stroke();
-      }
+    const covesArrayMap = {
+      dotted: getLinesCoves(linesArrayMap.dotted),
+      solid: getLinesCoves(linesArrayMap.solid)
     };
 
     const ctx = this.context;
     ctx.save();
 
     help.setVectorStyle(ctx, vector)
-
-    const styleLines = getStyleLines();
-    for (const style in styleLines) {
+    for (const style in covesArrayMap) {
       const isSolid = style === "solid";
       ctx.setLineDash(isSolid ? [] : [15, 15]);
 
-      const lines = styleLines[style];
-      for (const points of lines) {
-        draw(points, true);
+      const covesArray = covesArrayMap[style];
+      for (const coves of covesArray) {
+        for (const curve of coves) {
+          ctx.beginPath();
+          ctx.moveTo(
+            curve.start.x,
+            curve.start.y
+          )
+          if (curve.controls.length === 1) {
+            ctx.quadraticCurveTo(
+              curve.controls[0].x,
+              curve.controls[0].y,
+              curve.end.x,
+              curve.end.y,
+            );
+          } else {
+            ctx.bezierCurveTo(
+              curve.controls[0].x,
+              curve.controls[0].y,
+              curve.controls[1].x,
+              curve.controls[1].y,
+              curve.end.x,
+              curve.end.y,
+            )
+          }
+          ctx.stroke();
+        }
       }
     }
     ctx.restore();
+
+    Object.values(linesArrayMap).forEach(
+      linesArray => linesArray.forEach(
+        lines => lines.forEach(this.drawPoint.bind(this))
+      )
+    );
   }
 
   drawCurveEdge(vector, isTemp) {
@@ -393,49 +366,15 @@ export default class Draw {
   }
 
   drawPoint(vector) {
-    const ctx = this.context;
-    console.log(vector)
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
-    const selectItem = stateService.getSelectItem();
-    const draggingItem = stateService.getDraggingItem();
-    const focusItem = stateService.getFocusItem();
 
+    const ctx = this.context;
     help.setVectorStyle(ctx, vector)
-
-    let radius = Style.Point.radius;
-    if (
-      (draggingItem &&
-        draggingItem.type == VectorType.Point &&
-        vector.vectorId == draggingItem.vectorId) ||
-      (selectItem &&
-        selectItem.type == VectorType.Point &&
-        vector.vectorId == selectItem.vectorId)
-    ) {
-      ctx.save();
-      ctx.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio;
-      ctx.strokeStyle = Style.Select.Point.strokeStyle;
-      ctx.fillStyle = Style.Select.Point.fillStyle;
-      radius = Style.Select.Point.radius;
-    } else if (
-      focusItem &&
-      focusItem.type == VectorType.Point &&
-      vector.vectorId == focusItem.vectorId
-    ) {
-      ctx.save();
-      ctx.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio;
-      ctx.strokeStyle = Style.Focus.Point.strokeStyle;
-      ctx.fillStyle = Style.Focus.Point.fillStyle;
-      radius = Style.Focus.Point.radius;
-    }
-    // else {
-    //   return;
-    // }
-
     ctx.beginPath();
     ctx.arc(
       pt.x,
       pt.y,
-      radius * coordinate.ratio,
+      Style.Point.radius * coordinate.ratio,
       0,
       Math.PI * 2,
       true
@@ -444,7 +383,9 @@ export default class Draw {
     ctx.fill();
     ctx.restore();
 
-    this.drawText(vector, vector.vectorId);
+    if (vector.vectorId) {
+      this.drawText(vector, vector.vectorId);
+    }
   }
 
   drawControlPoint(vector) {