继续扫尾旧的绘图架构

src/graphic/Renderer/Draw.js

@@ -235,41 +235,130 @@ export default class Draw {
   }
 
   drawControlPoint(vector) {
-    const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
+    // const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
+    // const color = this.rgb();
+    // this.context.strokeStyle = color;
+    // this.context.fillStyle = color;
+    // let radius = Style.Point.radius;
+    // this.context.beginPath();
+    // this.context.arc(
+    //   pt.x,
+    //   pt.y,
+    //   radius * coordinate.ratio,
+    //   0,
+    //   Math.PI * 2,
+    //   true
+    // );
+    // this.context.stroke();
+    // this.context.fill();
+    // let start = dataService
+    //   .getEdge(vector.edgeInfo1.id)
+    //   .getPosition(vector.edgeInfo1.dir);
+    // start = coordinate.getScreenXY(start);
+    // let end = dataService
+    //   .getEdge(vector.edgeInfo2.id)
+    //   .getPosition(vector.edgeInfo2.dir);
+    // end = coordinate.getScreenXY(end);
+    // this.context.beginPath();
+    // this.context.moveTo(start.x, start.y);
+    // this.context.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
+    // this.context.stroke();
+    // this.context.restore();
+    // this.drawText(vector, vector.vectorId);
+    // const pt2 = this.twoOrderBezier(0.5, start, pt, end);
+    // this.context.save();
+    // this.context.strokeStyle = color;
+    // this.context.fillStyle = color;
+    // this.context.beginPath();
+    // this.context.arc(
+    //   pt2.x,
+    //   pt2.y,
+    //   radius * coordinate.ratio * 3,
+    //   0,
+    //   Math.PI * 2,
+    //   true
+    // );
+    // this.context.stroke();
+    // this.context.fill();
+    // this.context.restore();
+
+    let pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const color = this.rgb();
     this.context.strokeStyle = color;
     this.context.fillStyle = color;
-
     let radius = Style.Point.radius;
-    this.context.beginPath();
-    this.context.arc(
-      pt.x,
-      pt.y,
-      radius * coordinate.ratio,
-      0,
-      Math.PI * 2,
-      true
-    );
-    this.context.stroke();
-    this.context.fill();
 
     let start = dataService
       .getEdge(vector.edgeInfo1.id)
       .getPosition(vector.edgeInfo1.dir);
     start = coordinate.getScreenXY(start);
-
     let end = dataService
       .getEdge(vector.edgeInfo2.id)
       .getPosition(vector.edgeInfo2.dir);
     end = coordinate.getScreenXY(end);
 
-    this.context.beginPath();
+    const pt2 = this.twoOrderBezier(0.5, start, pt, end);
+    pt = this.twoOrderBezier2(0.5, start, pt2, end);
+
+    this.context.save();
+    //曲线
     this.context.moveTo(start.x, start.y);
     this.context.quadraticCurveTo(pt.x, pt.y, end.x, end.y);
     this.context.stroke();
+    this.context.restore();
+
+    this.context.save();
+    this.context.beginPath();
+    this.context.arc(
+      pt.x,
+      pt.y,
+      radius * coordinate.ratio * 3,
+      0,
+      Math.PI * 2,
+      true
+    );
+    this.context.stroke();
+    this.context.fill();
 
     this.context.restore();
-    this.drawText(vector, vector.vectorId);
+  }
+
+  twoOrderBezier(t, p1, cp, p2) {
+    //参数分别是t,起始点,控制点和终点
+    var x1 = p1.x;
+    var y1 = p1.y;
+
+    var cx = cp.x;
+    var cy = cp.y;
+
+    var x2 = p2.x;
+    var y2 = p2.y;
+    // var [x1, y1] = p1,
+    //   [cx, cy] = cp,
+    //   [x2, y2] = p2;
+    var x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2,
+      y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
+    return {
+      x: x,
+      y: y,
+    };
+  }
+
+  //t是0.5，求cp。p是通过twoOrderBezier算出来的
+  twoOrderBezier2(t, p1, p, p2) {
+    //参数分别是t,起始点,控制点和终点
+    var x1 = p1.x;
+    var y1 = p1.y;
+
+    var x2 = p2.x;
+    var y2 = p2.y;
+
+    let cx = (p.x - t * t * x2 - (1 - t) * (1 - t) * x1) / (2 * t * (1 - t));
+    let cy = (p.y - t * t * y2 - (1 - t) * (1 - t) * y1) / (2 * t * (1 - t));
+    return {
+      x: cx,
+      y: cy,
+    };
   }
 
   // 文字