继续

src/graphic/History/Change.js

@@ -20,7 +20,9 @@ export default class Change {
     this.lastData.lines = JSON.parse(JSON.stringify(dataService.getLines()));
     this.lastData.texts = JSON.parse(JSON.stringify(dataService.getTexts()));
     this.lastData.points = JSON.parse(JSON.stringify(dataService.getPoints()));
-    this.lastData.circles = JSON.parse(JSON.stringify(dataService.getPoints()));
+    this.lastData.circles = JSON.parse(
+      JSON.stringify(dataService.getCircles())
+    );
   }
 
   operate() {

src/graphic/History/History.js

@@ -131,6 +131,7 @@ export default class History {
         let newLine = lineService.create(
           preLine.start,
           preLine.end,
+          preLine.category,
           preLine.id
         );
         historyUtil.assignLineFromLine(newLine, preLine);
@@ -204,6 +205,7 @@ export default class History {
         let newLine = lineService.create(
           preLine.start,
           preLine.end,
+          preLine.category,
           preLine.id
         );
         historyUtil.assignLineFromLine(newLine, preLine);

src/graphic/Renderer/Draw.js

@@ -1,10 +1,11 @@
-import {dataService} from "../Service/DataService.js";
-import {stateService} from "../Service/StateService.js";
-import {coordinate} from "../Coordinate.js";
+import { dataService } from "../Service/DataService.js";
+import { stateService } from "../Service/StateService.js";
+import { coordinate } from "../Coordinate.js";
 import Style from "@/graphic/CanvasStyle/index.js";
 import VectorType from "../enum/VectorType.js";
-import {mathUtil} from "../Util/MathUtil.js";
+import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
+import { elementService } from "../Service/ElementService.js";
 
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
@@ -36,7 +37,7 @@ const help = {
     const styles = help.getVectorStyle(vector, geoType);
     for (const style in styles) {
       if (typeof styles[style] === "function") {
-        styles[style](ctx, vector)
+        styles[style](ctx, vector);
       } else {
         ctx[style] = styles[style];
       }
@@ -76,7 +77,6 @@ const help = {
       ctx.stroke();
     }
   },
-
 };
 
 export default class Draw {
@@ -140,7 +140,7 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
-    console.log(vector)
+    console.log(vector);
     if (!isTemp && vector.display && vector.way !== "oneWay") {
       const ctx = this.context;
       const draw = (midDivide) => {
@@ -150,7 +150,7 @@ export default class Draw {
         ctx.moveTo(startScreen.x, startScreen.y);
         ctx.lineTo(endScreen.x, endScreen.y);
         ctx.stroke();
-      }
+      };
 
       ctx.save();
       help.setVectorStyle(ctx, vector);
@@ -167,7 +167,7 @@ export default class Draw {
         ? vector.end
         : dataService.getRoadPoint(vector.endId);
       this.drawText(
-        {x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2},
+        { x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2 },
         vector.vectorId
       );
     }
@@ -264,7 +264,7 @@ export default class Draw {
     const pt2 = mathUtil.twoOrderBezier(
       0.5,
       start,
-      coordinate.getScreenXY({x: vector.x, y: vector.y}),
+      coordinate.getScreenXY({ x: vector.x, y: vector.y }),
       end
     );
     const pt = mathUtil.twoOrderBezier2(0.5, start, pt2, end);
@@ -312,9 +312,9 @@ export default class Draw {
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
     vector.leftLanesCurves &&
-    vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
-    vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
+      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
     if (import.meta.env.DEV) {
       vector.points.forEach(this.drawPoint.bind(this));
@@ -360,16 +360,16 @@ export default class Draw {
     this.drawPoint({
       ...element.center,
       radius: element.radius,
-      geoType: element.geoType
-    })
+      geoType: element.geoType,
+    });
   }
 
   drawPoint(vector) {
-    const pt = coordinate.getScreenXY({x: vector.x, y: vector.y});
+    const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
     const style = help.setVectorStyle(ctx, vector, vector.geoType || "Point");
-    const radius = (vector.radius || style.radius) * coordinate.ratio
-    ctx.save()
+    const radius = (vector.radius || style.radius) * coordinate.ratio;
+    ctx.save();
     ctx.beginPath();
     ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
     ctx.stroke();
@@ -400,14 +400,34 @@ export default class Draw {
     ctx.restore();
   }
 
+  drawLine(vector) {
+    let start = dataService.getPoint(vector.startId);
+    start = coordinate.getScreenXY(start);
+    let end = dataService.getPoint(vector.endId);
+    end = coordinate.getScreenXY(end);
 
-  drawLine(element) {
-    const start = element.getType === VectorType.Line
-      ? dataService.getLine(element.start)
-      : coordinate.getScreenXY(element.start)
-    const end = element.getType === VectorType.Line
-      ? dataService.getLine(element.end)
-      : coordinate.getScreenXY(element.end)
+    this.context.save();
+    const style = help.setVectorStyle(
+      this.context,
+      vector,
+      vector.category || vector.geoType
+    );
+
+    if (style.dash) {
+      this.context.setLineDash(style.dash);
+    }
+    this.context.beginPath();
+    this.context.moveTo(start.x, start.y);
+    this.context.lineTo(end.x, end.y);
+    this.context.stroke();
+    this.context.restore();
+  }
+
+  drawElementLine(element) {
+    let start = elementService.getPoint(element.startId);
+    start = coordinate.getScreenXY(start);
+    let end = elementService.getPoint(element.endId);
+    end = coordinate.getScreenXY(end);
 
     this.context.save();
     const style = help.setVectorStyle(
@@ -425,8 +445,7 @@ export default class Draw {
     this.context.stroke();
     this.context.restore();
   }
-
 }
 
 const draw = new Draw();
-export {draw};
+export { draw };

src/graphic/Renderer/Render.js

@@ -30,7 +30,7 @@ export default class Render {
         draw.drawControlPoint(vector);
         return;
       case VectorType.Line:
-        draw.drawLine(vector); //需要修改，start和end是point的id
+        draw.drawLine(vector); //需要修改，有几种情况：测量，校准，基准
         break;
       case VectorType.Text:
         draw.drawText(vector, styleType, flag);
@@ -53,7 +53,7 @@ export default class Render {
         draw.drawCircle(vector);
         break;
       case VectorType.Line:
-        draw.drawLine(vector); //需要修改，有几种情况：测量，校准，基准
+        draw.drawElementLine(vector); //需要修改，有几种情况：测量，校准，基准
         break;
       case VectorType.Road:
         draw.drawRoad(vector, true);
@@ -124,6 +124,16 @@ export default class Render {
       this.drawGeometry(controlPoints[key]);
     }
 
+    let lines = dataService.getLines();
+    for (let key in lines) {
+      this.drawGeometry(lines[key]);
+    }
+
+    let circles = dataService.getCircles();
+    for (let key in circles) {
+      this.drawGeometry(circles[key]);
+    }
+
     let texts = dataService.getTexts();
     for (let key in texts) {
       this.drawGeometry(texts[key]);

src/graphic/Service/ElementService.js

@@ -62,7 +62,7 @@ export class ElementService {
       this.checkLinesXStart.vectorId,
       this.checkLinesXEnd.vectorId
     );
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.checkLines.X.setCategory(VectorCategory.Line.GuideLine);
     this.checkLines.X.name = ElementEvents.CheckLinesX;
 
     this.checkLinesYStart = new Point({ x: 0, y: 0 });
@@ -71,7 +71,7 @@ export class ElementService {
       this.checkLinesYStart.vectorId,
       this.checkLinesYEnd.vectorId
     );
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.checkLines.Y.setCategory(VectorCategory.Line.GuideLine);
     this.checkLines.Y.name = ElementEvents.CheckLinesY;
 
     this.vCheckLinesXStart = new Point({ x: 0, y: 0 });
@@ -80,7 +80,7 @@ export class ElementService {
       this.vCheckLinesXStart.vectorId,
       this.vCheckLinesXEnd.vectorId
     );
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.vCheckLines.X.setCategory(VectorCategory.Line.GuideLine);
     this.vCheckLines.X.name = ElementEvents.VCheckLinesX;
 
     this.vCheckLinesYStart = new Point({ x: 0, y: 0 });
@@ -89,12 +89,38 @@ export class ElementService {
       this.vCheckLinesYStart.vectorId,
       this.vCheckLinesYEnd.vectorId
     );
-    this.newLine.setCategory(VectorCategory.Line.GuideLine);
+    this.vCheckLines.Y.setCategory(VectorCategory.Line.GuideLine);
     this.vCheckLines.Y.name = ElementEvents.VCheckLinesY;
 
     this.hideAll();
   }
 
+  getPoint(vectorId) {
+    if (this.newLineStart.vectorId == vectorId) {
+      return this.newLineStart;
+    } else if (this.newLineEnd.vectorId == vectorId) {
+      return this.newLineEnd;
+    } else if (this.checkLinesXStart.vectorId == vectorId) {
+      return this.checkLinesXStart;
+    } else if (this.checkLinesXEnd.vectorId == vectorId) {
+      return this.checkLinesXEnd;
+    } else if (this.checkLinesYStart.vectorId == vectorId) {
+      return this.checkLinesYStart;
+    } else if (this.checkLinesYEnd.vectorId == vectorId) {
+      return this.checkLinesYEnd;
+    } else if (this.vCheckLinesXStart.vectorId == vectorId) {
+      return this.vCheckLinesXStart;
+    } else if (this.vCheckLinesXEnd.vectorId == vectorId) {
+      return this.vCheckLinesXEnd;
+    } else if (this.vCheckLinesYStart.vectorId == vectorId) {
+      return this.vCheckLinesYStart;
+    } else if (this.vCheckLinesYEnd.vectorId == vectorId) {
+      return this.vCheckLinesYEnd;
+    } else {
+      return null;
+    }
+  }
+
   //临时的
   createTempRoad() {
     let p1 = new Point({ x: 0, y: 0 });

src/graphic/Service/LineService.js

@@ -6,13 +6,16 @@ import { mathUtil } from "../Util/MathUtil.js";
 export default class LineService {
   constructor() {}
 
-  create(startPoint, endPoint) {
+  create(startPoint, endPoint, category, vectorId) {
     if (!startPoint || !endPoint || mathUtil.equalPoint(startPoint, endPoint)) {
       return null;
     }
     let start = new Point(startPoint);
     let end = new Point(endPoint);
     let line = new Line(start.vectorId, end.vectorId, vectorId);
+    if (category) {
+      line.setCategory(category);
+    }
     start.setPointParent(line.vectorId, "start");
     end.setPointParent(line.vectorId, "end");
     dataService.addPoint(start);