继续绘图搭建

src/graphic/Geometry/Road.js

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

src/graphic/Renderer/Draw.js

@@ -44,6 +44,53 @@ export default class Draw {
   }
 
   drawRoad(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();
+
+    // 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;
+    //   }
+    // }
+
+    // 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.beginPath();
+    // this.context.moveTo(point1.x, point1.y);
+    // this.context.lineTo(point2.x, point2.y);
+    // this.context.stroke();
+    // this.context.restore();
+
     this.context.save();
     this.context.beginPath();
     this.context.lineCap = "round"; //线段端点的样式
@@ -69,28 +116,156 @@ export default class Draw {
     }
 
     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
+    let start = dataService.getPoint(vector.startId);
+    let end = dataService.getPoint(vector.endId);
+    point1 = coordinate.getScreenXY(start);
+    point2 = coordinate.getScreenXY(end);
+
+    let points = [];
+    points.push(point1);
+    points.push({
+      x: point1.x + 50,
+      y: point1.y - 50,
+    });
+    points.push({
+      x: point1.x + 100,
+      y: point1.y,
+    });
+    points.push({
+      x: point2.x - 150,
+      y: point1.y + 200,
+    });
+    points.push(point2);
+    const radius = Style.Point.radius;
+    for (let i = 0; i < points.length; ++i) {
+      this.context.save();
+      this.context.strokeStyle = "green";
+      this.context.fillStyle = "green";
+      this.context.beginPath();
+      this.context.arc(
+        points[i].x,
+        points[i].y,
+        radius * coordinate.ratio,
+        0,
+        Math.PI * 2,
+        true
       );
-      //this.context.lineWidth = vector.width;
+      this.context.stroke();
+      this.context.fill();
+      this.context.restore();
+      if (i != points.length - 1) {
+        this.context.save();
+        this.context.strokeStyle = "red";
+        this.context.moveTo(points[i].x, points[i].y);
+        const mid = {
+          x: (points[i].x + points[i + 1].x) / 2,
+          y: (points[i].y + points[i + 1].y) / 2,
+        };
+        const line = mathUtil.createLine1(points[i], points[i + 1]);
+        const lines = mathUtil.getParallelLineForDistance(
+          line,
+          mathUtil.getDistance(points[i], points[i + 1]) / 5
+        );
+        const p1 = mathUtil.getJoinLinePoint(mid, lines.line1);
+        const p2 = mathUtil.getJoinLinePoint(mid, lines.line2);
+        const _points = [];
+        _points.push(points[i]);
+        _points.push(points[i + 1]);
+        if (i != points.length - 2) {
+          _points.push(points[i + 2]);
+        } else {
+          _points.push(points[i - 1]);
+        }
+        let cpt = null;
+        if (mathUtil.isPointInPoly(p1, _points)) {
+          cpt = p2;
+        } else {
+          cpt = p1;
+        }
+
+        this.context.quadraticCurveTo(
+          cpt.x,
+          cpt.y,
+          points[i + 1].x,
+          points[i + 1].y
+        );
+        this.context.stroke();
+        this.context.restore();
+      }
     }
-    this.context.beginPath();
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
-    this.context.stroke();
-    this.context.restore();
+    // const t =
+    //   mathUtil.getDistance(point1, pt2) /
+    //   (mathUtil.getDistance(point1, pt2) + mathUtil.getDistance(point2, pt2));
+    //const t = 0.3;
+    //const pt = this.twoOrderBezier2(t, point1, pt2, point2);
+    // let pt1 = {
+    //   x: (point1.x + pt.x) / 2,
+    //   y: point1.y - 30,
+    // };
+    // let cpt1 = this.twoOrderBezier2(0.2, point1, pt1, pt);
+
+    // let pt2 = {
+    //   x: (point2.x + pt.x) / 2,
+    //   y: point2.y + 30,
+    // };
+    // let cpt2 = this.twoOrderBezier2(0.2, pt, pt2, point2);
+
+    // this.context.moveTo(point1.x, point1.y);
+    // this.context.quadraticCurveTo(cpt1.x, cpt1.y, pt.x, pt.y);
+    // this.context.stroke();
+    // this.context.restore();
+
+    // this.context.save();
+    // this.context.beginPath();
+    // this.context.moveTo(pt.x, pt.y);
+    // this.context.quadraticCurveTo(cpt2.x, cpt2.y, point2.x, point2.y);
+    // this.context.stroke();
+    // this.context.restore();
+
+    // let radius = Style.Point.radius;
+    // this.context.save();
+    // this.context.strokeStyle = "green";
+    // this.context.fillStyle = "green";
+    // 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.context.save();
+    // this.context.strokeStyle = "red";
+    // this.context.fillStyle = "red";
+    // this.context.beginPath();
+    // this.context.arc(
+    //   pt1.x,
+    //   pt1.y,
+    //   radius * coordinate.ratio,
+    //   0,
+    //   Math.PI * 2,
+    //   true
+    // );
+    // this.context.stroke();
+    // this.context.fill();
+
+    // this.context.beginPath();
+    // this.context.arc(
+    //   pt2.x,
+    //   pt2.y,
+    //   radius * coordinate.ratio,
+    //   0,
+    //   Math.PI * 2,
+    //   true
+    // );
+    // this.context.stroke();
+    // this.context.fill();
+    // this.context.restore();
   }
 
   drawEdge(vector, isTemp) {
@@ -344,9 +519,8 @@ export default class Draw {
     };
   }
 
-  //t是0.5，求cp。p是通过twoOrderBezier算出来的
+  //t是0.5，求cp。p是曲线上的点
   twoOrderBezier2(t, p1, p, p2) {
-    //参数分别是t,起始点,控制点和终点
     var x1 = p1.x;
     var y1 = p1.y;