继续搭建绘图系统

src/graphic/Constant.js

@@ -26,8 +26,7 @@ const Constant = {
   minLen: 0.2, //挨着，比如：点是否在线段上
   minAdsorbPix: 20, //最小吸附像素
   minRealDis: 20,
-  defaultRoad: 100, //默认公路宽度
-  defaultRoadWidth: 100,
+  defaultRoadWidth: 100, //默认公路宽度
   ratio: 1,
   minAngle: 10,
   maxAngle: 170,

src/graphic/Controls/AddRoad.js

@@ -278,7 +278,6 @@ export default class AddRoad {
   updateStart(position, linkedPointId) {
     mathUtil.clonePoint(this.startInfo.position, position);
     this.startInfo.linkedPointId = linkedPointId;
-    elementService.setNewRoadStartPosition(this.startInfo.position);
   }
 
   setNewRoadPoint(dir, position) {
@@ -304,8 +303,6 @@ export default class AddRoad {
     this.startInfo = {};
     this.endInfo = {};
     this.canAdd = false;
-    elementService.hideNewRoad();
-    elementService.hideStartAddRoad();
   }
 }
 

src/graphic/Controls/UIControl.js

@@ -54,6 +54,10 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddRoad);
         } else if (this.selectUI == UIEvents.Tag) {
           stateService.setEventName(LayerEvents.AddTag);
+        } else if (this.selectUI == UIEvents.Img) {
+          stateService.setEventName(LayerEvents.Img);
+        } else if (this.selectUI == UIEvents.AddMeasureLine) {
+          stateService.setEventName(LayerEvents.AddMeasureLine);
         }
       }
     }

src/graphic/Geometry/Road.js

@@ -9,7 +9,7 @@ export default class Road extends Geometry {
     this.endId = endId;
     this.leftEdgeId = null;
     this.rightEdgeId = null;
-    this.width = Constant.defaultRoad; //默认宽度
+    this.width = Constant.defaultRoadWidth; //默认宽度
     this.geoType = VectorType.Road;
     this.setId(vectorId);
   }

src/graphic/Layer.js

@@ -149,8 +149,8 @@ export default class Layer {
           };
         }
 
-        elementService.setAddingRoadPoint(position);
-        elementService.showStartAddRoad();
+        elementService.setPoint(position);
+        elementService.showPoint();
 
         addRoad.setNewRoadPoint("start", position);
         break;
@@ -165,7 +165,7 @@ export default class Layer {
         }
 
         elementService.execute(addRoad.startInfo.position, position);
-        elementService.setAddingRoadPoint(position);
+        elementService.setPoint(position);
         elementService.setNewRoad(addRoad.startInfo.position, position);
         elementService.showNewRoad();
         elementService.setNewRoadGeoType(VectorType.Road);
@@ -179,42 +179,6 @@ export default class Layer {
         }
         break;
       case LayerEvents.MoveRoad:
