修正问题

src/graphic/CanvasStyle/default.js

@@ -77,7 +77,7 @@ const CanvasFont = {
 
 const Point = {
   strokeStyle: "#3290FF",
-  fillStyle: "#fff",
+  fillStyle: "#3290FF",
   radius: 4 * coordinate.ratio,
   lineWidth: 4 * coordinate.ratio,
 };

src/graphic/CanvasStyle/focus.js

@@ -52,7 +52,7 @@ const Text = {
 
 const Point = {
   ...def.Point,
-  fillStyle: "#3290FF",
+  fillStyle: "#fff",
 };
 
 const RoadPoint = {

src/graphic/CanvasStyle/select.js

@@ -73,7 +73,7 @@ const CurveRoadEdge = {
 
 const Point = {
   ...def.Point,
-  fillStyle: "#3290FF",
+  fillStyle: "#fff",
 };
 
 const RoadPoint = {

src/graphic/Renderer/Draw.js

@@ -15,7 +15,7 @@ const imgCache = {};
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
     const geoId = vector?.vectorId;
-    if (!geoId) {
+    if (!geoId || Settings.screenMode) {
       return [Style[geoType], undefined];
     }
 
@@ -78,27 +78,30 @@ const help = {
       }))
     );
   },
+  drawCove(ctx, curve) {
+    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
+      );
+    }
+  },
   drawCoves(ctx, coves) {
     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
-        );
-      }
+      help.drawCove(ctx, curve)
       ctx.stroke();
     }
   },
@@ -546,6 +549,7 @@ export default class Draw {
       const p4 = coordinate.getScreenXY(rightEdge.end);
       ctx.lineWidth = 1 * coordinate.ratio
       ctx.setLineDash([5 * coordinate.ratio, 5 * coordinate.ratio ]);
+      ctx.strokeStyle = Style.Road.strokeStyle
 
       ctx.beginPath()
       ctx.moveTo(p1.x, p1.y)
@@ -555,6 +559,13 @@ export default class Draw {
       ctx.moveTo(p3.x, p3.y)
       ctx.lineTo(p4.x, p4.y)
       ctx.stroke()
+
+      ctx.fillStyle = 'rgba(23, 121, 237, 0.30)'
+      ctx.moveTo(p1.x, p1.y)
+      ctx.lineTo(p2.x, p2.y)
+      ctx.lineTo(p4.x, p4.y)
+      ctx.lineTo(p3.x, p3.y)
+      ctx.fill()
       ctx.restore()
     }
 
@@ -618,14 +629,15 @@ export default class Draw {
   drawCurveRoad(vector) {
     const ctx = this.context;
     ctx.save();
+    let midCovesArray
     const [_, foo] = help.setVectorStyle(ctx, vector);
     if (vector.display && vector.midDivide) {
-      const covesArray = help.transformCoves([
+      midCovesArray = help.transformCoves([
         vector.midDivide.leftMidDivideCurves,
         vector.midDivide.rightMidDivideCurves,
       ]);
       ctx.lineWidth *= Settings.lineWidth
-      for (let coves of covesArray) {
+      for (let coves of midCovesArray) {
         help.drawCoves(ctx, coves);
       }
     }
@@ -658,6 +670,33 @@ export default class Draw {
       ctx.moveTo(p3.x, p3.y)
       ctx.lineTo(p4.x, p4.y)
       ctx.stroke()
+
+      if (midCovesArray) {
+        const edgeCurves = help.transformCoves([
+          leftEdge.curves,
+          rightEdge.curves
+        ]);
+        console.log(edgeCurves[1])
+        edgeCurves[1] = edgeCurves[1].reverse().map(curve => ({
+          start: curve.end,
+          end: curve.start,
+          controls: curve.controls.reverse()
+        }))
+
+        console.log(edgeCurves[1])
+
+        ctx.beginPath();
+        ctx.setLineDash([])
+        ctx.moveTo(edgeCurves[0][0].start.x, edgeCurves[0][0].start.y);
+        edgeCurves[0].forEach(cuve => help.drawCove(ctx, cuve))
+        ctx.lineTo(edgeCurves[1][0].start.x, edgeCurves[1][0].start.y)
+        edgeCurves[1].forEach(cuve => help.drawCove(ctx, cuve))
+        ctx.closePath()
+        ctx.fillStyle = 'rgba(23, 121, 237, 0.30)'
+        ctx.fill()
+      }
+
+
       ctx.restore();
     }