添加道路类型

src/graphic/Renderer/Draw.js

@@ -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,228 +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;
-    //   }
-    // }
-
-    // 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"; //线段端点的样式
-    //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
+    }
+    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;
-    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.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;
-        }
+    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()
+      }
 
-        this.context.quadraticCurveTo(
-          cpt.x,
-          cpt.y,
-          points[i + 1].x,
-          points[i + 1].y
-        );
-        this.context.stroke();
-        this.context.restore();
+      // 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();
     }
-    // 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();
+    const points = getPoints();
+    if (points.length < 2) {
+      return;
+    }
 
-    // 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();
+    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) {
@@ -811,7 +699,6 @@ export default class Draw {
         }
       }
     }
-
     this.context.restore();
   }
 

src/graphic/Renderer/Render.js

@@ -16,6 +16,7 @@ export default class Render {
     if (draw.context == null) {
       return;
     }
+    console.log(vector)
     switch (vector.geoType) {
       case VectorType.Road:
         draw.drawRoad(vector, false);

src/views/drawGraphic/index.vue

@@ -10,7 +10,7 @@
         {{ menu.text }}
       </div>
     </div>
-    <div class="canvas-layout">
+    <div class="canvas-layout">+
       <canvas ref="drawCanvasRef" class="draw-canvas" />
     </div>
   </div>
@@ -27,7 +27,8 @@ const setCanvasSize = () => {
 };
 
 const menus = ref([
-  { key: "road", text: "道路" },
+  { key: "road", text: "直路" },
+  { key: "curveRoad", text: "弯路" },
   { key: "tag", text: "标注" },
   { key: "measure", text: "测量线" },
   { key: "backgroundImage", text: "背景图片" },