-        if (!this.dragging) {
-          return;
-        }
-        dx = (dx * coordinate.defaultZoom) / coordinate.zoom;
-        dy = (dy * coordinate.defaultZoom) / coordinate.zoom;
-        // 1表示可以继续移动，2表示不能移动(启动距离还不够)，3表示roadId被删除了,4表示重新开始移动（需要达到一定距离才能启动）,5表示不能移动（不合适）
-        let moveFlag = moveRoad.moveRoadPlane(draggingItem.vectorId, dx, dy);
-        // 启动的时候需要点距离，所以真正移动了才更新lastX和lastY
-        if (moveFlag == 1) {
-          this.lastX = X;
-          this.lastY = Y;
-          needAutoRedraw = true;
-        }
-        // 需要继续保持移动，一般是距离不够启动
-        else if (moveFlag == 2) {
-        }
-        // roadId被删除了
-        else if (moveFlag == 3) {
-          this.history.save();
-          stateService.clearSelectItem();
-          stateService.clearDraggingItem();
-          stateService.clearEventName();
-          listenLayer.clear();
-          needAutoRedraw = true;
-        }
-        // roadId有一端被吸附了，这时候需要重新启动
-        else if (moveFlag == 4) {
-          this.lastX = X;
-          this.lastY = Y;
-          this.startX = X;
-          this.startY = Y;
-          needAutoRedraw = true;
-        } else if (moveFlag == 5) {
-          this.lastX = X;
-          this.lastY = Y;
-        }
         break;
       case LayerEvents.MoveRoadPoint:
         if (!this.dragging) {
@@ -267,6 +231,21 @@ export default class Layer {
         }
         needAutoRedraw = true;
         break;
+      case LayerEvents.AddMeasureLine:
+        needAutoRedraw = true;
+        listenLayer.start(position);
+        if (listenLayer.modifyPoint) {
+          position = {
+            x: listenLayer.modifyPoint.x,
+            y: listenLayer.modifyPoint.y,
+          };
+        }
+
+        elementService.setPoint(position);
+        elementService.showPoint();
+
+        addRoad.setNewRoadPoint("start", position);
+        break;
       case LayerEvents.AddTag:
         needAutoRedraw = true;
         if (draggingItem == null) {
@@ -452,6 +431,10 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveRoadPoint);
         } else if (selectItem.type == VectorType.Tag) {
           stateService.setEventName(LayerEvents.MoveTag);
+        } else if (selectItem.type == VectorType.MeasureLine) {
+          stateService.setEventName(LayerEvents.MoveMeasureLine);
+        } else if (selectItem.type == VectorType.MeasureArrow) {
+          stateService.setEventName(LayerEvents.MoveMeasureArrow);
         }
       }
     } else if (eventType == "mouseUp") {
@@ -460,6 +443,12 @@ export default class Layer {
         //stateService.clearEventName()
       } else if (eventName == LayerEvents.AddRoad) {
         stateService.setEventName(LayerEvents.AddingRoad);
+      } else if (eventName == LayerEvents.AddingRoad) {
+        stateService.setEventName(LayerEvents.AddRoad);
+      } else if (eventName == LayerEvents.AddMeasureLine) {
+        stateService.setEventName(LayerEvents.AddingMeasureLine);
+      } else if (eventName == LayerEvents.AddingMeasureLine) {
+        stateService.setEventName(LayerEvents.AddMeasureLine);
       } else {
         stateService.clearEventName();
       }

src/graphic/Renderer/Draw.js

@@ -73,7 +73,7 @@ export default class Draw {
       this.context.globalAlpha = 0.3;
       point1 = coordinate.getScreenXY(vector.start);
       point2 = coordinate.getScreenXY(vector.end);
-      //this.context.lineWidth = Constant.defaultRoadWidth;
+      this.drawEdge(vector, isTemp);
     } else {
       let start = dataService.getPoint(vector.startId);
       let end = dataService.getPoint(vector.endId);
@@ -93,9 +93,34 @@ export default class Draw {
     this.context.restore();
   }
 
-  drawEdge(vector) {
+  drawEdge(vector, isTemp) {
+    //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
+    let start = dataService.getPoint(vector.startId);
+    let end = dataService.getPoint(vector.endId);
+
+    let leftEdge = dataService.getEdge(vector.leftEdgeId);
+    let rightEdge = dataService.getEdge(vector.rightEdgeId);
+    if (isTemp) {
+      start = vector.start;
+      end = vector.end;
+      leftEdge = vector.leftEdge;
+      rightEdge = vector.rightEdge;
+    }
+
+    const leftFlag = mathUtil.isSameDirForVector(
+      start,
+      end,
+      leftEdge.start,
+      leftEdge.end
+    );
+    const rightFlag = mathUtil.isSameDirForVector(
+      start,
+      end,
+      rightEdge.start,
+      rightEdge.end
+    );
+
     this.context.save();
-    this.context.beginPath();
     this.context.lineCap = "round"; //线段端点的样式
     this.context.strokeStyle = Style.Road.strokeStyle;
 
@@ -117,24 +142,27 @@ export default class Draw {
       }
     }
 
-    const leftEdge = dataService.getEdge(vector.leftEdgeId);
-    const rightEdge = dataService.getEdge(vector.rightEdgeId);
-
     let point1, point2;
+
     this.context.globalAlpha = 0.3;
     this.context.lineWidth = 1;
-    this.context.beginPath();
-    point1 = coordinate.getScreenXY(leftEdge.start);
-    point2 = coordinate.getScreenXY(leftEdge.end);
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
-    this.context.stroke();
 
-    point1 = coordinate.getScreenXY(rightEdge.start);
-    point2 = coordinate.getScreenXY(rightEdge.end);
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
-    this.context.stroke();
+    if (leftFlag > 0) {
+      this.context.beginPath();
+      point1 = coordinate.getScreenXY(leftEdge.start);
+      point2 = coordinate.getScreenXY(leftEdge.end);
+      this.context.moveTo(point1.x, point1.y);
+      this.context.lineTo(point2.x, point2.y);
+      this.context.stroke();
+    }
+
+    if (rightFlag > 0) {
+      point1 = coordinate.getScreenXY(rightEdge.start);
+      point2 = coordinate.getScreenXY(rightEdge.end);
+      this.context.moveTo(point1.x, point1.y);
+      this.context.lineTo(point2.x, point2.y);
+      this.context.stroke();
+    }
 
     this.context.restore();
 
@@ -529,10 +557,10 @@ export default class Draw {
     const twoPi = Math.PI * 2;
     const pt = coordinate.getScreenXY(element);
     this.context.save();
-    if (element.name == ElementEvents.AddingRoadPoint) {
-      radius = Style.Element.AddingRoadPoint.radius * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.AddingRoadPoint.strokeStyle;
-      this.context.fillStyle = Style.Element.AddingRoadPoint.fillStyle;
+    if (element.name == ElementEvents.AddingPoint) {
+      radius = Style.Element.AddingPoint.radius * coordinate.ratio;
+      this.context.strokeStyle = Style.Element.AddingPoint.strokeStyle;
+      this.context.fillStyle = Style.Element.AddingPoint.fillStyle;
     } else if (element.name == ElementEvents.StartSymbolPoints) {
       radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
       this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;

src/graphic/Renderer/Render.js

@@ -50,6 +50,9 @@ export default class Render {
       case VectorType.Road:
         draw.drawRoad(vector, true);
         break;
+      case VectorType.MeasureLine:
+        draw.drawMeasureLine(vector, true);
+        break;
     }
   }
 
@@ -62,17 +65,21 @@ export default class Render {
       this.drawElement(elementService.vCheckLines.Y);
     }
 
-    if (
-      elementService.addingRoadPoint &&
-      elementService.addingRoadPoint.display
-    ) {
-      this.drawElement(elementService.addingRoadPoint);
+    if (elementService.point && elementService.point.display) {
+      this.drawElement(elementService.point);
     }
 
     if (elementService.newRoad && elementService.newRoad.display) {
       this.drawElement(elementService.newRoad);
     }
 
+    if (
+      elementService.newMeasureLine &&
+      elementService.newMeasureLine.display
+    ) {
+      this.drawElement(elementService.newMeasureLine);
+    }
+
     if (elementService.checkLines.X && elementService.checkLines.X.display) {
       this.drawElement(elementService.checkLines.X);
     }

src/graphic/Service/ElementService.js

@@ -1,16 +1,21 @@
 import Point from "../Geometry/Point.js";
 import Line from "../Geometry/Line.js";
+import Road from "../Geometry/Road.js";
+import Edge from "../Geometry/Edge.js";
+import MeasureLine from "../Geometry/MeasureLine.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import { listenLayer } from "../ListenLayer";
 import Constant from "../Constant";
 import { dataService } from "./DataService.js";
 import { mathUtil } from "../Util/MathUtil";
 import { coordinate } from "../Coordinate.js";
-import { roadService } from "./RoadService.js";
+import { edgeService } from "./EdgeService.js";
 
 export class ElementService {
   constructor() {
-    this.addingRoadPoint = null;
+    this.point = null;
+
+    this.newMeasureLine = null;
     this.newRoad = null;
 
     this.checkLines = {
@@ -26,12 +31,15 @@ export class ElementService {
   }
 
   init() {
-    this.addingRoadPoint = new Point(0, 0);
-    this.addingRoadPoint.name = ElementEvents.AddingRoadPoint;
+    this.point = new Point(0, 0);
+    this.point.name = ElementEvents.AddingPoint;
 
-    this.newRoad = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
+    this.newRoad = this.createTempRoad();
     this.newRoad.name = ElementEvents.NewRoad;
 
+    this.newMeasureLine = new MeasureLine({ x: 0, y: 0 }, { x: 1, y: 1 });
+    this.newMeasureLine.name = ElementEvents.NewMeasureLine;
+
     this.checkLines.X = new Line({ x: 0, y: 0 }, { x: 1, y: 1 });
     this.checkLines.X.name = ElementEvents.CheckLinesX;
 
@@ -47,16 +55,54 @@ export class ElementService {
     this.hideAll();
   }
 
-  showStartAddRoad() {
-    this.addingRoadPoint.display = true;
+  createTempRoad() {
+    let p1 = new Point({ x: 0, y: 0 });
+    let p2 = new Point({ x: 1, y: 1 });
+    this.newRoad = new Road(p1.vectorId, p2.vectorId);
+    this.newRoad.start = p1;
+    this.newRoad.end = p2;
+
+    let edgePoints = mathUtil.RectangleVertex(
+      p1,
+      p2,
+      Constant.defaultRoadWidth
+    );
+
+    let leftEdge = new Edge(
+      edgePoints.leftEdgeStart,
+      edgePoints.leftEdgeEnd,
+      null,
+      this.newRoad.vectorId
+    );
+
+    let rightEdge = new Edge(
+      edgePoints.rightEdgeStart,
+      edgePoints.rightEdgeEnd,
+      null,
+      this.newRoad.vectorId
+    );
+
+    this.newRoad.setLeftEdge(leftEdge.vectorId);
+    this.newRoad.setRightEdge(rightEdge.vectorId);
+    leftEdge.setEdgeParent(this.newRoad.vectorId);
+    rightEdge.setEdgeParent(this.newRoad.vectorId);
+    this.newRoad.leftEdge = leftEdge;
+    this.newRoad.rightEdge = rightEdge;
+
+    this.hideNewRoad();
+    return this.newRoad;
+  }
+
+  showPoint() {
+    this.point.display = true;
   }
 
-  hideStartAddRoad() {
-    this.addingRoadPoint.display = false;
+  hidePoint() {
+    this.point.display = false;
   }
 
-  setAddingRoadPoint(position) {
-    this.addingRoadPoint.setPosition(position);
+  setPoint(position) {
+    this.point.setPosition(position);
   }
 
   showNewRoad() {
@@ -68,17 +114,24 @@ export class ElementService {
   }
 
   setNewRoad(point1, point2) {
-    this.newRoad.setPositions(point1, point2);
-  }
-
-  setNewRoadStartPosition(startPosition) {
-    this.newRoad.start.x = startPosition.x;
-    this.newRoad.start.y = startPosition.y;
-  }
-
-  setNewRoadEndPosition(endPosition) {
-    this.newRoad.end.x = endPosition.x;
-    this.newRoad.end.y = endPosition.y;
+    this.newRoad.start.setPosition(point1);
+    this.newRoad.end.setPosition(point2);
+    //需要更新Edge坐标
+    if (!mathUtil.equalPoint(point1, point2)) {
+      let edgePoints = mathUtil.RectangleVertex(
+        point1,
+        point2,
+        Constant.defaultRoadWidth
+      );
+      this.newRoad.leftEdge.setPositions(
+        edgePoints.leftEdgeStart,
+        edgePoints.leftEdgeEnd
+      );
+      this.newRoad.rightEdge.setPositions(
+        edgePoints.rightEdgeStart,
+        edgePoints.rightEdgeEnd
+      );
+    }
   }
 
   setNewRoadState(state) {
@@ -137,11 +190,20 @@ export class ElementService {
     this.vCheckLines.Y.setPositions(point1, point2);
   }
 
+  showNewMeasureLine() {
+    this.newMeasureLine.display = true;
+  }
+
+  hideNewMeasureLine() {
+    this.newMeasureLine.display = false;
+  }
+
   hideAll() {
     this.hideCheckLinesX();
     this.hideCheckLinesY();
-    this.hideStartAddRoad();
+    this.hidePoint();
     this.hideNewRoad();
+    this.hideNewMeasureLine();
     this.hideVCheckLinesX();
     this.hideVCheckLinesY();
   }
@@ -207,41 +269,41 @@ export class ElementService {
     }
   }
 
-  //pointId是角度的顶点
-  //exceptPointId表示position对应的pointId(如果有的话)
-  checkAngle(position, pointId, exceptPointId) {
-    //type:1表示90°，2表示180°
-    function ajust(position, point1, point2, type) {
-      let line = mathUtil.createLine1(point1, point2);
-      let join = null;
-      if (type == 1) {
-        let vLine = mathUtil.getVerticalLine(line, point1);
-        join = mathUtil.getJoinLinePoint(position, vLine);
-      } else if (type == 2) {
-        join = mathUtil.getJoinLinePoint(position, line);
-      }
-      return join;
-    }
-
-    let points = roadService.getNeighPoints(pointId, exceptPointId);
-    let point = dataService.getPoint(pointId);
-    let newPosition = null;
-    for (let i = 0; i < points.length; ++i) {
-      let angle = mathUtil.Angle(point, position, points[i]);
-      if (Math.abs((angle / Math.PI) * 180 - 90) < 5) {
-        newPosition = ajust(position, point, points[i], 1);
-      } else if (
-        Math.abs((angle / Math.PI) * 180) < 5 ||
-        Math.abs((angle / Math.PI) * 180 - 180) < 5
-      ) {
-        newPosition = ajust(position, point, points[i], 2);
-      }
-      if (newPosition != null) {
-        return newPosition;
-      }
-    }
-    return newPosition;
-  }
+  // //pointId是角度的顶点
+  // //exceptPointId表示position对应的pointId(如果有的话)
+  // checkAngle(position, pointId, exceptPointId) {
+  //   //type:1表示90°，2表示180°
+  //   function ajust(position, point1, point2, type) {
+  //     let line = mathUtil.createLine1(point1, point2);
+  //     let join = null;
+  //     if (type == 1) {
+  //       let vLine = mathUtil.getVerticalLine(line, point1);
+  //       join = mathUtil.getJoinLinePoint(position, vLine);
+  //     } else if (type == 2) {
+  //       join = mathUtil.getJoinLinePoint(position, line);
+  //     }
+  //     return join;
+  //   }
+
+  //   let points = roadService.getNeighPoints(pointId, exceptPointId);
+  //   let point = dataService.getPoint(pointId);
+  //   let newPosition = null;
+  //   for (let i = 0; i < points.length; ++i) {
+  //     let angle = mathUtil.Angle(point, position, points[i]);
+  //     if (Math.abs((angle / Math.PI) * 180 - 90) < 5) {
+  //       newPosition = ajust(position, point, points[i], 1);
+  //     } else if (
+  //       Math.abs((angle / Math.PI) * 180) < 5 ||
+  //       Math.abs((angle / Math.PI) * 180 - 180) < 5
+  //     ) {
+  //       newPosition = ajust(position, point, points[i], 2);
+  //     }
+  //     if (newPosition != null) {
+  //       return newPosition;
+  //     }
+  //   }
+  //   return newPosition;
+  // }
 }
 
 const elementService = new ElementService();

src/graphic/Service/RoadService.js

@@ -4,7 +4,7 @@ import { dataService } from "./DataService.js";
 import { pointService } from "./PointService.js";
 import { edgeService } from "./EdgeService.js";
 import { mathUtil } from "../Util/MathUtil.js";
-
+import Constant from "../Constant";
 export default class RoadService {
   constructor() {}
 
@@ -25,7 +25,6 @@ export default class RoadService {
       null,
       vectorId
     );
-    dataService.addEdge(leftEdge);
 
     let rightEdge = edgeService.create(
       edgePoints.rightEdgeStart,
@@ -33,7 +32,6 @@ export default class RoadService {
       null,
       vectorId
     );
-    dataService.addEdge(rightEdge);
 
     road.setLeftEdge(leftEdge.vectorId);
     road.setRightEdge(rightEdge.vectorId);

src/graphic/Style.js

@@ -50,7 +50,7 @@ const Style = {
     },
   },
   Element: {
-    AddingRoadPoint: {
+    AddingPoint: {
       radius: 4,
       fillStyle: "yellow",
       strokeStyle: "green",

src/graphic/Util/MathUtil.js

@@ -998,6 +998,52 @@ export default class MathUtil {
     const v2 = { x: position.x - start.x, y: position.y - start.y };
     return v1.x * v2.y - v1.y * v2.x;
   }
+
+  //向量是否同样的方向
+  isSameDirForVector(point1, point2, p1, p2) {
+    const v1 = {
+      x: point2.x - point1.x,
+      y: point2.y - point1.y,
+    };
+    const v2 = {
+      x: p2.x - p1.x,
+      y: p2.y - p1.y,
+    };
+
+    const value = this.dot(v1, v2);
+    if (value > 0) {
+      return true;
+    }
+    {
+      return false;
+    }
+  }
+
+  angleTo(v1, v2) {
+    const denominator = Math.sqrt(this.lengthSq(v1) * this.lengthSq(v2));
+    if (denominator === 0) return Math.PI / 2;
+    const theta = this.dot(v1, v2) / denominator;
+    //return Math.acos(this.clamp(theta, -1, 1));
+    return (Math.acos(this.clamp(theta, -1, 1)) / Math.PI) * 180;
+  }
+
+  //点乘
+  dot(v1, v2) {
+    return v1.x * v2.x + v1.y * v2.y;
+  }
+
+  //叉乘
+  cross(v1, v2) {
+    return v1.x * v2.y - v1.y * v2.x;
+  }
+
+  clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  lengthSq(v) {
+    return v.x * v.x + v.y * v.y;
+  }
 }
 
 const mathUtil = new MathUtil();

src/graphic/enum/ElementEvents.js

@@ -1,6 +1,7 @@
 const ElementEvents = {
-  AddingRoadPoint: "AddingRoadPoint",
+  AddingPoint: "AddingPoint",
   NewRoad: "NewRoad",
+  NewMeasureLine: "NewMeasureLine",
   CheckLinesX: "CheckLinesX",
   CheckLinesY: "CheckLinesY",
   VCheckLinesX: "vCheckLinesX",

src/graphic/enum/LayerEvents.js

@@ -8,5 +8,11 @@ const LayerEvents = {
 
   AddTag: "addTag",
   MoveTag: "moveTag",
+
+  Img: "Img",
+  AddMeasureLine: "addMeasureLine",
+  AddingMeasureLine: "addingMeasureLine",
+  MoveMeasureLine: "moveMeasureLine",
+  MoveMeasureArrow: "moveMeasureArrow",
 };
 export default LayerEvents;

src/graphic/enum/UIEvents.js

@@ -1,6 +1,8 @@
 const UIEvents = {
   Road: "road",
-  Tag: "Tag", //这个是标注，暂时这样
+  Tag: "tag", //这个是标注，暂时这样
+  Img: "backgroundImage",
+  MeasureLine: "measure",
 };
 
 // export const Furnitures = {

src/graphic/enum/VectorType.js

@@ -5,6 +5,7 @@ const VectorType = {
   Img: "Img",
   Line: "Line",
   MeasureLine: "MeasureLine",
+  MeasureArrow: "MeasureArrow",
   RoadCorner: "RoadCorner",
   Edge: "Edge",
   Road: "Road",

src/views/drawGraphic/index.vue

@@ -43,7 +43,6 @@ onMounted(() => {
   watchEffect(() => {
     if (drawRef.value) {
       drawRef.value.control.currentUI = activeMenu.value as any;
-      drawRef.value.control.updateEventNameForSelectUI();
     }
   });
 });