添加样式及分发曲线绘画

src/graphic/Renderer/Draw.js

@@ -2,13 +2,14 @@ import { dataService } from "../Service/DataService.js";
 import { stateService } from "../Service/StateService.js";
 import { measureService } from "../Service/MeasureService";
 import { coordinate } from "../Coordinate.js";
-import Style from "../Style.js";
+import Style from "../style";
 import VectorType from "../enum/VectorType.js";
 import SelectState from "../enum/SelectState.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import ElementEvents from "../enum/ElementEvents.js";
 import Constant from "../Constant.js";
 
+
 const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
     const geoId = vector?.vectorId
@@ -39,6 +40,41 @@ const help = {
     for (const style in styles) {
       ctx[style] = styles[style];
     }
+  },
+  getLinesCoves(lines) {
+    return lines
+      .map(line => line.map(line => ({
+        start: coordinate.getScreenXY(line.start),
+        end: coordinate.getScreenXY(line.end),
+        controls: line.controls.map(coordinate.getScreenXY.bind(coordinate))
+      })))
+  },
+  drawCoves(ctx, coves) {
+    for (const curve of coves) {
+      ctx.beginPath();
+      ctx.moveTo(
+        curve.start.x,
+        curve.start.y
+      )
+      if (curve.controls.length === 1) {
+        ctx.quadraticCurveTo(
+          curve.controls[0].x,
+          curve.controls[0].y,
+          curve.end.x,
+          curve.end.y,
+        );
+      } else {
+        ctx.bezierCurveTo(
+          curve.controls[0].x,
+          curve.controls[0].y,
+          curve.controls[1].x,
+          curve.controls[1].y,
+          curve.end.x,
+          curve.end.y,
+        )
+      }
+      ctx.stroke();
+    }
   }
 }
 
@@ -70,8 +106,6 @@ export default class Draw {
     this.context.restore();
   }
 
-
-
   drawRoad(vector, isTemp) {
     const startReal = isTemp ? vector.start : dataService.getPoint(vector.startId)
     const endReal = isTemp ? vector.end : dataService.getPoint(vector.endId)
@@ -99,212 +133,45 @@ export default class Draw {
   }
 
   drawCurveRoad(vector, isTemp) {
-    const getLinesCoves = (lines) => lines
-        .map(line => line.map(coordinate.getScreenXY.bind(coordinate)))
-        .map(line => mathUtil.getCurvesByPoints(line))
-
-    const linesArrayMap = {
-      dotted: [
-        ...vector.leftLanes,
-        ...vector.rightLanes,
-      ],
-      solid: [
-        dataService.getCurveEdge(vector.rightEdgeId).points,
-        dataService.getCurveEdge(vector.leftEdgeId).points,
-        vector.points
-      ]
-    }
-
-    const covesArrayMap = {
-      dotted: getLinesCoves(linesArrayMap.dotted),
-      solid: getLinesCoves(linesArrayMap.solid)
-    };
-
+    const [coves] = help.getLinesCoves([vector.curves])
+    console.log(coves)
     const ctx = this.context;
     ctx.save();
 
     help.setVectorStyle(ctx, vector)
-    for (const style in covesArrayMap) {
-      const isSolid = style === "solid";
-      ctx.setLineDash(isSolid ? [] : [15, 15]);
-
-      const covesArray = covesArrayMap[style];
-      for (const coves of covesArray) {
-        for (const curve of coves) {
-          ctx.beginPath();
-          ctx.moveTo(
-            curve.start.x,
-            curve.start.y
-          )
-          if (curve.controls.length === 1) {
-            ctx.quadraticCurveTo(
-              curve.controls[0].x,
-              curve.controls[0].y,
-              curve.end.x,
-              curve.end.y,
-            );
-          } else {
-            ctx.bezierCurveTo(
-              curve.controls[0].x,
-              curve.controls[0].y,
-              curve.controls[1].x,
-              curve.controls[1].y,
-              curve.end.x,
-              curve.end.y,
-            )
-          }
-          ctx.stroke();
-        }
-      }
-    }
+    help.drawCoves(ctx, coves)
     ctx.restore();
 
-    Object.values(linesArrayMap).forEach(
-      linesArray => linesArray.forEach(
-        lines => lines.forEach(this.drawPoint.bind(this))
-      )
-    );
+    console.log(dataService.getCurveEdge(vector.rightEdgeId))
+    // this.drawCurveEdge(dataService.getCurveEdge(vector.rightEdgeId))
+    // this.drawCurveEdge(dataService.getCurveEdge(vector.leftEdgeId))
+    // vector.leftLanes.forEach(this.drawCurveLan.bind(this))
+    // vector.rightLanes.forEach(this.drawCurveLan.bind(this))
+
+    vector.points.forEach(this.drawPoint.bind(this))
   }
 
   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
-    );
-
-    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;
-      }
-    }
-
-    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();
-    }
+    console.log(vector.curves)
+    const [coves] = help.getLinesCoves([vector.curves])
 
