绘画道路外边缘及车道

src/graphic/Renderer/Draw.js

@@ -47,6 +47,7 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
+    return;
     const getCurves = (points, scale) => {
       const curves = [];
       for (let i = 1; i < points.length; i++) {
@@ -156,6 +157,112 @@ export default class Draw {
     console.log(ctx)
   }
 
+  drawCurveRoad(vector, isTemp) {
+    console.log(vector)
+    const getCurves = (points, scale) => {
+      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 getStyleLines = () => {
+      const styleLines = {
+        dotted: [
+          ...vector.leftLanes,
+          ...vector.rightLanes
+        ],
+        solid: [
+          vector.points,
+          dataService.getCurveEdge(vector.rightEdgeId).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))
+        )
+        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()
+        }
+      }
+
+      // ctx.lineCap = "round"; //线段端点的样式
+      ctx.beginPath();
+      for (const curve of getCurves(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();
+    }
+
+
+    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();
+  }
+
   drawEdge(vector, isTemp) {
     //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
     let start = dataService.getPoint(vector.startId);