添加了曲线检测，测试

src/graphic/Layer.js

@@ -132,6 +132,7 @@ export default class Layer {
       case null:
         //监控
         needAutoRedraw = listenLayer.start(position);
+        needAutoRedraw = true;
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();

src/graphic/ListenLayer.js

@@ -6,6 +6,9 @@ import Constant from "./Constant.js";
 import VectorType from "./enum/VectorType.js";
 import SelectState from "./enum/SelectState.js";
 import bezierUtil from "./Util/bezierUtil.js";
+import { elementService } from "./Service/ElementService";
+import { coordinate } from "./Coordinate";
+import { draw } from "./Renderer/Draw.js";
 
 export default class ListenLayer {
   constructor() {
@@ -27,6 +30,10 @@ export default class ListenLayer {
     };
 
     this.modifyPoint = null;
+
+    this.testStart = null;
+    this.testEnd = null;
+    this.testHit = false;
   }
 
   //开始监听，exceptPointId表示不考虑的点，exceptRoadIds表示不考虑的墙
@@ -93,7 +100,7 @@ export default class ListenLayer {
       exceptCurveRoadId
     );
 
-    this.getNearForControlPoint();
+    this.getNearForControlPoint(position);
     let min1 = info1.min1;
     let modifyPoint = info1.modifyPoint;
     let _modifyPoint = info1._modifyPoint;
@@ -422,21 +429,30 @@ export default class ListenLayer {
     };
   }
 
-  getNearForControlPoint() {
+  getNearForControlPoint(position) {
     const controlPoints = dataService.getControlPoints();
-    for (const controlPoint in controlPoints) {
+    for (const key in controlPoints) {
+      let controlPoint = controlPoints[key];
       let bezierData = [];
       let edge1 = dataService.getEdge(controlPoint.edgeInfo1.id);
       let start = edge1.getPosition(controlPoint.edgeInfo1.dir);
       let edge2 = dataService.getEdge(controlPoint.edgeInfo2.id);
       let end = edge2.getPosition(controlPoint.edgeInfo2.dir);
+
+      start = coordinate.getScreenXY(start);
+      let cp = coordinate.getScreenXY({
+        x: controlPoint.x,
+        y: controlPoint.y,
+      });
+      end = coordinate.getScreenXY(end);
+
       bezierData.push(start.x);
       bezierData.push(start.y);
-      bezierData.push(controlPoint.x);
-      bezierData.push(controlPoint.y);
+      bezierData.push(cp.x);
+      bezierData.push(cp.y);
       bezierData.push(end.x, end.y);
       bezierData.push(end.x, end.y);
-      this.isHitForBezier(bezierData);
+      this.isHitForBezier(bezierData, coordinate.getScreenXY(position));
     }
   }
 
@@ -720,8 +736,15 @@ export default class ListenLayer {
 
   isHitForBezier(bezierData, position) {
     const { isHit, getInfo } = bezierUtil.measureBezier(...bezierData);
-    let flag = isHit(position.x, position.y, 20);
-    console.log("test");
+    let flag = isHit(position.x, position.y, Constant.minAdsorbPix);
+    const { point } = getInfo(position);
+
+    this.testStart = position;
+    this.testEnd = {
+      x: point[0],
+      y: point[1],
+    };
+    this.testHit = flag;
   }
 
   clear() {

src/graphic/Renderer/Draw.js

@@ -90,23 +90,20 @@ export default class Draw {
   drawCurveRoad(vector, isTemp) {
     const getStyleLines = () => {
       const styleLines = {
-        dotted: [
-          ...vector.leftLanes,
-          ...vector.rightLanes
-        ],
+        dotted: [...vector.leftLanes, ...vector.rightLanes],
         solid: [
           vector.points,
           dataService.getCurveEdge(vector.rightEdgeId).points,
-          dataService.getCurveEdge(vector.leftEdgeId).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))
-        )
+        t[key] = lines.map((line) =>
+          line.map((point) => coordinate.getScreenXY(point))
+        );
         return t;
-      }, {})
-    }
+      }, {});
+    };
 
     const draw = (points, drawPoints = false) => {
       if (drawPoints) {
@@ -114,7 +111,7 @@ export default class Draw {
         for (const point of points) {
           ctx.beginPath();
           ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
-          ctx.fill()
+          ctx.fill();
         }
       }
 
@@ -127,42 +124,45 @@ export default class Draw {
           curve.end.x,
           curve.end.y,
           curve.control.x,
-          curve.control.y,
-        )
+          curve.control.y
+        );
       }
       ctx.stroke();
-    }
-
+    };
 
     const ctx = this.context;
     ctx.save();
 
     const itemsEntry = [
-      [stateService.getSelectItem(), 'Select'],
-      [stateService.getDraggingItem(), 'Select'],
-      [stateService.getFocusItem(), 'Focus']
-    ]
+      [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) {
+      if (
+        item &&
+        item.type === VectorType.Road &&
+        vector.vectorId === item.vectorId
+      ) {
         return Style[attr].Road.strokeStyle;
       }
-    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)")
+    }, Style.Road.strokeStyle || "rgba(0,0,0,0.1)");
 
     ctx.lineWidth = 2;
-    ctx.lineCap = 'butt'
-    ctx.strokeStyle = strokeStyle
+    ctx.lineCap = "butt";
+    ctx.strokeStyle = strokeStyle;
 
     const styleLines = getStyleLines();
     for (const style in styleLines) {
-      const isSolid = style === 'solid';
+      const isSolid = style === "solid";
       ctx.setLineDash(isSolid ? [] : [15, 15]);
 
-      const lines = styleLines[style]
+      const lines = styleLines[style];
       for (const points of lines) {
         if (points.length < 2) {
           break;
         }
-        draw(points, true)
+        draw(points, true);
       }
     }
     ctx.restore();
@@ -963,6 +963,27 @@ export default class Draw {
     // this.context.restore();
   }
 
+  drawTestLine(start, end, hit) {
+    this.context.save();
+
+    this.context.strokeStyle = "blue";
+    this.context.beginPath();
+    this.context.moveTo(start.x, start.y);
+    this.context.lineTo(end.x, end.y);
+    this.context.stroke();
+
+    this.context.beginPath();
+    this.context.arc(start.x, start.y, Constant.minAdsorbPix, 0, 2 * Math.PI);
+    if (!hit) {
+      this.context.fillStyle = "black";
+    } else {
+      this.context.fillStyle = "red";
+    }
+    this.context.fill();
+
+    this.context.restore();
+  }
+
   //由多个点构成，里面的坐标都已经是屏幕坐标
   drawMeasure(points, dir, styleType) {
     this.context.save();

src/graphic/Renderer/Render.js

@@ -4,6 +4,7 @@ import { elementService } from "../Service/ElementService.js";
 import { measureService } from "../Service/MeasureService";
 import { coordinate } from "../Coordinate.js";
 import { draw } from "./Draw.js";
+import { listenLayer } from "../ListenLayer.js";
 
 export default class Render {
   constructor(layer) {
@@ -127,6 +128,14 @@ export default class Render {
 
     //this.drawGeometry(dataService.getImg());
     this.redrawElements();
+
+    if (listenLayer.testStart != null && listenLayer.testEnd != null) {
+      draw.drawTestLine(
+        listenLayer.testStart,
+        listenLayer.testEnd,
+        listenLayer.testHit
+      );
+    }
   }
 
   //下载图片