+    const ctx = this.context;
+    ctx.save();
+    help.setVectorStyle(ctx, vector)
+    help.drawCoves(ctx, coves);
     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
-    );
+    vector.points.forEach(this.drawPoint.bind(this))
   }
 
-  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.CurvePoint &&
-        vector.vectorId == draggingItem.vectorId) ||
-      (selectItem &&
-        selectItem.type == VectorType.CurvePoint &&
-        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.CurvePoint &&
-      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();
+  drawCurveLan(lines) {
+    const [coves] = help.getLinesCoves([lines])
+    const ctx = this.context;
+    ctx.save();
+    help.setVectorStyle(ctx, null, "CurveLan")
+    ctx.setLineDash(Style.Lane.dash);
+    help.drawCoves(ctx, coves);
     this.context.restore();
-
-    this.drawText(vector, vector.vectorId);
   }
 
   drawEdge(vector, isTemp) {

src/graphic/Style/default.js

@@ -0,0 +1,119 @@
+const Road = {
+  strokeStyle: "rgba(255,0,0,0.5)",
+  lineWidth: 4,
+  error: {
+    strokeStyle: "rgba(255,0,0,0.5)",
+    fillStyle: "rgba(255,0,0,0.8)",
+  },
+}
+
+const Edge = {
+  ...Road,
+  lineWidth: 1,
+  // globalAlpha: 0.3
+}
+
+const Lane = {
+  ...Edge,
+  dash: [15, 15]
+}
+
+const CurveRoad = { ...Road }
+
+const CurveEdge = {
+  ...CurveRoad,
+  ...Edge
+}
+
+const CurveLan = {
+  ...Lane,
+  ...CurveEdge
+}
+
+
+const Tag = {
+  strokeStyle: "rgb(255,255,255,1)",
+  fillStyle: "rgb(255,255,255,1)",
+  strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
+  fillStyle_adding: "rgba(243, 255, 0, 0.8)",
+  lineWidth: 1,
+}
+
+const CanvasFont = {
+  font: "14px Microsoft YaHei",
+  fillStyle: "#000000",
+  strokeStyle: "#000000",
+  textAlign: "center",
+  textBaseline: "middle",
+  miterLimit: 10,
+  direction: "ltr",
+}
+
+const Point = {
+  strokeStyle: "green",
+  fillStyle: "rgb(0, 200, 175)",
+  radius: 4,
+}
+
+const CurvePoint = {
+  ...Point
+}
+
+const Text = {
+  ...Tag,
+  ...CanvasFont,
+  font: "12px Microsoft YaHei"
+}
+
+const Measure = {
+  txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
+    strokeStyle: "rgba(255,255,255,1)",
+    lineWidth: 1,
+}
+
+const Element = {
+  AddingPoint: {
+    radius: 4,
+      fillStyle: "yellow",
+      strokeStyle: "green",
+  },
+  NewRoad: {
+    lineWidth: 4,
+      strokeStyle: "rgba(100,100,100,0.3)",
+      errorStrokeStyle: "rgb(250,63,72,0.3)",
+  },
+  CheckLinesX: {
+    lineWidth: 2,
+      strokeStyle: "#CED806",
+  },
+  CheckLinesY: {
+    lineWidth: 2,
+      strokeStyle: "#CED806",
+  },
+  VCheckLinesX: {
+    lineWidth: 2,
+      strokeStyle: "#CED806",
+    //strokeStyle: 'rgba(100,149,237,0.5)',
+  },
+  VCheckLinesY: {
+    lineWidth: 2,
+      strokeStyle: "#CED806",
+    //strokeStyle: 'rgba(100,149,237,0.5)',
+  },
+}
+
+export default {
+  Road,
+  CurveRoad,
+  Edge,
+  CurveEdge,
+  Lane,
+  CurveLan,
+  Point,
+  Tag,
+  CurvePoint,
+  Text,
+  Font: CanvasFont,
+  Measure,
+  Element
+}

src/graphic/Style/focus.js

@@ -0,0 +1,23 @@
+import def from './default.js'
+
+const Road = {
+  ...def.Road,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+const Tag = {
+  ...def.Tag,
+  strokeStyle: "#00C8AF",
+  fillStyle: "#00C8AF",
+}
+const Point = {
+  ...def.Point,
+  lineWidth: 2,
+  fillStyle: "rgba(245, 255, 0, 1)",
+  strokeStyle: "rgba(245, 255, 255, 1)",
+}
+
+export default {
+  Road,
+  Tag,
+  Point
+}

src/graphic/Style/index.js

@@ -0,0 +1,9 @@
+import def from './default.js'
+import select from './select.js'
+import focus from './focus.js'
+
+export default {
+  ...def,
+  Select: select,
+  Focus: focus
+}

src/graphic/Style/select.js

@@ -0,0 +1,37 @@
+import def from './default.js'
+
+const Road = {
+  ...def.Road,
+  strokeStyle: "rgba(243, 255, 0, 1)",
+}
+
+const CurveRoad = {
+  ...def.CurveRoad,
+  ...Road
+}
+
+const Tag = {
+  ...def.Tag,
+  strokeStyle: "#00C8AF",
+  fillStyle: "#00C8AF",
+}
+
+const Point = {
+  ...def.Point,
+  lineWidth: 2,
+  fillStyle: "rgba(245, 255, 0, 1)",
+  strokeStyle: "rgba(245, 255, 255, 1)",
+}
+
+const CurvePoint = {
+  ...def.CurvePoint,
+  ...Point
+}
+
+export default {
+  Road,
+  Tag,
+  Point,
+  CurvePoint,
+  CurveRoad
+}

src/graphic/Style.js

@@ -7,6 +7,30 @@ const Road = {
   },
 }
 
+const Edge = {
+  ...Road,
+  lineWidth: 1,
+  // globalAlpha: 0.3
+}
+
+const Lane = {
+  ...Edge,
+  dash: [15, 15]
+}
+
+const CurveRoad = { ...Road }
+
+const CurveEdge = {
+  ...CurveRoad,
+  ...Edge
+}
+
+const CurveLan = {
+  ...Lane,
+  ...CurveEdge
+}
+
+
 const Tag = {
   strokeStyle: "rgb(255,255,255,1)",
   fillStyle: "rgb(255,255,255,1)",
@@ -31,15 +55,20 @@ const Point = {
   radius: 4,
 }
 
+const CurvePoint = {
+  ...Point
+}
+
 const Style = {
   Road,
-  Edge: {
-    ...Road,
-    lineWidth: 1,
-    globalAlpha: 0.3
-  },
+  CurveRoad,
+  Edge,
+  CurveEdge,
+  Lane,
+  CurveLan,
   Point,
   Tag,
+  CurvePoint,
   Text: {
     ...Tag,
     ...Font,

src/graphic/Util/MathUtil.js

@@ -1119,18 +1119,12 @@ export default class MathUtil {
         points[i + 2],
         scale
       );
+
       curves.push({
         start: points[i],
         end: points[i + 1],
         controls: i === 0 ? [control1] : [preControl2, control1],
       });
-      if (i + 2 === points.length - 1) {
-        curves.push({
-          start: points[i + 1],
-          controls: [control2],
-          end: points[i + 2],
-        });
-      }
       preControl1 = control1;
       preControl2 = control2;
     }