绘画道路外边缘及车道

src/graphic/Renderer/Draw.js

@@ -88,57 +88,84 @@ export default class Draw {
   }
 
   drawCurveRoad(vector, isTemp) {
-    this.context.save();
-    this.context.beginPath();
-    this.context.lineCap = "round"; //线段端点的样式
-    //this.context.lineJoin= 'miter';
-    this.context.strokeStyle = Style.Road.strokeStyle;
-
-    const selectItem = stateService.getSelectItem();
-    const draggingItem = stateService.getDraggingItem();
-    const focusItem = stateService.getFocusItem();
-
-    if (selectItem && selectItem.type == VectorType.CurveRoad) {
-      if (vector.vectorId == selectItem.vectorId) {
-        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+    const getStyleLines = () => {
+      const styleLines = {
+        dotted: [
+          ...vector.leftLanes,
+          ...vector.rightLanes
+        ],
+        solid: [
+          vector.points,
+          dataService.getCurveEdge(vector.rightEdgeId).points,
+          dataService.getCurveEdge(vector.leftEdgeId).points
+        ]
       }
-    } else if (draggingItem && draggingItem.type == VectorType.CurveRoad) {
-      if (vector.vectorId == draggingItem.vectorId) {
-        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      return Object.entries(styleLines).reduce((t, [key, lines]) => {
+        t[key] = lines.map(
+          line => line.map(point => coordinate.getScreenXY(point))
+        )
+        return t;
+      }, {})
+    }
+
+    const draw = (points, drawPoints = false) => {
+      if (drawPoints) {
+        const radius = Style.Point.radius * coordinate.ratio;
+        for (const point of points) {
+          ctx.beginPath();
+          ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
+          ctx.fill()
+        }
       }
-    } else if (focusItem && focusItem.type == VectorType.CurveRoad) {
-      if (vector.vectorId == focusItem.vectorId) {
-        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
+
+      // ctx.lineCap = "round"; //线段端点的样式
+      ctx.beginPath();
+      for (const curve of mathUtil.getCurvesByPoints(points, 0.2)) {
+        ctx.bezierCurveTo(
+          curve.start.x,
+          curve.start.y,
+          curve.end.x,
+          curve.end.y,
+          curve.control.x,
+          curve.control.y,
+        )
       }
+      ctx.stroke();
     }
 
-    let point1, point2;
-    if (isTemp) {
-      this.context.globalAlpha = 0.3;
-      point1 = coordinate.getScreenXY(vector.start);
-      point2 = coordinate.getScreenXY(vector.end);
-      this.drawCurveEdge(vector, isTemp);
-    } else {
-      let start = dataService.getCurvePoint(vector.startId);
-      let end = dataService.getCurvePoint(vector.endId);
-      point1 = coordinate.getScreenXY(start);
-      point2 = coordinate.getScreenXY(end);
-      this.drawCurveEdge(vector, isTemp);
-      this.drawText(
-        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
-        vector.vectorId
-      );
-      //this.context.lineWidth = vector.width;
-    }
-    this.context.beginPath();
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
-    this.context.stroke();
-    this.context.restore();
 
-    for (let i = 0; i < vector.points.length; ++i) {
-      this.drawCurvePoint(vector.points[i]);
+    const ctx = this.context;
+    ctx.save();
+
+    const itemsEntry = [
+      [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) {
+        return Style[attr].Road.strokeStyle;
+      }
+    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)")
+
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'butt'
+    ctx.strokeStyle = strokeStyle
+
+    const styleLines = getStyleLines();
+    for (const style in styleLines) {
+      const isSolid = style === 'solid';
+      ctx.setLineDash(isSolid ? [] : [15, 15]);
+
+      const lines = styleLines[style]
+      for (const points of lines) {
+        if (points.length < 2) {
+          break;
+        }
+        draw(points, isSolid)
+      }
     }
+    ctx.restore();
   }
 
   drawCurveEdge(vector, isTemp) {

src/graphic/Util/MathUtil.js

@@ -1046,6 +1046,30 @@ export default class MathUtil {
   lengthSq(v) {
     return v.x * v.x + v.y * v.y;
   }
+
+  getCurvesByPoints(points, scale = 0.2) {
+    const curves = [];
+    for (let i = 1; i < points.length; i++) {
+      const prev1Index = i - 1
+      const prev2Index = i === 1 ? prev1Index : i - 2;
+      const nextIndex = i === points.length - 1 ? points.length - 1 : i + 1
+      const { x: nowX, y: nowY } = points[i];
+      const { x: last1X, y: last1Y } = points[prev1Index]
+      const { x: last2X, y: last2Y } = points[prev2Index]
+      const { x: nextX, y: nextY } = points[nextIndex]
+      const cAx = last1X + (nowX - last2X) * scale,
+        cAy = last1Y + (nowY - last2Y) * scale,
+        cBx = nowX - (nextX - last1X) * scale,
+        cBy = nowY - (nextY - last1Y) * scale
+
+      curves.push({
+        start: i === 1 ? {x: points[0].x, y: points[0].y} : { x: cAx, y: cAy },
+        control: { x: nowX, y: nowY },
+        end: { x: cBx, y: cBy },
+      })
+    }
+    return curves
+  }
 }
 
 const mathUtil = new MathUtil();