制作需求

src/graphic/CanvasStyle/default.js

@@ -7,6 +7,7 @@ const Road = {
 
 const RoadEdge = {
   ...Road,
+  fillStyle: "rgba(0,0,0,0)",
   lineWidth: 1 * coordinate.ratio,
   strokeStyle: "#2F8FFF",
 };

src/graphic/CanvasStyle/focus.js

@@ -74,6 +74,7 @@ const CrossPoint = {
 const RoadEdge = {
   ...def.RoadEdge,
   lineWidth: 2 * coordinate.ratio,
+  fillStyle: "rgba(255, 143, 40, 0.3)",
   strokeStyle: "rgba(255, 143, 40, 1)",
 };
 

src/graphic/Renderer/Draw.js

@@ -225,12 +225,16 @@ export const help = {
     const lineWidth =
       Settings.lineWidth *
       (ctx.lineWidth || 1) *
-      (weight === VectorWeight.Bold ? 2 : 1);
-
+      (typeof weight === "string"
+        ? weight === VectorWeight.Bold
+          ? 2
+          : 1
+        : weight);
     const funStyle = [
       VectorStyle.PointDrawLine,
       VectorStyle.SingleDashedLine,
       VectorStyle.SingleSolidLine,
+      VectorStyle.RoadSide,
     ];
     if (typeof line === "function" && !funStyle.includes(style)) {
       style = VectorStyle.SingleSolidLine;
@@ -383,7 +387,32 @@ export const help = {
         }
         ctx.lineWidth = lineWidth;
         break;
+      case VectorStyle.RoadSide:
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(line[0].x, line[0].y);
+        ctx.lineTo(line[1].x, line[1].y);
+        ctx.lineTo(line[2].x, line[2].y);
+        ctx.lineTo(line[3].x, line[3].y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+
+        const width = mathUtil.getDistance(line[0], line[3]);
+        const c1 = mathUtil.translate(line[0], line[3], line[0], width / 2);
+        const c2 = mathUtil.translate(line[1], line[2], line[1], width / 2);
+        ctx.beginPath();
+        ctx.moveTo(c1.x, c1.y);
+        ctx.lineTo(c2.x, c2.y);
+        ctx.lineWidth = width;
+        ctx.setLineDash([2 * coordinate.ratio, 40 * coordinate.ratio]);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.restore();
+        return;
     }
+
     ctx.stroke();
     ctx.restore();
   },
@@ -603,13 +632,22 @@ export default class Draw {
       );
 
       if (flag) {
-        const point1 = coordinate.getScreenXY(edgeVector.start);
-        const point2 = coordinate.getScreenXY(edgeVector.end);
+        let points = [
+          coordinate.getScreenXY(edgeVector.start),
+          coordinate.getScreenXY(edgeVector.end),
+        ];
+        if (edgeVector.roadSide) {
+          points.push(
+            coordinate.getScreenXY(edgeVector.roadSide.end),
+            coordinate.getScreenXY(edgeVector.roadSide.start)
+          );
+        }
 
         help.drawStyleLine(
           ctx,
-          [point1, point2],
-          edgeVector.style,
+          points,
+          edgeVector.roadSide ? VectorStyle.RoadSide : edgeVector.style,
+          // edgeVector.roadSide ? edgeVector.roadSide.width : edgeVector.weight
           edgeVector.weight
         );
       }
@@ -635,11 +673,16 @@ export default class Draw {
     isTemp && (ctx.globalAlpha = 0.3);
     help.setVectorStyle(ctx, leftEdge);
     let [style, fo] = help.getVectorStyle(vector);
-    fo && help.setStyle(ctx, style);
+    if (fo) {
+      help.setStyle(ctx, Style.Focus.RoadEdge);
+    }
+
     drawRoadEdgeChild(leftEdge);
 
     help.setVectorStyle(ctx, rightEdge);
-    fo && help.setStyle(ctx, style);
+    if (fo) {
+      help.setStyle(ctx, Style.Focus.RoadEdge);
+    }
 
     drawRoadEdgeChild(rightEdge);
 

src/graphic/enum/VectorStyle.js

@@ -1,7 +1,5 @@
 import UIEvents from "./UIEvents";
 const VectorStyle = {
-  // 路沿线
-  AlongLine: "AlongLine",
   // 单实线
   SingleSolidLine: "SingleSolidLine",
   // 单虚线