Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/graphic/CanvasStyle/default.js

@@ -1,11 +1,7 @@
 const Road = {
   strokeStyle: "#939393",
   lineWidth: 8,
-  realLineWidth: 2,
-  // error: {
-  //   strokeStyle: "rgba(255,0,0,0.5)",
-  //   fillStyle: "rgba(255,0,0,0.8)",
-  // },
+  realLineWidth: 2
 };
 
 const RoadEdge = {
@@ -37,8 +33,8 @@ const CurveLan = {
 };
 
 const Text = {
-  strokeStyle: "rgb(255,255,255,1)",
-  fillStyle: "rgb(255,255,255,1)",
+  strokeStyle: "rgb(0,0,0,1)",
+  fillStyle: "rgb(0,0,0,1)",
   strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
   fillStyle_adding: "rgba(243, 255, 0, 0.8)",
   lineWidth: 1,
@@ -75,20 +71,33 @@ const ControlPoint = {
   radius: 8,
 };
 
-const Text = {
-  ...Text,
-  ...CanvasFont,
-  font: "12px Microsoft YaHei",
-  fillStyle: "rgba(0,0,0,0.7)",
-  strokeStyle: "rgba(0,0,0,0.7)",
-};
-
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
   strokeStyle: "rgba(255,255,255,1)",
   lineWidth: 1,
 };
 
+const SimpleLine = {
+  strokeStyle: "#CED806",
+  lineWidth: 2,
+  dash: [3, 2, 2],
+}
+const GuideLine = {
+  strokeStyle: "#CED806",
+  lineWidth: 2,
+  dash: [3, 2, 2],
+}
+const MeasureLine = {
+  strokeStyle: "#CED806",
+  lineWidth: 2,
+}
+const BaseLine = {
+  strokeStyle: "#3290FF",
+  lineWidth: 2,
+}
+
+
+
 const Element = {
   AddingPoint: {
     radius: 4,
@@ -121,6 +130,7 @@ const Element = {
 };
 
 export default {
+  SimpleLine,
   Road,
   CurveRoad,
   RoadEdge,
@@ -128,11 +138,13 @@ export default {
   Lane,
   CurveLan,
   Point,
+  BaseLine,
   Text,
   ControlPoint,
   CurveRoadPoint,
-  Text,
+  GuideLine,
   Font: CanvasFont,
+  MeasureLine,
   Measure,
   Element,
   RoadPoint,

src/graphic/Renderer/Draw.js

@@ -1,13 +1,10 @@
-import { dataService } from "../Service/DataService.js";
-import { stateService } from "../Service/StateService.js";
-import { measureService } from "../Service/MeasureService";
-import { coordinate } from "../Coordinate.js";
+import {dataService} from "../Service/DataService.js";
+import {stateService} from "../Service/StateService.js";
+import {coordinate} from "../Coordinate.js";
 import Style from "@/graphic/CanvasStyle/index.js";
 import VectorType from "../enum/VectorType.js";
-import SelectState from "../enum/SelectState.js";
-import { mathUtil } from "../Util/MathUtil.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) {
@@ -75,6 +72,7 @@ const help = {
       ctx.stroke();
     }
   },
+
 };
 
 export default class Draw {
@@ -167,7 +165,7 @@ export default class Draw {
         ? vector.end
         : dataService.getRoadPoint(vector.endId);
       this.drawText(
-        { x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2 },
+        {x: (startReal.x + endReal.x) / 2, y: (startReal.y + endReal.y) / 2},
         vector.vectorId
       );
     }
@@ -261,13 +259,13 @@ export default class Draw {
         .getRoadEdge(vector.edgeInfo2.id)
         .getPosition(vector.edgeInfo2.dir)
     );
-    const pt2 = this.twoOrderBezier(
+    const pt2 = mathUtil.twoOrderBezier(
       0.5,
       start,
-      coordinate.getScreenXY({ x: vector.x, y: vector.y }),
+      coordinate.getScreenXY({x: vector.x, y: vector.y}),
       end
     );
-    const pt = this.twoOrderBezier2(0.5, start, pt2, end);
+    const pt = mathUtil.twoOrderBezier2(0.5, start, pt2, end);
 
     const ctx = this.context;
     ctx.save();
@@ -312,9 +310,9 @@ export default class Draw {
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId));
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId));
     vector.leftLanesCurves &&
-      vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
+    vector.leftLanesCurves.forEach(this.drawCurveLan.bind(this));
     vector.rightLanesCurves &&
-      vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
+    vector.rightLanesCurves.forEach(this.drawCurveLan.bind(this));
 
     if (import.meta.env.DEV) {
       vector.points.forEach(this.drawPoint.bind(this));
@@ -355,10 +353,12 @@ export default class Draw {
   drawRoadPoint(vector) {
     this.drawPoint(vector);
   }
+
   drawPoint(vector) {
-    const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
+    const pt = coordinate.getScreenXY({x: vector.x, y: vector.y});
     const ctx = this.context;
-    const draw = () => {};
+    const draw = () => {
+    };
 
     help.setVectorStyle(ctx, vector, vector.geoType || "Point");
     ctx.beginPath();
@@ -381,43 +381,6 @@ export default class Draw {
     }
   }
 
-  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是曲线上的点
-  twoOrderBezier2(t, p1, p, p2) {
-    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,
-    };
-  }
-
   // 文字
   drawText(position, txt, angle) {
     const ctx = this.context;
@@ -435,262 +398,6 @@ export default class Draw {
     ctx.restore();
   }
 
-  drawText(geometry, styleType, hide) {
-    this.context.save();
-
-    this.context.lineWidth = Style.Text.lineWidth * coordinate.ratio;
-    this.context.strokeStyle = Style.Text.strokeStyle;
-    this.context.fillStyle = Style.Text.fillStyle;
-
-    if (styleType) {
-      if (styleType == "style-1") {
-        this.context.lineWidth =
-          Style.DownLoad.style1.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style1.Text.fillStyle;
-      } else if (styleType == "style-2") {
-        this.context.lineWidth =
-          Style.DownLoad.style2.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style2.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style2.Text.fillStyle;
-      } else if (styleType == "style-3") {
-        this.context.lineWidth =
-          Style.DownLoad.style3.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style3.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style3.Text.fillStyle;
-      } else if (styleType == "style-4") {
-        this.context.lineWidth =
-          Style.DownLoad.style4.Text.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style4.Text.strokeStyle;
-        this.context.fillStyle = Style.DownLoad.style4.Text.fillStyle;
-      }
-    } else {
-      const selectItem = stateService.getSelectItem();
-      const draggingItem = stateService.getDraggingItem();
-      const focusItem = stateService.getFocusItem();
-
-      if (selectItem && selectItem.type == VectorType.Text) {
-        if (geometry.vectorId == selectItem.vectorId) {
-          this.context.strokeStyle = Style.Select.Text.strokeStyle;
-          this.context.fillStyle = Style.Select.Text.fillStyle;
-        }
-      } else if (draggingItem && draggingItem.type == VectorType.Text) {
-        if (geometry.vectorId == draggingItem.vectorId) {
-          this.context.strokeStyle = Style.Select.Text.strokeStyle;
-          this.context.fillStyle = Style.Select.Text.fillStyle;
-        }
-      }
-
-      if (focusItem && focusItem.type == VectorType.Text) {
-        if (geometry.vectorId == focusItem.vectorId) {
-          this.context.strokeStyle = Style.Focus.Text.strokeStyle;
-          this.context.fillStyle = Style.Focus.Text.fillStyle;
-        }
-      }
-    }
-
-    //正在添加
-    if (geometry.adding) {
-      let points2d = geometry.points2d;
-      let points = [];
-      for (let i = 0; i < points2d.length; ++i) {
-        points[i] = coordinate.getScreenXY({
-          x: points2d[i].x,
-          y: points2d[i].y,
-        });
-      }
-
-      this.context.strokeStyle = Style.Text.strokeStyle_adding;
-      this.context.fillStyle = Style.Text.fillStyle_adding;
-      this.context.beginPath();
-      this.context.moveTo(points[0].x, points[0].y);
-      this.context.lineTo(points[1].x, points[1].y);
-      this.context.lineTo(points[2].x, points[2].y);
-      this.context.lineTo(points[3].x, points[3].y);
-      this.context.closePath();
-      this.context.stroke();
-
-      for (let i = 4; i < points.length - 1; i += 2) {
-        this.context.moveTo(points[i].x, points[i].y);
-        this.context.lineTo(points[i + 1].x, points[i + 1].y);
-      }
-      this.context.stroke();
-    } else {
-      const fontSize = coordinate.ratio == Constant.ratio ? 36 : 12;
-      this.context.font = `400 ${fontSize}px Microsoft YaHei`;
-
-      //根据文字的长度，更新标注范围
-      let title = geometry.title;
-      if (!hide && (title == null || title.trim() == "")) {
-        // title = '请输入名称'
-        title = dataService.$app.config.i18n("cad.input");
-      }
-      geometry.des += "";
-      if (geometry.des != "") {
-        geometry.sideWidth = Math.max(
-          this.context.measureText(title).width,
-          this.context.measureText(
-            parseFloat(geometry.des.replace(",", "")).toFixed(2)
-          ).width
-        );
-        geometry.setPoints2d();
-      }
-
-      let points2d = geometry.points2d;
-      let points = [];
-      for (let i = 0; i < points2d.length; ++i) {
-        points[i] = coordinate.getScreenXY({
-          x: points2d[i].x,
-          y: points2d[i].y,
-        });
-      }
-
-      let pt = { x: geometry.center.x, y: geometry.center.y };
-      pt = coordinate.getScreenXY({
-        x: geometry.center.x,
-        y: geometry.center.y,
-      });
-      const fontWidth1 = this.context.measureText(title).width;
-      const line1 = mathUtil.createLine1(
-        {
-          x: (points[0].x + points[3].x) / 2,
-          y: (points[0].y + points[3].y) / 2,
-        },
-        {
-          x: (points[2].x + points[1].x) / 2,
-          y: (points[2].y + points[1].y) / 2,
-        }
-      );
-
-      let fontWidth2 = this.context.measureText(geometry.des + "m²").width;
-      if (geometry.des != "" && geometry.unit == "ft") {
-        fontWidth2 = this.context.measureText(
-          parseFloat(geometry.des.replace(",", "")).toFixed(2) + "ft²"
-        ).width;
-      }
-      const line2 = mathUtil.createLine1(points[2], points[3]);
-
-      const fontStart1 = mathUtil.getDisPointsLine(
-        line1,
-        pt,
-        fontWidth1 / 2,
-        fontWidth1 / 2
-      );
-      const fontStart2 = mathUtil.getDisPointsLine(
-        line2,
-        {
-          x: (points[2].x + points[3].x) / 2,
-          y: (points[2].y + points[3].y) / 2,
-        },
-        fontWidth2 / 2,
-        fontWidth2 / 2
-      );
-
-      if (fontStart1.newpoint1.x < fontStart1.newpoint2.x) {
-        this.context.fillText(
-          title,
-          fontStart1.newpoint1.x,
-          fontStart1.newpoint1.y
-        );
-
-        if (geometry.des) {
-          if (measureService.unit == "ft" && geometry.unit == "m") {
-            let area = uoMService.convert(
-              geometry.des,
-              "area",
-              void 0,
-              "imperial",
-              0.01,
-              false
-            );
-            this.context.fillText(
-              parseFloat(area.replace(",", "")).toFixed(2),
-              fontStart2.newpoint1.x + fontSize / 1.5,
-              fontStart2.newpoint1.y
-            );
-          } else if (measureService.unit == "m" && geometry.unit == "ft") {
-            let area = uoMService.convertBack(
-              geometry.des,
-              "area",
-              7,
-              "imperial",
-              0.01,
-              false
-            );
-            this.context.fillText(
-              parseFloat(area.replace(",", "")).toFixed(2),
-              fontStart2.newpoint1.x + fontSize / 1.5,
-              fontStart2.newpoint1.y
-            );
-          } else if (geometry.unit == "m") {
-            this.context.fillText(
-              parseFloat(geometry.des).toFixed(2) + "m²",
-              fontStart2.newpoint1.x,
-              fontStart2.newpoint1.y
-            );
-          } else if (geometry.unit == "ft") {
-            this.context.fillText(
-              parseFloat(geometry.des.replace(",", "")).toFixed(2) + "ft²",
-              fontStart2.newpoint1.x,
-              fontStart2.newpoint1.y
-            );
-          }
-        }
-      } else {
-        this.context.fillText(
-          title,
-          fontStart1.newpoint2.x,
-          fontStart1.newpoint2.y
-        );
-
-        if (geometry.des) {
-          if (measureService.unit == "ft" && geometry.unit == "m") {
-            let area = uoMService.convert(
-              geometry.des,
-              "area",
-              void 0,
-              "imperial",
-              0.01,
-              false
-            );
-            this.context.fillText(
-              parseFloat(area.replace(",", "")).toFixed(2),
-              fontStart2.newpoint2.x + fontSize / 1.5,
-              fontStart2.newpoint2.y
-            );
-          } else if (measureService.unit == "m" && geometry.unit == "ft") {
-            let area = uoMService.convertBack(
-              geometry.des,
-              "area",
-              7,
-              "imperial",
-              0.01,
-              false
-            );
-            this.context.fillText(
-              parseFloat(area.replace(",", "")).toFixed(2),
-              fontStart2.newpoint2.x + fontSize / 1.5,
-              fontStart2.newpoint2.y
-            );
-          } else if (geometry.unit == "m") {
-            this.context.fillText(
-              parseFloat(geometry.des).toFixed(2) + "m²",
-              fontStart2.newpoint2.x,
-              fontStart2.newpoint2.y
-            );
-          } else if (geometry.unit == "ft") {
-            this.context.fillText(
-              parseFloat(geometry.des.replace(",", "")).toFixed(2) + "ft²",
-              fontStart2.newpoint2.x,
-              fontStart2.newpoint2.y
-            );
-          }
-        }
-      }
-    }
-    this.context.restore();
-  }
-
   drawCircle(element) {
     let radius = null;
     const twoPi = Math.PI * 2;
@@ -722,464 +429,31 @@ export default class Draw {
   }
 
   drawLine(element) {
-    let start = coordinate.getScreenXY(element.start);
-    let end = coordinate.getScreenXY(element.end);
-
-    this.context.save();
-    if (element.name == ElementEvents.VCheckLinesX) {
-      this.context.lineWidth =
-        Style.Element.VCheckLinesX.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.VCheckLinesX.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-      start.y = 0;
-      end.y = this.context.canvas.clientHeight;
-    } else if (element.name == ElementEvents.VCheckLinesY) {
-      this.context.lineWidth =
-        Style.Element.VCheckLinesY.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.VCheckLinesY.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-      start.x = 0;
-      end.x = this.context.canvas.clientWidth;
-    } else if (element.name == ElementEvents.NewRoad) {
-      this.context.lineWidth =
-        Style.Element.NewRoad.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.NewRoad.strokeStyle;
-      if (element.state == "error") {
-        this.context.strokeStyle = Style.Element.NewRoad.errorStrokeStyle;
-      }
-    } else if (element.name == ElementEvents.CheckLinesX) {
-      this.context.lineWidth =
-        Style.Element.CheckLinesX.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.CheckLinesX.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-    } else if (element.name == ElementEvents.CheckLinesY) {
-      this.context.lineWidth =
-        Style.Element.CheckLinesY.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.CheckLinesY.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-    } else if (element.name == ElementEvents.SignLine1) {
-      this.context.lineWidth =
-        Style.Element.SignLine1.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.SignLine1.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-    } else if (element.name == ElementEvents.SignLine2) {
-      this.context.lineWidth =
-        Style.Element.SignLine2.lineWidth * coordinate.ratio;
-      this.context.strokeStyle = Style.Element.SignLine2.strokeStyle;
-      this.context.setLineDash([3, 2, 2]);
-    }
-
-    this.context.beginPath();
-    this.context.moveTo(start.x, start.y);
-    this.context.lineTo(end.x, end.y);
-    this.context.stroke();
-    this.context.restore();
-
-    // if (element.name == ElementEvents.NewRoad) {
-    //   //添加测量值
-    //   this.drawMeasureTxt(element.start, element.end);
-    // }
-
-    // this.context.save();
-    // this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio;
-    // this.context.strokeStyle = Style.Point.strokeStyle;
-    // this.context.fillStyle = Style.Point.fillStyle;
-    // let radius = Style.Point.radius;
-    // this.context.beginPath();
-    // this.context.arc(
-    //   start.x,
-    //   start.y,
-    //   radius * coordinate.ratio,
-    //   0,
-    //   Math.PI * 2,
-    //   true
-    // );
-    // this.context.stroke();
-    // this.context.fill();
-    // this.context.restore();
-  }
-
-  drawTestLine(start, end, hit) {
-    start = coordinate.getScreenXY(start);
-    end = coordinate.getScreenXY(end);
+    const start = element.getType === VectorType.Line
+      ? dataService.getLine(element.start)
+      : coordinate.getScreenXY(element.start)
+    const end = element.getType === VectorType.Line
+      ? dataService.getLine(element.end)
+      : coordinate.getScreenXY(element.end)
 
     this.context.save();
+    const style = help.setVectorStyle(
+      this.context,
+      element,
+      element.category || element.geoType
+    );
 
-    this.context.strokeStyle = "blue";
+    if (style.dash) {
+      this.context.setLineDash(style.dash);
+    }
     this.context.beginPath();
     this.context.moveTo(start.x, start.y);
     this.context.lineTo(end.x, end.y);
     this.context.stroke();
-
-    // this.context.beginPath();
-    // this.context.arc(start.x, start.y, Constant.minAdsorbPix, 0, 2 * Math.PI);
-    // if (!hit) {
-    //   this.context.fillStyle = "black";
-    // } else {
-    //   this.context.fillStyle = "red";
-    // }
-    // this.context.fill();
-
-    this.context.restore();
-  }
-
-  //由多个点构成，里面的坐标都已经是屏幕坐标
-  drawMeasure(points, dir, styleType) {
-    this.context.save();
-    this.context.strokeStyle = Style.Measure.strokeStyle;
-    this.context.lineWidth = Style.Measure.lineWidth * coordinate.ratio;
-
-    if (styleType) {
-      if (styleType == "style-1") {
-        this.context.lineWidth =
-          Style.DownLoad.style1.Measure.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Measure.strokeStyle;
-      } else if (styleType == "style-2") {
-        this.context.lineWidth =
-          Style.DownLoad.style1.Measure.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Measure.strokeStyle;
-      } else if (styleType == "style-3") {
-        this.context.lineWidth =
-          Style.DownLoad.style1.Measure.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Measure.strokeStyle;
-      } else if (styleType == "style-4") {
-        this.context.lineWidth =
-          Style.DownLoad.style1.Measure.lineWidth * coordinate.ratio;
-        this.context.strokeStyle = Style.DownLoad.style1.Measure.strokeStyle;
-      }
-    }
-
-    for (let i = 0; i < points.length - 1; ++i) {
-      let start = coordinate.getScreenXY(points[i]);
-      let end = coordinate.getScreenXY(points[i + 1]);
-
-      let angle = 0;
-      if (dir == "top") {
-        start.y = measureService.region.top * coordinate.ratio;
-        end.y = measureService.region.top * coordinate.ratio;
-      } else if (dir == "bottom") {
-        start.y = measureService.region.bottom * coordinate.ratio;
-        end.y = measureService.region.bottom * coordinate.ratio;
-      } else if (dir == "left") {
-        start.x = measureService.region.left * coordinate.ratio;
-        end.x = measureService.region.left * coordinate.ratio;
-        angle = (-90 / 180) * Math.PI;
-      } else if (dir == "right") {
-        start.x = measureService.region.right * coordinate.ratio;
-        end.x = measureService.region.right * coordinate.ratio;
-        angle = (90 / 180) * Math.PI;
-      }
-
-      let line = mathUtil.createLine1(start, end);
-      if (line == null) {
-        continue;
-      }
-      let lines = mathUtil.getParallelLineForDistance(
-        line,
-        6 * coordinate.ratio
-      );
-
-      let start1 = mathUtil.getJoinLinePoint(start, lines.line1);
-      let end1 = mathUtil.getJoinLinePoint(end, lines.line1);
-      let start2 = mathUtil.getJoinLinePoint(start, lines.line2);
-      let end2 = mathUtil.getJoinLinePoint(end, lines.line2);
-
-      this.context.beginPath();
-      this.context.moveTo(start1.x, start1.y);
-      this.context.lineTo(start2.x, start2.y);
-      this.context.stroke();
-
-      this.context.beginPath();
-      this.context.moveTo(end1.x, end1.y);
-      this.context.lineTo(end2.x, end2.y);
-      this.context.stroke();
-
-      let mid = {
-        x: (start.x + end.x) / 2,
-        y: (start.y + end.y) / 2,
-      };
-
-      let vLine = mathUtil.getVerticalLine(line, mid);
-      lines = mathUtil.getParallelLineForDistance(vLine, 22 * coordinate.ratio);
-      let join1 = mathUtil.getIntersectionPoint(line, lines.line1);
-      let join2 = mathUtil.getIntersectionPoint(line, lines.line2);
-
-      if (
-        mathUtil.getDistance(start, join1) < mathUtil.getDistance(start, mid)
-      ) {
-        let measureValue = mathUtil.getDistance(points[i], points[i + 1]);
-        if (measureService.unit == "ft") {
-          measureValue =
-            " " +
-            uoMService.convert(
-              measureValue,
-              "distance",
-              void 0,
-              "imperial",
-              0.01,
-              true
-            ) +
-            " ";
-          //measureValue = mathUtil.getFixed(measureValue / measureService.ftUnit, 2) + 'ft'
-        } else {
-          measureValue = mathUtil.getFixed(measureValue, 2) + "m";
-        }
-
-        if (
-          mathUtil.getDistance(start, end) >
-          this.context.measureText(measureValue).width
-        ) {
-          this.context.beginPath();
-          this.context.moveTo(start.x, start.y);
-          this.context.lineTo(join1.x, join1.y);
-          this.context.stroke();
-
-          this.context.beginPath();
-          this.context.moveTo(join2.x, join2.y);
-          this.context.lineTo(end.x, end.y);
-          this.context.stroke();
-
-          this.context.save();
-          if (coordinate.ratio == Constant.ratio) {
-            this.context.font = "36px Microsoft YaHei";
-          } else {
-            this.context.font = "12px Microsoft YaHei";
-          }
-          if (styleType == "style-1" || styleType == "style-3") {
-            this.context.fillStyle = "#000000";
-            this.context.strokeStyle = "#000000";
-          } else {
-            this.context.fillStyle = "#FFFFFF";
-            this.context.strokeStyle = "#FFFFFF";
-          }
-          this.context.textAlign = "center";
-          this.context.textBaseline = "middle";
-          this.context.miterLimit = 10;
-          this.context.direction = "ltr";
-
-          if (angle) {
-            this.context.translate(mid.x, mid.y);
-            this.context.rotate(angle);
-            this.context.fillText(measureValue, 0, 0);
-          } else {
-            this.context.fillText(measureValue, mid.x, mid.y);
-          }
-          this.context.restore();
-        } else {
-          this.context.beginPath();
-          this.context.moveTo(start.x, start.y);
-          this.context.lineTo(end.x, end.y);
-          this.context.stroke();
-        }
-      } else {
-        let measureValue = mathUtil.getDistance(points[i], points[i + 1]);
-        if (measureService.unit == "ft") {
-          //measureValue = mathUtil.getFixed(measureValue / measureService.ftUnit, 2) + 'ft'
-          measureValue =
-            " " +
-            uoMService.convert(
-              measureValue,
-              "distance",
-              void 0,
-              "imperial",
-              0.01,
-              true
-            ) +
-            " ";
-        } else {
-          measureValue = mathUtil.getFixed(measureValue, 2) + "m";
-        }
-
-        if (
-          mathUtil.getDistance(start, end) >
-          this.context.measureText(measureValue).width
-        ) {
-          this.context.beginPath();
-          this.context.moveTo(start.x, start.y);
-          this.context.lineTo(join2.x, join2.y);
-          this.context.stroke();
-
-          this.context.beginPath();
-          this.context.moveTo(join1.x, join1.y);
-          this.context.lineTo(end.x, end.y);
-          this.context.stroke();
-
-          this.context.save();
-          if (coordinate.ratio == Constant.ratio) {
-            this.context.font = "36px Microsoft YaHei";
-          } else {
-            this.context.font = "12px Microsoft YaHei";
-          }
-          if (styleType == "style-1" || styleType == "style-3") {
-            this.context.fillStyle = "#000000";
-            this.context.strokeStyle = "#000000";
-          } else {
-            this.context.fillStyle = "#FFFFFF";
-            this.context.strokeStyle = "#FFFFFF";
-          }
-          this.context.textAlign = "center";
-          this.context.textBaseline = "middle";
-          this.context.miterLimit = 10;
-          this.context.direction = "ltr";
-
-          if (angle) {
-            this.context.translate(mid.x, mid.y);
-            this.context.rotate(angle);
-            this.context.fillText(measureValue, 0, 0);
-          } else {
-            this.context.fillText(measureValue, mid.x, mid.y);
-          }
-          this.context.restore();
-        } else {
-          this.context.beginPath();
-          this.context.moveTo(start.x, start.y);
-          this.context.lineTo(end.x, end.y);
-          this.context.stroke();
-        }
-      }
-    }
-    this.context.restore();
-  }
-
-  drawMeasureTxt(startPoint, endPoint) {
-    const _startPoint = coordinate.getScreenXY(startPoint);
-    const _endPoint = coordinate.getScreenXY(endPoint);
-
-    const measureInterval = 10;
-    const line = mathUtil.createLine1(_startPoint, _endPoint);
-    if (line == null) {
-      return;
-    }
-    let mid = {
-      x: (_startPoint.x + _endPoint.x) / 2,
-      y: (_startPoint.y + _endPoint.y) / 2,
-    };
-    const lines = mathUtil.getParallelLineForDistance(line, measureInterval);
-    let pLine = null;
-    let mid1 = mathUtil.getJoinLinePoint(mid, lines.line1);
-    let mid2 = mathUtil.getJoinLinePoint(mid, lines.line2);
-    if (mid.y < mid1.y) {
-      mathUtil.clonePoint(mid, mid2);
-      pLine = lines.line2;
-    } else {
-      mathUtil.clonePoint(mid, mid1);
-      pLine = lines.line1;
-    }
-
-    let measureDistance = mathUtil.getDistance(startPoint, endPoint);
-
-    if (measureService.unit == "ft") {
-      //measureDistance = mathUtil.getFixed(measureDistance / measureService.ftUnit, 2) + 'ft'
-      measureDistance =
-        " " +
-        uoMService.convert(
-          measureDistance,
-          "distance",
-          void 0,
-          "imperial",
-          0.01,
-          true
-        ) +
-        " ";
-    } else {
-      measureDistance = mathUtil.getFixed(measureDistance, 2) + "m";
-    }
-
-    const fontWidth = this.context.measureText(measureDistance).width;
-    let vLine = mathUtil.getLineForPoint(line, mid);
-    const vLines = mathUtil.getParallelLineForDistance(vLine, fontWidth / 2);
-    let startJoin = mathUtil.getIntersectionPoint(vLines.line1, pLine);
-    startJoin = {
-      x: Math.round(startJoin.x),
-      y: Math.round(startJoin.y),
-    };
-    let endJoin = mathUtil.getIntersectionPoint(vLines.line2, pLine);
-    endJoin = {
-      x: Math.round(endJoin.x),
-      y: Math.round(endJoin.y),
-    };
-
-    if (startJoin.x < endJoin.x) {
-      mathUtil.clonePoint(mid, startJoin);
-    } else if (startJoin.x > endJoin.x) {
-      mathUtil.clonePoint(mid, endJoin);
-    } else if (startJoin.y < endJoin.y) {
-      mathUtil.clonePoint(mid, startJoin);
-    } else {
-      mathUtil.clonePoint(mid, endJoin);
-    }
-
-    //const fontStart = mathUtil.getDisPointsLine(line, mid, fontWidth / 2, fontWidth / 2)
-    // let a1, a2
-    let angle = null;
-    if (typeof line.a !== "undefined") {
-      angle = Math.atan(line.a);
-    } else if (line.hasOwnProperty("x")) {
-      angle = Math.PI / 2;
-    } else {
-      angle = 0;
-    }
-
-    this.context.save();
-    this.context.fillStyle = Style.Measure.txt;
-    this.context.translate(mid.x, mid.y);
-    this.context.rotate(angle);
-    this.context.fillText(measureDistance, 0, 0);
-    /*
-        if (fontStart.newpoint1.x > fontStart.newpoint2.x) {
-            this.context.translate(mid.x, mid.y)
-            this.context.rotate(angle)
-            //this.context.strokeText(measureDistance, 0, 0);
-            this.context.fillText(measureDistance, 0, 0)
-            // a1 = fontStart.newpoint2
-            // a2 = fontStart.newpoint1
-        } else if (fontStart.newpoint1.x < fontStart.newpoint2.x) {
-            this.context.translate(mid.x, mid.y)
-            this.context.rotate(angle)
-            //this.context.strokeText(measureDistance, 0, 0);
-            this.context.fillText(measureDistance, 0, 0)
-            // a1 = fontStart.newpoint1
-            // a2 = fontStart.newpoint2
-        } else if (fontStart.newpoint1.y < fontStart.newpoint2.y) {
-            this.context.translate(mid.x, mid.y)
-            this.context.rotate(angle)
-            //this.context.strokeText(measureDistance, 0, 0);
-            this.context.fillText(measureDistance, 0, 0)
-            // a2 = fontStart.newpoint2
-            // a1 = fontStart.newpoint1
-        } else {
-            this.context.translate(mid.x, mid.y)
-            this.context.rotate(angle)
-            //this.context.strokeText(measureDistance, 0, 0);
-            this.context.fillText(measureDistance, 0, 0)
-            // a2 = fontStart.newpoint1
-            // a1 = fontStart.newpoint2
-        }
-        */
-
     this.context.restore();
   }
 
-  setCanvasStyle(style) {
-    for (const key in style) {
-      if (key != "isFill" && key != "isStroke") {
-        this.context[key] = style[key];
-      }
-    }
-  }
-
-  rgb() {
-    //rgb颜色随机
-    const r = Math.floor(Math.random() * 256);
-    const g = Math.floor(Math.random() * 256);
-    const b = Math.floor(Math.random() * 256);
-    return `rgb(${r},${g},${b})`;
-  }
-
-  /*************************************************************************************家具**********************************************************************************************/
-
-  /***************************************************************************************************************************************************************************************/
 }
 
 const draw = new Draw();
-export { draw };
+export {draw};

src/graphic/Util/MathUtil.js

@@ -1495,6 +1495,51 @@ export default class MathUtil {
       rightEdgePoints: rightEdgePoints,
     };
   }
+
+  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是曲线上的点
+  twoOrderBezier2(t, p1, p, p2) {
+    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,
+    };
+  }
+
+  rgb() {
+    //rgb颜色随机
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    return `rgb(${r},${g},${b})`;
+  }
 }
 
 const mathUtil = new MathUtil();