svg图例，还缺少旋转，其他的已经完成

src/graphic/Controls/MoveSVG.js

@@ -1,4 +1,5 @@
 import { dataService } from "../Service/DataService";
+import { mathUtil } from "../Util/MathUtil";
 
 export default class MoveSVG {
   constructor() {}
@@ -6,6 +7,20 @@ export default class MoveSVG {
   moveFullSVG(position, svgId) {
     let svg = dataService.getSVG(svgId);
     mathUtil.clonePoint(svg.center, position);
+    svg.setBoundingVertexs();
+  }
+
+  movePoint(position, svgId, pointIndex) {
+    let svg = dataService.getSVG(svgId);
+    const rec = svg.getLengthWidth();
+    const scale = svg.getScale();
+    const side1 = Math.sqrt(
+      Math.pow((rec.width / 2) * scale, 2) +
+        Math.pow((rec.length / 2) * scale, 2)
+    );
+    const side2 = mathUtil.getDistance(position, svg.center);
+    svg.scale = (side2 / side1) * scale;
+    svg.setBoundingVertexs();
   }
 }
 

src/graphic/Geometry/SVG.js

@@ -6,14 +6,15 @@ import Constant from "../Constant.js";
 
 //const sideWidth = 10;
 export default class SVG extends Geometry {
-  constructor(center, vectorId) {
+  constructor(center, name, vectorId) {
     super();
     this.center = center;
     this.points = null; //包裹的矩形的四个顶点
     this.angle = 0; //逆时针为负，顺时针为正。单位是：°
-    this.scale = 1; //缩放比例
-    this.name = null;
+    this.name = name;
     this.geoType = VectorType.SVG;
+    this.scale = this.getScale(); //缩放比例
+    this.setBoundingVertexs();
     this.setId(vectorId);
   }
 
@@ -37,23 +38,23 @@ export default class SVG extends Geometry {
   //   };
   // }
 
-  getBoundingVertexs(center) {
-    const boundingVertexs = [];
+  setBoundingVertexs() {
+    this.points = [];
     const rec = this.getLengthWidth();
-    const length = this.getScale() * rec.length * this.scale;
-    const width = this.getScale() * rec.width * this.scale;
+    const length = this.scale * rec.length;
+    const width = this.scale * rec.width;
 
-    const minX = center.x - length / 2;
-    const minY = center.y - width / 2;
-    const maxX = center.x + length / 2;
-    const maxY = center.y + width / 2;
+    const minX = this.center.x - length / 2;
+    const minY = this.center.y - width / 2;
+    const maxX = this.center.x + length / 2;
+    const maxY = this.center.y + width / 2;
 
     const point1 = this.rotatePoint(
       {
         x: minX,
         y: maxY,
       },
-      center,
+      this.center,
       this.angle
     );
 
@@ -62,7 +63,7 @@ export default class SVG extends Geometry {
         x: maxX,
         y: maxY,
       },
-      center,
+      this.center,
       this.angle
     );
 
@@ -71,7 +72,7 @@ export default class SVG extends Geometry {
         x: maxX,
         y: minY,
       },
-      center,
+      this.center,
       this.angle
     );
 
@@ -80,16 +81,14 @@ export default class SVG extends Geometry {
         x: minX,
         y: minY,
       },
-      center,
+      this.center,
       this.angle
     );
 
-    boundingVertexs.push(point1);
-    boundingVertexs.push(point2);
-    boundingVertexs.push(point3);
-    boundingVertexs.push(point4);
-
-    return boundingVertexs;
+    this.points.push(point1);
+    this.points.push(point2);
+    this.points.push(point3);
+    this.points.push(point4);
   }
 
   //不同图例，缩放比不一样
@@ -99,8 +98,8 @@ export default class SVG extends Geometry {
 
   getLengthWidth() {
     return {
-      length: 32,
-      width: 32,
+      length: 100,
+      width: 100,
     };
   }
 }

src/graphic/History/HistoryUtil.js

@@ -97,7 +97,9 @@ export default class HistoryUtil {
   isDifferentForSVGs(svg1, svg2) {
     if (
       mathUtil.equalPoint(svg1.center, svg2.center) &&
-      svg1.name == svg2.name
+      svg1.name == svg2.name &&
+      svg1.angle == svg2.angle &&
+      svg1.scale == svg2.scale
     ) {
       return false;
     } else {
@@ -334,6 +336,9 @@ export default class HistoryUtil {
     svgInfo.vectorId = svg1.vectorId;
     svgInfo.name = svg2.name;
     svgInfo.center = JSON.parse(JSON.stringify(svg2.center));
+    svgInfo.points = JSON.parse(JSON.stringify(svg2.points));
+    svgInfo.angle = svg2.angle;
+    svgInfo.scale = svg2.scale;
     this.setSVGInfo(svgInfo);
   }
 
@@ -571,7 +576,18 @@ export default class HistoryUtil {
     data.type = svg.geoType;
     data.center = {};
     mathUtil.clonePoint(data.center, svg.center);
+    data.points = [];
+    data.points[0] = {};
+    mathUtil.clonePoint(data.points[0], svg.points[0]);
+    data.points[1] = {};
+    mathUtil.clonePoint(data.points[1], svg.points[1]);
+    data.points[2] = {};
+    mathUtil.clonePoint(data.points[2], svg.points[2]);
+    data.points[3] = {};
+    mathUtil.clonePoint(data.points[3], svg.points[3]);
     data.name = svg.name;
+    data.angle = svg.angle;
+    data.scale = svg.scale;
     return data;
   }
 
@@ -771,7 +787,10 @@ export default class HistoryUtil {
     let svg = dataService.getSVG(svgInfo.vectorId);
     svg.vectorId = svgInfo.vectorId;
     svg.center = JSON.parse(JSON.stringify(svgInfo.center));
+    svg.points = JSON.parse(JSON.stringify(svgInfo.points));
     svg.name = svgInfo.name;
+    svg.angle = svgInfo.angle;
+    svg.scale = svgInfo.scale;
   }
 
   setRoadPointInfo(roadPointInfo) {

src/graphic/Layer.js

@@ -172,11 +172,7 @@ export default class Layer {
       case LayerEvents.AddSVG:
         stateService.setEventName(LayerEvents.MoveSVG);
         addSVG.buildSVG(position);
-        stateService.setSelectItem(
-          addSVG.newSVG.vectorId,
-          VectorType.SVG,
-          SelectState.Select
-        );
+        stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1);
         addSVG.clear();
         break;
       case LayerEvents.AddMagnifier:
@@ -189,16 +185,6 @@ export default class Layer {
         );
         addMagnifier.clear();
         break;
-      case LayerEvents.AddSVG:
-        stateService.setEventName(LayerEvents.MoveSVG);
-        addSVG.buildSVG(position);
-        stateService.setSelectItem(
-          addSVG.newSVG.vectorId,
-          VectorType.SVG,
-          SelectState.Select
-        );
-        addSVG.clear();
-        break;
     }
     const selectItem = stateService.getSelectItem();
     stateService.setDraggingItem(selectItem);
@@ -718,7 +704,15 @@ export default class Layer {
       case LayerEvents.MoveSVG:
         needAutoRedraw = true;
         if (draggingItem != null) {
-          moveSVG.moveFullSVG(position, draggingItem.vectorId);
+          if (draggingItem.state == -1) {
+            moveSVG.moveFullSVG(position, draggingItem.vectorId);
+          } else {
+            moveSVG.movePoint(
+              position,
+              draggingItem.vectorId,
+              draggingItem.state
+            );
+          }
         }
         break;
       case LayerEvents.MoveMagnifier:
@@ -727,12 +721,6 @@ export default class Layer {
           moveMagnifier.moveFullMagnifier(position, draggingItem.vectorId);
         }
         break;
-      case LayerEvents.MoveSVG:
-        needAutoRedraw = true;
-        if (draggingItem != null) {
-          moveSVG.moveFullSVG(position, draggingItem.vectorId);
-        }
-        break;
     }
 
     if (needAutoRedraw) {

src/graphic/ListenLayer.js

@@ -922,19 +922,37 @@ export default class ListenLayer {
         continue;
       }
       const svg = dataService.getSVG(svgId);
-      const distance = this.getDistance(position, svg.center);
-
-      if (distance < Constant.minAdsorbPix) {
+      for (let i = 0; i < svg.points.length; ++i) {
+        let distance = this.getDistance(position, svg.points[i]);
+        if (!svgInfo.svgId && distance < Constant.minAdsorbPix / 5) {
+          svgInfo = {
+            svgId: svgId,
+            distance: distance,
+            type: VectorType.SVG,
+            index: i,
+          };
+        } else if (svgInfo.svgId && distance < svgInfo.distance) {
+          svgInfo = {
+            svgId: svgId,
+            distance: distance,
+            type: VectorType.SVG,
+            index: i,
+          };
+        }
+      }
+      if (svgInfo.svgId) {
+        return svgInfo;
+      }
+      let flag = mathUtil.isPointInPoly(position, svg.points);
+      if (flag) {
         svgInfo = {
           svgId: svgId,
           type: VectorType.SVG,
-          distance: distance,
-          x: svg.center.x,
-          y: svg.center.y,
+          index: -1,
         };
       }
+      break;
     }
-
     return svgInfo;
   }
 
@@ -1182,6 +1200,10 @@ export default class ListenLayer {
       this.modifyPoint.linkedPointIdY = info.pointInfo.linkedPointIdY;
       this.modifyPoint.y = info.pointInfo.y;
       this.modifyPoint.x = info.pointInfo.x;
+    } else if (info && info.svgInfo.svgId) {
+      this.modifyPoint = {};
+      this.modifyPoint.svgId = info.svgInfo.svgId;
+      this.modifyPoint.index = info.svgInfo.index;
     } else {
       this.modifyPoint = null;
     }
@@ -1232,6 +1254,12 @@ export default class ListenLayer {
         VectorType.Text,
         SelectState.Select
       );
+    } else if (this.modifyPoint.svgId) {
+      stateService.setSelectItem(
+        this.modifyPoint.svgId,
+        VectorType.SVG,
+        this.modifyPoint.index
+      );
     } else if (this.modifyPoint.magnifierId) {
       stateService.setSelectItem(
         this.modifyPoint.magnifierId,

src/graphic/Renderer/Draw.js

@@ -716,6 +716,23 @@ export default class Draw {
     this.context.font = oldFont;
   }
 
+  drawSVG(vector) {
+    let points = [];
+    for (let i = 0; i < vector.points.length; ++i) {
+      const point = coordinate.getScreenXY(vector.points[i]);
+      points.push(point);
+    }
+    this.context.save();
+    this.context.beginPath();
+    this.context.moveTo(points[0].x, points[0].y);
+    this.context.lineTo(points[1].x, points[1].y);
+    this.context.lineTo(points[2].x, points[2].y);
+    this.context.lineTo(points[3].x, points[3].y);
+    this.context.closePath();
+    this.context.stroke();
+    this.context.restore();
+  }
+
   drawLineText(vector, style) {
     const startReal = dataService.getPoint(vector.startId);
     const endReal = dataService.getPoint(vector.endId);

src/graphic/Renderer/Render.js

@@ -127,50 +127,56 @@ export default class Render {
 
     this.drawGeometry(dataService.getBackgroundImg());
 
-    let roads = dataService.getRoads();
-    for (let key in roads) {
+    const roads = dataService.getRoads();
+    for (const key in roads) {
       this.drawGeometry(roads[key]);
     }
 
-    let roadPoints = dataService.getRoadPoints();
-    for (let key in roadPoints) {
+    const roadPoints = dataService.getRoadPoints();
+    for (const key in roadPoints) {
       this.drawGeometry(roadPoints[key]);
     }
 
-    let curveRoads = dataService.getCurveRoads();
-    for (let key in curveRoads) {
+    const curveRoads = dataService.getCurveRoads();
+    for (const key in curveRoads) {
       this.drawGeometry(curveRoads[key]);
     }
 
-    let crossPoints = dataService.getCrossPoints();
-    for (let key in crossPoints) {
+    const crossPoints = dataService.getCrossPoints();
+    for (const key in crossPoints) {
       this.drawGeometry(crossPoints[key]);
     }
 
-    let points = dataService.getPoints();
-    for (let key in points) {
+    const points = dataService.getPoints();
+    for (const key in points) {
       this.drawGeometry(points[key]);
     }
 
-    let lines = dataService.getLines();
-    for (let key in lines) {
+    const lines = dataService.getLines();
+    for (const key in lines) {
       this.drawGeometry(lines[key]);
     }
 
-    let circles = dataService.getCircles();
-    for (let key in circles) {
+    const circles = dataService.getCircles();
+    for (const key in circles) {
       this.drawGeometry(circles[key]);
     }
 
-    let texts = dataService.getTexts();
-    for (let key in texts) {
+    const texts = dataService.getTexts();
+    for (const key in texts) {
       this.drawGeometry(texts[key]);
     }
+
     const magnifiers = dataService.getMagnifiers();
-    for (let magnifiersKey in magnifiers) {
+    for (const magnifiersKey in magnifiers) {
       this.drawGeometry(magnifiers[magnifiersKey]);
     }
 
+    const svgs = dataService.getSVGs();
+    for (const key in svgs) {
+      this.drawGeometry(svgs[key]);
+    }
+
     //this.drawGeometry(dataService.getImg());
     this.redrawElements();