合并

src/graphic/Renderer/Draw.txt

@@ -9,6 +9,8 @@ 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;
@@ -29,6 +31,7 @@ export default class Draw {
       this.context.canvas.width,
       this.context.canvas.height
     );
+
   }
 
   drawBackGround(color) {
@@ -44,107 +47,113 @@ 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;
+    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
     }
-
-    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;
+    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
+          ]
+        : []
     }
-    this.context.beginPath();
-    this.context.moveTo(point1.x, point1.y);
-    this.context.lineTo(point2.x, point2.y);
-    this.context.stroke();
-    this.context.restore();
-  }
 
-  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();
-
-    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;
+    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()
       }
-    } else if (focusItem && focusItem.type == VectorType.Road) {
-      if (vector.vectorId == focusItem.vectorId) {
-        this.context.strokeStyle = Style.Focus.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,
+        )
       }
+      ctx.stroke();
     }
 
-    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;
+    const points = getPoints();
+    if (points.length < 2) {
+      return;
     }
-    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.drawPoint(vector.points[i]);
-    }
+    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)
   }
 
   drawEdge(vector, isTemp) {
@@ -690,7 +699,6 @@ export default class Draw {
         }
       }
     }
-
     this.context.restore();
   }