继续

src/graphic/Renderer/Draw.js

@@ -9,12 +9,11 @@ import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import Constant from "../Constant.js";
 
-
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
-    const geoId = vector?.vectorId
+    const geoId = vector?.vectorId;
     if (!geoId) {
-      return Style[geoType]
+      return Style[geoType];
     }
 
     const itemsEntry = [
@@ -32,7 +31,7 @@ const help = {
           return Style[attr][geoType];
         }
       }
-      return prev
+      return prev;
     }, Style[geoType]);
   },
   setVectorStyle(ctx, vector, geoType = vector.geoType) {
@@ -42,26 +41,24 @@ const help = {
     }
   },
   transformCoves(lines) {
-    return lines
-      .map(line => line.map(line => ({
+    return lines.map((line) =>
+      line.map((line) => ({
         start: coordinate.getScreenXY(line.start),
         end: coordinate.getScreenXY(line.end),
-        controls: line.controls.map(coordinate.getScreenXY.bind(coordinate))
-      })))
+        controls: line.controls.map(coordinate.getScreenXY.bind(coordinate)),
+      }))
+    );
   },
   drawCoves(ctx, coves) {
     for (const curve of coves) {
       ctx.beginPath();
-      ctx.moveTo(
-        curve.start.x,
-        curve.start.y
-      )
+      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,
+          curve.end.y
         );
       } else {
         ctx.bezierCurveTo(
@@ -70,13 +67,13 @@ const help = {
           curve.controls[1].x,
           curve.controls[1].y,
           curve.end.x,
-          curve.end.y,
-        )
+          curve.end.y
+        );
       }
       ctx.stroke();
     }
-  }
-}
+  },
+};
 
 export default class Draw {
   constructor() {
@@ -106,9 +103,37 @@ export default class Draw {
     this.context.restore();
   }
 
+  drawGrid(w, h, step1, step2) {
+    this.context.beginPath();
+    for (var x = 0; x <= w; x += step1) {
+      if (x % step2 == 0) {
+        this.context.strokeStyle = "rgba(0,0,0,0.8)";
+      } else {
+        this.context.strokeStyle = "rgba(0,0,0,0.2)";
+      }
+      this.context.moveTo(x, 0);
+      this.context.lineTo(x, h);
+    }
+
+    for (var y = 0; y <= h; y += step1) {
+      if (x % step2 == 0) {
+        this.context.strokeStyle = "rgba(0,0,0,0.8)";
+      } else {
+        this.context.strokeStyle = "rgba(0,0,0,0.2)";
+      }
+      this.context.moveTo(0, y);
+      this.context.lineTo(w, y);
+    }
+
+    this.context.lineWidth = 1;
+    this.context.stroke();
+  }
+
   drawRoad(vector, isTemp) {
-    const startReal = isTemp ? vector.start : dataService.getPoint(vector.startId)
-    const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId)
+    const startReal = isTemp
+      ? vector.start
+      : dataService.getPoint(vector.startId);
+    const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId);
 
     if (vector?.midDivide?.display) {
       const ctx = this.context;
@@ -116,7 +141,7 @@ export default class Draw {
       const endScreen = coordinate.getScreenXY(endReal);
 
       ctx.save();
-      help.setVectorStyle(ctx, vector)
+      help.setVectorStyle(ctx, vector);
       ctx.beginPath();
       ctx.moveTo(startScreen.x, startScreen.y);
       ctx.lineTo(endScreen.x, endScreen.y);
@@ -131,26 +156,26 @@ export default class Draw {
       );
     }
     this.drawEdge(vector, isTemp);
-    vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this))
-    vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this))
+    vector.leftLanes && vector.leftLanes.forEach(this.drawLan.bind(this));
+    vector.rightLanes && vector.rightLanes.forEach(this.drawLan.bind(this));
   }
 
   drawLan(lan) {
     const ctx = this.context;
-    const start = coordinate.getScreenXY(lan.start)
-    const end = coordinate.getScreenXY(lan.end)
+    const start = coordinate.getScreenXY(lan.start);
+    const end = coordinate.getScreenXY(lan.end);
     ctx.save();
     ctx.beginPath();
     help.setVectorStyle(ctx, null, "Lane");
     ctx.setLineDash(Style.Lane.dash);
-    ctx.moveTo(start.x, start.y)
-    ctx.lineTo(end.x, end.y)
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
     ctx.stroke();
     ctx.restore();
 
     if (import.meta.env.DEV) {
-      this.drawPoint(lan.start)
-      this.drawPoint(lan.end)
+      this.drawPoint(lan.start);
+      this.drawPoint(lan.end);
     }
   }
 
@@ -182,47 +207,48 @@ export default class Draw {
         },
         edgeVector.vectorId
       );
-    }
+    };
 
-    const leftEdge = isTemp ? vector.leftEdge : dataService.getEdge(vector.leftEdgeId);
-    const rightEdge = isTemp ? vector.rightEdge : dataService.getEdge(vector.rightEdgeId);
-    const ctx = this.context
+    const leftEdge = isTemp
+      ? vector.leftEdge
+      : dataService.getEdge(vector.leftEdgeId);
+    const rightEdge = isTemp
+      ? vector.rightEdge
+      : dataService.getEdge(vector.rightEdgeId);
+    const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, vector, "Edge")
+    help.setVectorStyle(ctx, vector, "Edge");
     isTemp && (ctx.globalAlpha = 0.3);
