添加直路绘制

src/graphic/Renderer/Draw.js

@@ -2,7 +2,7 @@ import { dataService } from "../Service/DataService.js";
 import { stateService } from "../Service/StateService.js";
 import { measureService } from "../Service/MeasureService";
 import { coordinate } from "../Coordinate.js";
-import Style from "../style";
+import Style from "../style/index.js";
 import VectorType from "../enum/VectorType.js";
 import SelectState from "../enum/SelectState.js";
 import { mathUtil } from "../Util/MathUtil.js";
@@ -129,12 +129,12 @@ export default class Draw {
         vector.vectorId
       );
     }
+    console.log(isTemp, "绘制")
     this.drawEdge(vector, isTemp);
   }
 
-  drawCurveRoad(vector, isTemp) {
+  drawCurveRoad(vector) {
     const [coves] = help.getLinesCoves([vector.curves])
-    console.log(coves)
     const ctx = this.context;
     ctx.save();
 
@@ -142,11 +142,10 @@ export default class Draw {
     help.drawCoves(ctx, coves)
     ctx.restore();
 
-    console.log(dataService.getCurveEdge(vector.rightEdgeId))
-    // this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId))
-    // this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId))
-    // vector.leftLanes.forEach(this.drawCurveLan.bind(this))
-    // vector.rightLanes.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))
 
     vector.points.forEach(this.drawPoint.bind(this))
   }
@@ -194,12 +193,15 @@ export default class Draw {
       rightEdge.start,
       rightEdge.end
     );
+    if (!isTemp) {
+      console.log("===>", start, end, rightEdge.start, rightEdge.end, rightFlag)
+    }
 
     ctx.save();
     help.setVectorStyle(ctx, vector, "Edge")
     isTemp && (ctx.globalAlpha = 0.3);
 
-    if (leftFlag > 0) {
+    if (leftFlag) {
       ctx.beginPath();
       const point1 = coordinate.getScreenXY(leftEdge.start);
       const point2 = coordinate.getScreenXY(leftEdge.end);
@@ -207,7 +209,7 @@ export default class Draw {
       ctx.lineTo(point2.x, point2.y);
       ctx.stroke();
     }
-    if (rightFlag > 0) {
+    if (rightFlag) {
       const point1 = coordinate.getScreenXY(rightEdge.start);
       const point2 = coordinate.getScreenXY(rightEdge.end);
       ctx.moveTo(point1.x, point1.y);
@@ -256,92 +258,46 @@ export default class Draw {
   }
 
   drawControlPoint(vector) {
-    // const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
-    // const color = this.rgb();
-    // this.context.strokeStyle = color;
-    // this.context.fillStyle = color;
-    // let radius = Style.Point.radius;
-    // this.context.beginPath();
-    // this.context.arc(
-    //   pt.x,
-    //   pt.y,
-    //   radius * coordinate.ratio,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
-    // let start = dataService
-    //   .getEdge(vector.edgeInfo1.id)
-    //   .getPosition(vector.edgeInfo1.dir);
-    // start = coordinate.getScreenXY(start);
-    // let end = dataService
-    //   .getEdge(vector.edgeInfo2.id)
-    //   .getPosition(vector.edgeInfo2.dir);
-    // end = coordinate.getScreenXY(end);
-    // this.context.beginPath();
-    // this.context.moveTo(start.x, start.y);
-    // this.context.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
-    // this.context.stroke();
-    // this.context.restore();
-    // this.drawText(vector, vector.vectorId);
-    // const pt2 = this.twoOrderBezier(0.5, start, pt, end);
-    // this.context.save();
-    // this.context.strokeStyle = color;
-    // this.context.fillStyle = color;
-    // this.context.beginPath();
-    // this.context.arc(
-    //   pt2.x,
-    //   pt2.y,
-    //   radius * coordinate.ratio * 3,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
-    // this.context.restore();
-
-    let pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
-    const color = this.rgb();
-    this.context.strokeStyle = color;
-    this.context.fillStyle = color;
-    let radius = Style.Point.radius;
-
-    let start = dataService
-      .getEdge(vector.edgeInfo1.id)
-      .getPosition(vector.edgeInfo1.dir);
-    start = coordinate.getScreenXY(start);
-    let end = dataService
-      .getEdge(vector.edgeInfo2.id)
-      .getPosition(vector.edgeInfo2.dir);
-    end = coordinate.getScreenXY(end);
-
-    const pt2 = this.twoOrderBezier(0.5, start, pt, end);
-    pt = this.twoOrderBezier2(0.5, start, pt2, end);
+    const start = coordinate.getScreenXY(
+      dataService
+        .getEdge(vector.edgeInfo1.id)
+        .getPosition(vector.edgeInfo1.dir)
+    );
+    const end = coordinate.getScreenXY(
+      dataService
+        .getEdge(vector.edgeInfo2.id)
+        .getPosition(vector.edgeInfo2.dir)
+    )
+    const pt2 = this.twoOrderBezier(
+      0.5,
+      start, coordinate.getScreenXY({ x: vector.x, y: vector.y }),
+      end
+    );
+    const pt = this.twoOrderBezier2(0.5, start, pt2, end);
 
-    this.context.save();
+    const ctx = this.context;
+    ctx.save();
+    help.setVectorStyle(ctx, vector)
     //曲线
-    this.context.moveTo(start.x, start.y);
-    this.context.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
-    this.context.stroke();
-    this.context.restore();
+    ctx.moveTo(start.x, start.y);
+    ctx.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
+    ctx.stroke();
+    ctx.restore();
 
-    this.context.save();
-    this.context.beginPath();
-    this.context.arc(
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(
       pt.x,
       pt.y,
-      radius * coordinate.ratio * 3,
+      Style.ControlPoint.radius * coordinate.ratio,
       0,
       Math.PI * 2,
       true
     );
-    this.context.stroke();
-    this.context.fill();
+    ctx.stroke();
+    ctx.fill();
 
-    this.context.restore();
+    ctx.restore();
   }
 
   twoOrderBezier(t, p1, cp, p2) {

src/graphic/Renderer/Render.js

@@ -17,7 +17,6 @@ export default class Render {
     if (draw.context == null || vector == null) {
       return;
     }
-    //console.log(vector)
     switch (vector.geoType) {
       case VectorType.Road:
         draw.drawRoad(vector, false);

src/graphic/Style/default.js

@@ -59,6 +59,11 @@ const CurvePoint = {
   ...Point
 }
 
+const ControlPoint = {
+  ...Point,
+  radius: 14
+}
+
 const Text = {
   ...Tag,
   ...CanvasFont,
@@ -111,6 +116,7 @@ export default {
   CurveLan,
   Point,
   Tag,
+  ControlPoint,
   CurvePoint,
   Text,
   Font: CanvasFont,

src/graphic/Style/select.js

@@ -28,10 +28,16 @@ const CurvePoint = {
   ...Point
 }
 
+const ControlPoint = {
+  ...def.ControlPoint,
+  ...Point,
+}
+
 export default {
   Road,
   Tag,
   Point,
   CurvePoint,
+  ControlPoint,
   CurveRoad
 }