Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/graphic/Renderer/Draw.js

src/graphic/Geometry/Img.js

@@ -5,9 +5,9 @@ export default class Img extends Geometry {
   constructor(src, vectorId) {
     super();
     this.src = null;
+    this.angle = 0;
     this.geoType = VectorType.Img;
     this.setId(vectorId);
-
     this.setSrc(src);
   }
 

src/graphic/Layer.js

@@ -89,7 +89,7 @@ export default class Layer {
       this.renderer.autoRedraw();
       return;
     }
-
+    this.dragging = false;
     this.setEventName("mouseDown");
     const selectItem = stateService.getSelectItem();
     const eventName = stateService.getEventName();
@@ -118,8 +118,6 @@ export default class Layer {
     ) {
       // 是否拖拽了
       this.dragging = true;
-    } else {
-      this.dragging = false;
     }
 
     const eventName = stateService.getEventName();
@@ -311,6 +309,14 @@ export default class Layer {
         addRoad.setNewRoadPoint("start", position);
         break;
       case LayerEvents.MoveCurveRoadPoint:
+        point = dataService.getCurvePoint(draggingItem.vectorId);
+        listenLayer.start(position, draggingItem.vectorId, null, point.parent);
+        if (listenLayer.modifyPoint) {
+          position = {
+            x: listenLayer.modifyPoint.x,
+            y: listenLayer.modifyPoint.y,
+          };
+        }
         if (draggingItem) {
           moveRoad.moveCurveRoadPoint(draggingItem.vectorId, position);
           needAutoRedraw = true;
@@ -506,6 +512,7 @@ export default class Layer {
   onKeydown(e) {
     let focusItem = stateService.getFocusItem();
     if (focusItem) {
+      console.log("键盘(foucus有效)：" + e.code);
       if (e.code == "Delete") {
         //删除
         const road = dataService.getRoad(focusItem.vectorId);
@@ -534,6 +541,8 @@ export default class Layer {
         this.renderer.autoRedraw();
         this.history.save();
       }
+    } else {
+      console.log("键盘(foucus无效)：" + e.code);
     }
   }
 

src/graphic/ListenLayer.js

@@ -29,11 +29,12 @@ export default class ListenLayer {
   }
 
   //开始监听，exceptPointId表示不考虑的点，exceptRoadIds表示不考虑的墙
-  start(position, exceptPointId, exceptRoadIds) {
+  start(position, exceptPointId, exceptRoadIds, exceptCurveRoadId) {
     let nearest = this.getNearForVectors(
       position,
       exceptPointId,
-      exceptRoadIds
+      exceptRoadIds,
+      exceptCurveRoadId
     );
 
     if (
@@ -83,7 +84,70 @@ export default class ListenLayer {
   // 获得最近的墙面和墙角
   // 同时获得吸附的相关信息
   // 找到选中的symbol(只有选中了，才算是最近的)
-  getNearForVectors(position, exceptPointId, exceptRoadIds) {
+  getNearForVectors(position, exceptPointId, exceptRoadIds, exceptCurveRoadId) {
+    let info1 = this.getNearForRoad(position, exceptPointId, exceptRoadIds);
+    let info2 = this.getNearForCurveRoad(
+      position,
+      exceptPointId,
+      exceptCurveRoadId
+    );
+
+    let min1 = info1.min1;
+    let modifyPoint = info1.modifyPoint;
+    let _modifyPoint = info1._modifyPoint;
+
+    if (min1 == null && info2.min1 != null) {
+      min1 = info2.min1;
+      modifyPoint = info2.modifyPoint;
+      _modifyPoint = info2._modifyPoint;
+    } else if (info2.min1 != null) {
+      if (info1.min1.distance > info2.min1.distance) {
+        min1 = info2.min1;
+        modifyPoint = info2.modifyPoint;
+        _modifyPoint = info2._modifyPoint;
+      }
+    }
+
+    let min2 = info1.min2;
+    if (min2 == null && info2.min2 != null) {
+      min2 = info2.min2;
+      modifyPoint = info2.modifyPoint;
+      _modifyPoint = info2._modifyPoint;
+    } else if (info2.min2 != null) {
+      if (info1.min2.distance > info2.min2.distance) {
+        min2 = info2.min2;
+        modifyPoint = info2.modifyPoint;
+        _modifyPoint = info2._modifyPoint;
+      }
+    }
+
+    const result = {
+      minPoint: min1,
+      minRoad: min2,
+      tagInfo: {},
+    };
+
+    if (_modifyPoint != null) {
+      result.modifyPoint = JSON.parse(JSON.stringify(_modifyPoint));
+    } else if (
+      modifyPoint.hasOwnProperty("x") &&
+      modifyPoint.hasOwnProperty("y")
+    ) {
+      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+    } else if (modifyPoint.hasOwnProperty("x")) {
+      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+      result.modifyPoint.x = modifyPoint.x;
+      result.modifyPoint.y = position.y;
+    } else if (modifyPoint.hasOwnProperty("y")) {
+      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
+      result.modifyPoint.x = position.x;
+      result.modifyPoint.y = modifyPoint.y;
+    }
+
+    return result;
+  }
+
+  getNearForRoad(position, exceptPointId, exceptRoadIds) {
     let min1 = null; // 与墙角的距离
     let min2 = null; // 与墙面的距离
     // 纠正
@@ -95,7 +159,6 @@ export default class ListenLayer {
     if (exceptPointId) {
       hasPointIds.push(exceptPointId);
     }
-
     const roads = dataService.getRoads();
     for (const roadId in roads) {
       if (exceptRoadIds && exceptRoadIds.hasOwnProperty(roadId)) {
@@ -108,13 +171,7 @@ export default class ListenLayer {
       const endPoint = dataService.getPoint(road.endId);
       let distance = null;
       const line = roadService.getMidLine(road);
-      if (!line) {
-        //debugger
-        //删除墙
-        dataService.deleteRoad(roadId);
-        continue;
-        console.error("getNearForVectors************************************");
-      }
+      //垂直交点
       const join = mathUtil.getJoinLinePoint(position, line);
 
       //先找端点
@@ -129,7 +186,7 @@ export default class ListenLayer {
             type: VectorType.RoadCorner,
           };
 
-          //start部分找到了墙的端点
+          //在公路内了
           if (
             (mathUtil.getDistance(join, position) < road.width / 2 &&
               mathUtil.getDistance(join, startPoint) < road.width / 2) ||
@@ -262,176 +319,109 @@ export default class ListenLayer {
       }
     }
 
+    return {
+      min1: min1,
+      min2: min2,
+      modifyPoint: modifyPoint,
+      _modifyPoint: _modifyPoint,
+    };
+  }
+
+  //暂时只考虑端点
+  getNearForCurveRoad(position, exceptPointId, exceptCurveRoadId) {
+    let min1 = null; // 与墙角的距离
+    let min2 = null; // 与墙面的距离
+    // 纠正
+    // 垂直，水平
+    const modifyPoint = {};
+    // 吸附在墙面上
+    let _modifyPoint = null;
+    const hasPointIds = [];
+    if (exceptPointId) {
+      hasPointIds.push(exceptPointId);
+    }
     const curveRoads = dataService.getCurveRoads();
     for (const curveRoadId in curveRoads) {
-      if (exceptRoadIds && exceptRoadIds.hasOwnProperty(curveRoadId)) {
+      if (exceptCurveRoadId && exceptCurveRoadId == curveRoadId) {
         continue;
       }
 
       const curveRoad = dataService.getCurveRoad(curveRoadId);
-      const startPoint = dataService.getCurvePoint(curveRoad.startId);
-      const endPoint = dataService.getCurvePoint(curveRoad.endId);
-      let distance = null;
-
-      //先找端点
-      if (hasPointIds.indexOf(curveRoad.startId) == -1) {
-        hasPointIds.push(curveRoad.startId);
-        distance = mathUtil.getDistance(position, startPoint);
-
-        if (min1 == null || min1.distance > distance) {
-          min1 = {
-            distance: distance,
-            pointId: curveRoad.startId,
-            type: VectorType.CurveRoadCorner,
-          };
-
-          if (min1.distance < Constant.minAdsorbPix) {
-            modifyPoint.linkedPointId = curveRoad.startId;
-            modifyPoint.x = startPoint.x;
-            modifyPoint.y = startPoint.y;
+      for (let i = 0; i < curveRoad.points.length; ++i) {
+        let distance = null;
+        //先找端点
+        if (hasPointIds.indexOf(curveRoad.points[i].vectorId) == -1) {
+          hasPointIds.push(curveRoad.points[i].vectorId);
+          distance = mathUtil.getDistance(position, curveRoad.points[i]);
+
+          if (distance < Constant.minAdsorbPix) {
+            min1 = {
+              distance: distance,
+              pointId: curveRoad.points[i].vectorId,
+              type: VectorType.CurveRoadCorner,
+            };
+
+            modifyPoint.linkedPointId = curveRoad.points[i].vectorId;
+            modifyPoint.x = curveRoad.points[i].x;
+            modifyPoint.y = curveRoad.points[i].y;
             delete modifyPoint.linkedPointIdX;
             delete modifyPoint.linkedPointIdY;
             break;
           }
-        }
 
-        //start部分找到了与x接近的其他点
-        if (Math.abs(position.x - startPoint.x) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdX) {
-            modifyPoint.x = startPoint.x;
-            modifyPoint.linkedPointIdX = curveRoad.startId;
-          } else {
-            const linkedPointX = dataService.getCurvePoint(
-              modifyPoint.linkedPointIdX
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointX) >
-              mathUtil.getDistance(position, startPoint)
-            ) {
-              modifyPoint.x = startPoint.x;
-              modifyPoint.linkedPointIdX = curveRoad.startId;
-            }
-          }
-        }
-        //start部分找到了与y接近的其他点
-        if (Math.abs(position.y - startPoint.y) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdY) {
-            modifyPoint.y = startPoint.y;
-            modifyPoint.linkedPointIdY = curveRoad.startId;
-          } else {
-            const linkedPointY = dataService.getCurvePoint(
-              modifyPoint.linkedPointIdY
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointY) >
-              mathUtil.getDistance(position, startPoint)
-            ) {
-              modifyPoint.y = startPoint.y;
-              modifyPoint.linkedPointIdY = curveRoad.startId;
-            }
-          }
-        }
-      }
-
-      if (hasPointIds.indexOf(curveRoad.endId) == -1) {
-        hasPointIds.push(curveRoad.endId);
-        distance = mathUtil.getDistance(position, endPoint);
-
-        if (min1 == null || min1.distance > distance) {
-          min1 = {
-            distance: distance,
-            pointId: curveRoad.endId,
-            type: VectorType.CurveRoadCorner,
-          };
-          //end部分找到了墙的端点
-          if (min1.distance < Constant.minAdsorbPix) {
-            modifyPoint.linkedPointId = curveRoad.endId;
-            modifyPoint.x = endPoint.x;
-            modifyPoint.y = endPoint.y;
-            delete modifyPoint.linkedPointIdX;
-            delete modifyPoint.linkedPointIdY;
-            break;
-          }
-        }
-        //end部分找到了与x接近的其他点
-        if (Math.abs(position.x - endPoint.x) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdX) {
-            modifyPoint.x = endPoint.x;
-            modifyPoint.linkedPointIdX = curveRoad.endId;
-          } else {
-            const linkedPointX = dataService.getCurvePoint(
-              modifyPoint.linkedPointIdX
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointX) >
-              mathUtil.getDistance(position, endPoint)
-            ) {
-              modifyPoint.x = endPoint.x;
-              modifyPoint.linkedPointIdX = curveRoad.endId;
+          //start部分找到了与x接近的其他点
+          if (
+            Math.abs(position.x - curveRoad.points[i].x) < Constant.minAdsorbPix
+          ) {
+            if (!modifyPoint.linkedPointIdX) {
+              modifyPoint.x = curveRoad.points[i].x;
+              modifyPoint.linkedPointIdX = curveRoad.points[i].vectorId;
+            } else {
+              const linkedPointX = dataService.getCurvePoint(
+                modifyPoint.linkedPointIdX
+              );
+              if (
+                mathUtil.getDistance(position, linkedPointX) >
+                mathUtil.getDistance(position, curveRoad.points[i])
+              ) {
+                modifyPoint.x = curveRoad.points[i].x;
+                modifyPoint.linkedPointIdX = curveRoad.points[i].vectorId;
+              }
             }
           }
-        }
-        //end部分找到了与y接近的其他点
-        if (Math.abs(position.y - endPoint.y) < Constant.minAdsorbPix) {
-          if (!modifyPoint.linkedPointIdY) {
-            modifyPoint.y = endPoint.y;
-            modifyPoint.linkedPointIdY = curveRoad.endId;
-          } else {
-            const linkedPointY = dataService.getCurvePoint(
-              modifyPoint.linkedPointIdY
-            );
-            if (
-              mathUtil.getDistance(position, linkedPointY) >
-              mathUtil.getDistance(position, endPoint)
-            ) {
-              modifyPoint.y = endPoint.y;
-              modifyPoint.linkedPointIdY = curveRoad.endId;
+          //start部分找到了与y接近的其他点
+          if (
+            Math.abs(position.y - curveRoad.points[i].y) < Constant.minAdsorbPix
+          ) {
+            if (!modifyPoint.linkedPointIdY) {
+              modifyPoint.y = curveRoad.points[i].y;
+              modifyPoint.linkedPointIdY = curveRoad.points[i].vectorId;
+            } else {
+              const linkedPointY = dataService.getCurvePoint(
+                modifyPoint.linkedPointIdY
+              );
+              if (
+                mathUtil.getDistance(position, linkedPointY) >
+                mathUtil.getDistance(position, curveRoad.points[i])
+              ) {
+                modifyPoint.y = curveRoad.points[i].y;
+                modifyPoint.linkedPointIdY = curveRoad.points[i].vectorId;
+              }
             }
           }
         }
       }
     }
-
-    const result = {
-      minPoint: min1,
-      minRoad: min2,
-      tagInfo: {},
+    return {
+      min1: min1,
+      min2: min2,
+      modifyPoint: modifyPoint,
+      _modifyPoint: _modifyPoint,
     };
-
-    if (_modifyPoint != null) {
-      result.modifyPoint = JSON.parse(JSON.stringify(_modifyPoint));
-    } else if (
-      modifyPoint.hasOwnProperty("x") &&
-      modifyPoint.hasOwnProperty("y")
-    ) {
-      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
-    } else if (modifyPoint.hasOwnProperty("x")) {
-      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
-      result.modifyPoint.x = modifyPoint.x;
-      result.modifyPoint.y = position.y;
-    } else if (modifyPoint.hasOwnProperty("y")) {
-      result.modifyPoint = JSON.parse(JSON.stringify(modifyPoint));
-      result.modifyPoint.x = position.x;
-      result.modifyPoint.y = modifyPoint.y;
-    }
-
-    // const tags = dataService.getTags();
-    // for (const tagId in tags) {
-    //   const tag = dataService.getTag(tagId);
-    //   const location = tag.isContain(position);
-    //   if (location) {
-    //     result.tagInfo = {
-    //       tagId: tagId,
-    //       state: "all",
-    //     };
-    //     break;
-    //   }
-    // }
-    return result;
   }
 
-  // position用来判断是否在墙的symbol上
   updateSelectInfos(nearest, minDistance) {
+    console.log("实时监控：" + JSON.stringify(nearest));
     // 墙角状态是否改变
     let flag1 = false;
     if (nearest.minPoint != null) {
@@ -485,17 +475,7 @@ export default class ListenLayer {
       };
     }
 
-    const flag5 = this.isChanged(
-      nearest.tagInfo.tagId,
-      nearest.tagInfo.state,
-      5
-    );
-    this.tagInfo = {
-      tagId: nearest.tagInfo.tagId,
-      state: nearest.tagInfo.state,
-    };
-
-    return flag1 || flag2 || flag5;
+    return flag1 || flag2;
   }
 
   // type是1表示点，2表示墙，3表示symbol，4表示component, 5表示tag，6表示furniture

src/graphic/Renderer/Draw.js

@@ -9,8 +9,6 @@ import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import Constant from "../Constant.js";
 
-
-
 export default class Draw {
   constructor() {
     this.context = null;
@@ -31,236 +29,257 @@ export default class Draw {
       this.context.canvas.width,
       this.context.canvas.height
     );
-
   }
 
-  drawBackGround(color) {
+  drawBackGroundImg(vector) {
     this.context.save();
-    this.context.fillStyle = color;
-    this.context.fillRect(
-      0,
-      0,
-      this.context.canvas.width,
-      this.context.canvas.height
-    );
+
     this.context.restore();
   }
 
   drawRoad(vector, isTemp) {
-    return;
-    const getCurves = (points, scale) => {
-      const curves = [];
-      for (let i = 1; i < points.length; i++) {
-        const prev1Index = i - 1
-        const prev2Index = i === 1 ? prev1Index : i - 2;
-        const nextIndex = i === points.length - 1 ? points.length - 1 : i + 1
-        const { x: nowX, y: nowY } = points[i];
-        const { x: last1X, y: last1Y } = points[prev1Index]
-        const { x: last2X, y: last2Y } = points[prev2Index]
-        const { x: nextX, y: nextY } = points[nextIndex]
-        const cAx = last1X + (nowX - last2X) * scale,
-          cAy = last1Y + (nowY - last2Y) * scale,
-          cBx = nowX - (nextX - last1X) * scale,
-          cBy = nowY - (nextY - last1Y) * scale
-
-        curves.push({
-          start: i === 1 ? {x: points[0].x, y: points[0].y} : { x: cAx, y: cAy },
-          control: { x: nowX, y: nowY },
-          end: { x: cBx, y: cBy },
-        })
+    this.context.save();
+    this.context.beginPath();
+    this.context.lineCap = "round"; //线段端点的样式
+    //this.context.lineJoin= 'miter';
+    this.context.strokeStyle = Style.Road.strokeStyle;
+
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
+
+    if (selectItem && selectItem.type == VectorType.Road) {
+      if (vector.vectorId == selectItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (draggingItem && draggingItem.type == VectorType.Road) {
+      if (vector.vectorId == draggingItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (focusItem && focusItem.type == VectorType.Road) {
+      if (vector.vectorId == focusItem.vectorId) {
+        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
       }
-      return curves
     }
-    const getPoints = () => {
-      const start = coordinate.getScreenXY(dataService.getPoint(vector.startId));
-      const end = coordinate.getScreenXY(dataService.getPoint(vector.endId));
-      return start && end
-        ? [
-            start,
-            {
-              x: start.x + 50,
-              y: start.y - 50,
-            },
-            {
-              x: start.x + 100,
-              y: start.y,
-            },
-            {
-              x: start.x - 150,
-              y: start.y + 200,
-            },
-            end
-          ]
-        : []
+
+    let point1, point2;
+    if (isTemp) {
+      this.context.globalAlpha = 0.3;
+      point1 = coordinate.getScreenXY(vector.start);
+      point2 = coordinate.getScreenXY(vector.end);
+      this.drawEdge(vector, isTemp);
+    } else {
+      let start = dataService.getPoint(vector.startId);
+      let end = dataService.getPoint(vector.endId);
+      point1 = coordinate.getScreenXY(start);
+      point2 = coordinate.getScreenXY(end);
+      this.drawEdge(vector, isTemp);
+      this.drawText(
+        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        vector.vectorId
+      );
+      //this.context.lineWidth = vector.width;
     }
+    this.context.beginPath();
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+    this.context.restore();
+  }
 
-    const draw = (points) => {
-      const radius = Style.Point.radius * coordinate.ratio;
-      for (const point of points) {
-        ctx.beginPath();
-        ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
-        ctx.fill()
-      }
+  drawCurveRoad(vector, isTemp) {
+    this.context.save();
+    this.context.beginPath();
+    this.context.lineCap = "round"; //线段端点的样式
+    //this.context.lineJoin= 'miter';
+    this.context.strokeStyle = Style.Road.strokeStyle;
 
-      // ctx.lineCap = "round"; //线段端点的样式
-      ctx.beginPath();
-      for (const curve of getCurves(points, 0.2)) {
-        ctx.bezierCurveTo(
-          curve.start.x,
-          curve.start.y,
-          curve.end.x,
-          curve.end.y,
-          curve.control.x,
-          curve.control.y,
-        )
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
+
+    if (selectItem && selectItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == selectItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (draggingItem && draggingItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == draggingItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (focusItem && focusItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == focusItem.vectorId) {
+        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
       }
-      ctx.stroke();
     }
 
-    const points = getPoints();
-    if (points.length < 2) {
-      return;
+    let point1, point2;
+    if (isTemp) {
+      this.context.globalAlpha = 0.3;
+      point1 = coordinate.getScreenXY(vector.start);
+      point2 = coordinate.getScreenXY(vector.end);
+      this.drawCurveEdge(vector, isTemp);
+    } else {
+      let start = dataService.getCurvePoint(vector.startId);
+      let end = dataService.getCurvePoint(vector.endId);
+      point1 = coordinate.getScreenXY(start);
+      point2 = coordinate.getScreenXY(end);
+      this.drawCurveEdge(vector, isTemp);
+      this.drawText(
+        { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
+        vector.vectorId
+      );
+      //this.context.lineWidth = vector.width;
     }
+    this.context.beginPath();
+    this.context.moveTo(point1.x, point1.y);
+    this.context.lineTo(point2.x, point2.y);
+    this.context.stroke();
+    this.context.restore();
 
-    const ctx = this.context;
-    const itemsEntry = [
-      [stateService.getSelectItem(), 'Select'],
-      [stateService.getDraggingItem(), 'Select'],
-      [stateService.getFocusItem(), 'Focus']
-    ]
-    const strokeStyle = itemsEntry.reduce((prev, [item, attr]) => {
-      if (item && item.type === VectorType.Road && vector.vectorId === item.vectorId) {
-        return Style[attr].Road.strokeStyle;
-      }
-    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)")
-
-    ctx.save();
-    const gradient = ctx.createLinearGradient(points[2].x, points[2].y, points[3].x, points[3].y);
-    gradient.addColorStop(0, "green");
-    gradient.addColorStop(0.5, "#000");
-    gradient.addColorStop(1, "green");
-
-    ctx.lineWidth = 40;
-    ctx.lineCap = 'butt'
-    ctx.strokeStyle = strokeStyle
-    ctx.strokeStyle = gradient
-    draw(getPoints())
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "rgba(0,0,0,1)"
-    draw(getPoints())
-    // ctx.translate(10, 10)
-    // draw(getPoints())
-
-    ctx.lineWidth = 1;
-    ctx.restore();
-    ctx.lineWidth = 1;
-    console.log(ctx)
+    for (let i = 0; i < vector.points.length; ++i) {
+      this.drawCurvePoint(vector.points[i]);
+    }
   }
 
-  drawCurveRoad(vector, isTemp) {
-    console.log(vector)
-    const getCurves = (points, scale) => {
-      const curves = [];
-      for (let i = 1; i < points.length; i++) {
-        const prev1Index = i - 1
-        const prev2Index = i === 1 ? prev1Index : i - 2;
-        const nextIndex = i === points.length - 1 ? points.length - 1 : i + 1
-        const { x: nowX, y: nowY } = points[i];
-        const { x: last1X, y: last1Y } = points[prev1Index]
-        const { x: last2X, y: last2Y } = points[prev2Index]
-        const { x: nextX, y: nextY } = points[nextIndex]
-        const cAx = last1X + (nowX - last2X) * scale,
-          cAy = last1Y + (nowY - last2Y) * scale,
-          cBx = nowX - (nextX - last1X) * scale,
-          cBy = nowY - (nextY - last1Y) * scale
-
-        curves.push({
-          start: i === 1 ? {x: points[0].x, y: points[0].y} : { x: cAx, y: cAy },
-          control: { x: nowX, y: nowY },
-          end: { x: cBx, y: cBy },
-        })
-      }
-      return curves
-    }
-    const getStyleLines = () => {
-      const styleLines = {
-        dotted: [
-          ...vector.leftLanes,
-          ...vector.rightLanes
-        ],
-        solid: [
-          vector.points,
-          dataService.getCurveEdge(vector.rightEdgeId).points,
-          dataService.getCurveEdge(vector.leftEdgeId).points
-        ]
-      }
-      return Object.entries(styleLines).reduce((t, [key, lines]) => {
-        t[key] = lines.map(
-          line => line.map(point => coordinate.getScreenXY(point))
-        )
-        return t;
-      }, {})
+  drawCurveEdge(vector, isTemp) {
+    //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
+    let start = dataService.getCurvePoint(vector.startId);
+    let end = dataService.getCurvePoint(vector.endId);
+
+    let leftEdge = dataService.getCurveEdge(vector.leftEdgeId);
+    let rightEdge = dataService.getCurveEdge(vector.rightEdgeId);
+    if (isTemp) {
+      start = vector.start;
+      end = vector.end;
+      leftEdge = vector.leftEdge;
+      rightEdge = vector.rightEdge;
     }
 
-    const draw = (points, drawPoints = false) => {
-      if (drawPoints) {
-        const radius = Style.Point.radius * coordinate.ratio;
-        for (const point of points) {
-          ctx.beginPath();
-          ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
-          ctx.fill()
-        }
-      }
+    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.lineCap = "round"; //线段端点的样式
+    this.context.strokeStyle = Style.Road.strokeStyle;
+
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
 
-      // ctx.lineCap = "round"; //线段端点的样式
-      ctx.beginPath();
-      for (const curve of getCurves(points, 0.2)) {
-        ctx.bezierCurveTo(
-          curve.start.x,
-          curve.start.y,
-          curve.end.x,
-          curve.end.y,
-          curve.control.x,
-          curve.control.y,
-        )
+    if (selectItem && selectItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == selectItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (draggingItem && draggingItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == draggingItem.vectorId) {
+        this.context.strokeStyle = Style.Select.Road.strokeStyle;
+      }
+    } else if (focusItem && focusItem.type == VectorType.CurveRoad) {
+      if (vector.vectorId == focusItem.vectorId) {
+        this.context.strokeStyle = Style.Focus.Road.strokeStyle;
       }
-      ctx.stroke();
     }
 
+    let point1, point2;
 
-    const ctx = this.context;
-    ctx.save();
+    this.context.globalAlpha = 0.3;
+    this.context.lineWidth = 1;
 
+    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();
+    }
 
-    const itemsEntry = [
-      [stateService.getSelectItem(), 'Select'],
-      [stateService.getDraggingItem(), 'Select'],
-      [stateService.getFocusItem(), 'Focus']
-    ]
-    const strokeStyle = itemsEntry.reduce((prev, [item, attr]) => {
-      if (item && item.type === VectorType.Road && vector.vectorId === item.vectorId) {
-        return Style[attr].Road.strokeStyle;
-      }
-    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)")
+    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();
+    }
 
-    ctx.lineWidth = 2;
-    ctx.lineCap = 'butt'
-    ctx.strokeStyle = strokeStyle
+    this.context.restore();
 
-    const styleLines = getStyleLines();
-    for (const style in styleLines) {
-      const isSolid = style === 'solid';
-      ctx.setLineDash(isSolid ? [] : [15, 15]);
+    this.drawText(
+      {
+        x: (leftEdge.start.x + leftEdge.end.x) / 2,
+        y: (leftEdge.start.y + leftEdge.end.y) / 2,
+      },
+      vector.leftEdgeId
+    );
 
-      const lines = styleLines[style]
-      for (const points of lines) {
-        if (points.length < 2) {
-          break;
-        }
-        draw(points, isSolid)
-      }
+    this.drawText(
+      {
+        x: (rightEdge.start.x + rightEdge.end.x) / 2,
+        y: (rightEdge.start.y + rightEdge.end.y) / 2,
+      },
+      vector.rightEdgeId
+    );
+  }
+
+  drawCurvePoint(vector) {
+    const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
+    const selectItem = stateService.getSelectItem();
+    const draggingItem = stateService.getDraggingItem();
+    const focusItem = stateService.getFocusItem();
+
+    let radius = Style.Point.radius;
+    if (
+      (draggingItem &&
+        draggingItem.type == VectorType.CurveRoadCorner &&
+        vector.vectorId == draggingItem.vectorId) ||
+      (selectItem &&
+        selectItem.type == VectorType.CurveRoadCorner &&
+        vector.vectorId == selectItem.vectorId)
+    ) {
+      this.context.save();
+      this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio;
+      this.context.strokeStyle = Style.Select.Point.strokeStyle;
+      this.context.fillStyle = Style.Select.Point.fillStyle;
+      radius = Style.Select.Point.radius;
+    } else if (
+      focusItem &&
+      focusItem.type == VectorType.CurveRoadCorner &&
+      vector.vectorId == focusItem.vectorId
+    ) {
+      this.context.save();
+      this.context.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio;
+      this.context.strokeStyle = Style.Focus.Point.strokeStyle;
+      this.context.fillStyle = Style.Focus.Point.fillStyle;
+      radius = Style.Focus.Point.radius;
     }
-    ctx.restore();
+    // else {
+    //   return;
+    // }
+
+    this.context.beginPath();
+    this.context.arc(
+      pt.x,
+      pt.y,
+      radius * coordinate.ratio,
+      0,
+      Math.PI * 2,
+      true
+    );
+    this.context.stroke();
+    this.context.fill();
+    this.context.restore();
+
+    this.drawText(vector, vector.vectorId);
   }
 
   drawEdge(vector, isTemp) {

src/graphic/Renderer/Render.js

@@ -16,7 +16,7 @@ export default class Render {
     if (draw.context == null) {
       return;
     }
-    console.log(vector)
+    //console.log(vector)
     switch (vector.geoType) {
       case VectorType.Road:
         draw.drawRoad(vector, false);
@@ -36,6 +36,8 @@ export default class Render {
       case VectorType.MeasureLine:
         draw.drawMeasures(vector, styleType);
         return;
+      case VectorType.BackgroundImg:
+        draw.drawBackGroundImg();
     }
   }
 
@@ -96,6 +98,8 @@ export default class Render {
   autoRedraw() {
     draw.clear();
 
+    this.drawGeometry(dataService.getBackgroundImg());
+
     let roads = dataService.getRoads();
     for (let key in roads) {
       this.drawGeometry(roads[key]);

src/graphic/Service/DataService.js

@@ -21,6 +21,7 @@ export class DataService {
   }
 
   initVectorData() {
+    this.vectorData.backgroundImg = null;
     this.vectorData.points = {};
     this.vectorData.roads = {};
     this.vectorData.edges = {};
@@ -249,6 +250,18 @@ export class DataService {
     this.vectorData.edges[edge.vectorId] = edge;
   }
 
+  addBackgroundImg(img) {
+    this.vectorData.backgroundImg = img;
+  }
+
+  getBackgroundImg() {
+    return this.vectorData.backgroundImg;
+  }
+
+  setAngle(angle) {
+    this.vectorData.backgroundImg.angle = angle;
+  }
+
   /**
    * 对标注的操作
    */

src/graphic/Service/ImageService.js

@@ -0,0 +1,16 @@
+import Img from "../Geometry/Img.js";
+import { dataService } from "./DataService.js";
+import { mathUtil } from "../Util/MathUtil";
+
+export default class ImageService {
+  constructor() {}
+
+  create(position, vectorId) {
+    let point = new Img(position, vectorId);
+    dataService.addPoint(point);
+    return point;
+  }
+}
+
+const imageService = new ImageService();
+export { imageService };

src/graphic/Service/RoadService.js

@@ -525,6 +525,9 @@ export default class RoadService {
     // 不能重合
     let point1 = dataService.getPoint(pointId1);
     let point2 = dataService.getPoint(pointId2);
+    if (!point2) {
+      return false;
+    }
     const dx = point1.x - point2.x;
     const dy = point1.y - point2.y;
     let parent1 = point1.getParent();

src/graphic/enum/VectorType.js

@@ -14,5 +14,6 @@ const VectorType = {
   CurveRoad: "CurveRoad",
   CurveEdge: "CurveEdge",
   Tag: "Tag",
+  BackgroundImg: "BackgroundImg",
 };
 export default VectorType;