-    drawEdgeChild(leftEdge)
-    drawEdgeChild(rightEdge)
-    ctx.restore()
+    drawEdgeChild(leftEdge);
+    drawEdgeChild(rightEdge);
+    ctx.restore();
 
     if (import.meta.env.DEV) {
-      this.drawPoint(leftEdge.start)
-      this.drawPoint(leftEdge.end)
-      this.drawPoint(rightEdge.start)
-      this.drawPoint(rightEdge.end)
+      this.drawPoint(leftEdge.start);
+      this.drawPoint(leftEdge.end);
+      this.drawPoint(rightEdge.start);
+      this.drawPoint(rightEdge.end);
     }
   }
 
   drawControlPoint(vector) {
     const start = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo1.id)
-        .getPosition(vector.edgeInfo1.dir)
+      dataService.getEdge(vector.edgeInfo1.id).getPosition(vector.edgeInfo1.dir)
     );
     const end = coordinate.getScreenXY(
-      dataService
-        .getEdge(vector.edgeInfo2.id)
-        .getPosition(vector.edgeInfo2.dir)
-    )
+      dataService.getEdge(vector.edgeInfo2.id).getPosition(vector.edgeInfo2.dir)
+    );
     const pt2 = this.twoOrderBezier(
       0.5,
-      start, coordinate.getScreenXY({ x: vector.x, y: vector.y }),
+      start,
+      coordinate.getScreenXY({ x: vector.x, y: vector.y }),
       end
     );
     const pt = this.twoOrderBezier2(0.5, start, pt2, end);
 
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, null, 'Edge')
+    help.setVectorStyle(ctx, null, "Edge");
     //曲线
     ctx.moveTo(start.x, start.y);
     ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
@@ -231,7 +257,7 @@ export default class Draw {
 
     ctx.save();
     ctx.beginPath();
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector);
     ctx.arc(
       pt.x,
       pt.y,
@@ -246,60 +272,61 @@ export default class Draw {
   }
 
   drawCurveRoad(vector) {
-    const [coves] = help.transformCoves([vector.curves])
+    const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
     ctx.save();
 
-    help.setVectorStyle(ctx, vector)
-    help.drawCoves(ctx, coves)
+    help.setVectorStyle(ctx, vector);
+    help.drawCoves(ctx, coves);
     ctx.restore();
 
-    this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId))
-    this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId))
-    vector.leftLanesCurves && vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this))
-    vector.rightLanesCurves && vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this))
+    this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId));
+    this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId));
+    vector.leftLanesCurves &&
+      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+    vector.rightLanesCurves &&
+      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
     if (import.meta.env.DEV) {
-      vector.points.forEach(this.drawPoint.bind(this))
+      vector.points.forEach(this.drawPoint.bind(this));
     }
   }
 
   drawCurveEdge(vector, isTemp) {
-    const [coves] = help.transformCoves([vector.curves])
+    const [coves] = help.transformCoves([vector.curves]);
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, vector)
+    help.setVectorStyle(ctx, vector);
     help.drawCoves(ctx, coves);
     this.context.restore();
 
     if (import.meta.env.DEV) {
-      vector.points.forEach(this.drawPoint.bind(this))
+      vector.points.forEach(this.drawPoint.bind(this));
     }
   }
 
   drawCurveLan(lines) {
-    const [coves] = help.transformCoves([lines])
+    const [coves] = help.transformCoves([lines]);
     const ctx = this.context;
     ctx.save();
-    help.setVectorStyle(ctx, null, "CurveLan")
+    help.setVectorStyle(ctx, null, "CurveLan");
     ctx.setLineDash(Style.Lane.dash);
     help.drawCoves(ctx, coves);
     this.context.restore();
 
     if (import.meta.env.DEV) {
-      lines.map(line => {
-        this.drawPoint(line.start)
-        this.drawPoint(line.end)
-      })
+      lines.map((line) => {
+        this.drawPoint(line.start);
+        this.drawPoint(line.end);
+      });
     }
   }
 
-
   drawPoint(vector) {
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
 
     const ctx = this.context;
-    help.setVectorStyle(ctx, vector, vector.geoType || "Point")
+    help.setVectorStyle(ctx, vector, vector.geoType || "Point");
     ctx.beginPath();
     ctx.arc(
       pt.x,
@@ -320,7 +347,6 @@ export default class Draw {
     }
   }
 
-
   twoOrderBezier(t, p1, cp, p2) {
     //参数分别是t,起始点,控制点和终点
     var x1 = p1.x;

src/graphic/Renderer/Render.js

@@ -98,7 +98,7 @@ export default class Render {
   autoRedraw() {
     console.log("重绘");
     draw.clear();
-
+    draw.drawGrid(coordinate.width, coordinate.height, 50, 250);
     this.drawGeometry(dataService.getBackgroundImg());
 
     let roads = dataService.getRoads();

src/graphic/Service/CurveRoadService.js

@@ -370,12 +370,15 @@ export default class CurveRoadService extends RoadService {
     this.setLanes(curveRoad, dir);
 
     const line = mathUtil.createLine1(curveRoad.points[0], curveRoad.points[1]);
-    const leftCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
-    const rightCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
-    const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
-    const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
-    curveRoad.setWidth(leftWidth, "left");
-    curveRoad.setWidth(rightWidth, "right");
+    if (dir == "left") {
+      const leftCurveEdge = dataService.getCurveEdge(curveRoad.leftEdgeId);
+      const leftWidth = mathUtil.getDisForPoinLine(leftCurveEdge.start, line);
+      curveRoad.setWidth(leftWidth, "left");
+    } else if (dir == "right") {
+      const rightCurveEdge = dataService.getCurveEdge(curveRoad.rightEdgeId);
+      const rightWidth = mathUtil.getDisForPoinLine(rightCurveEdge.start, line);
+      curveRoad.setWidth(rightWidth, "right");
+    }
   }
 
   //单车道转多车道，默认是转换成左右两边各一个