继续绘图

src/graphic/ListenLayer.js

@@ -95,7 +95,7 @@ export default class ListenLayer {
     let modifyPoint = info1.modifyPoint;
     let _modifyPoint = info1._modifyPoint;
 
-    if (min1 == null) {
+    if (min1 == null && info2.min1 != null) {
       min1 = info2.min1;
       modifyPoint = info2.modifyPoint;
       _modifyPoint = info2._modifyPoint;
@@ -108,7 +108,7 @@ export default class ListenLayer {
     }
 
     let min2 = info1.min2;
-    if (min2 == null) {
+    if (min2 == null && info2.min2 != null) {
       min2 = info2.min2;
       modifyPoint = info2.modifyPoint;
       _modifyPoint = info2._modifyPoint;
@@ -170,13 +170,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("getNearForRoad************************************");
-      }
+      //垂直交点
       const join = mathUtil.getJoinLinePoint(position, line);
 
       //先找端点
@@ -191,7 +185,7 @@ export default class ListenLayer {
             type: VectorType.RoadCorner,
           };
 
-          //start部分找到了墙的端点
+          //在公路内了
           if (
             (mathUtil.getDistance(join, position) < road.width / 2 &&
               mathUtil.getDistance(join, startPoint) < road.width / 2) ||
@@ -332,6 +326,7 @@ export default class ListenLayer {
     };
   }
 
+  //暂时只考虑端点
   getNearForCurveRoad(position, exceptPointId, exceptRoadIds) {
     let min1 = null; // 与墙角的距离
     let min2 = null; // 与墙面的距离
@@ -358,21 +353,19 @@ export default class ListenLayer {
           hasPointIds.push(curveRoad.points[i].vectorId);
           distance = mathUtil.getDistance(position, curveRoad.points[i]);
 
-          if (min1 == null || min1.distance > distance) {
+          if (distance < Constant.minAdsorbPix) {
             min1 = {
               distance: distance,
               pointId: curveRoad.points[i].vectorId,
               type: VectorType.CurveRoadCorner,
             };
 
-            if (min1.distance < Constant.minAdsorbPix) {
-              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;
-            }
+            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接近的其他点
@@ -428,6 +421,7 @@ export default class ListenLayer {
 
   // position用来判断是否在墙的symbol上
   updateSelectInfos(nearest, minDistance) {
+    console.log("实时监控：" + JSON.stringify(nearest));
     // 墙角状态是否改变
     let flag1 = false;
     if (nearest.minPoint != null) {

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,7 +29,6 @@ export default class Draw {
       this.context.canvas.width,
       this.context.canvas.height
     );
-
   }
 
   drawBackGround(color) {
@@ -47,113 +44,248 @@ export default class Draw {
   }
 
   drawRoad(vector, isTemp) {
-    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;
+
+    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();
     }
 
-    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();
+
+    for (let i = 0; i < vector.points.length; ++i) {
+      this.drawCurvePoint(vector.points[i]);
     }
+  }
+
+  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 leftFlag = mathUtil.isSameDirForVector(
+      start,
+      end,
+      leftEdge.start,
+      leftEdge.end
+    );
+    const rightFlag = mathUtil.isSameDirForVector(
+      start,
+      end,
+      rightEdge.start,
+      rightEdge.end
+    );
 
-    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;
+    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();
+
+    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;
       }
-    }, 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)
+    }
+
+    let point1, point2;
+
+    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();
+    }
+
+    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();
+
+    this.drawText(
+      {
+        x: (leftEdge.start.x + leftEdge.end.x) / 2,
+        y: (leftEdge.start.y + leftEdge.end.y) / 2,
+      },
+      vector.leftEdgeId
+    );
+
+    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;
+    }
+    // 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);