traffic-laser/src/graphic/Renderer/Draw.js

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 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";

export default class Draw {
  constructor() {
    this.context = null;
  }

  initContext(canvas) {
    if (canvas) {
      this.context = canvas.getContext("2d");
    } else {
      this.context = null;
    }
  }

  clear() {
    this.context.clearRect(
      0,
      0,
      this.context.canvas.width,
      this.context.canvas.height
    );
  }

  drawBackGround(color) {
    this.context.save();
    this.context.fillStyle = color;
    this.context.fillRect(
      0,
      0,
      this.context.canvas.width,
      this.context.canvas.height
    );
    this.context.restore();
  }

  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.lineWidth = vector.width;
    }
    this.context.beginPath();
    this.context.moveTo(point1.x, point1.y);
    this.context.lineTo(point2.x, point2.y);
    this.context.stroke();
    this.context.restore();
  }

  drawEdge(vector, isTemp) {
    //判断是否与road方向一致。角度足够小，路足够宽，有可能向量方向不一致
    let start = dataService.getPoint(vector.startId);
    let end = dataService.getPoint(vector.endId);

    let leftEdge = dataService.getEdge(vector.leftEdgeId);
    let rightEdge = dataService.getEdge(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.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;

    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();
    }

    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
    );
  }

  drawPoint(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.RoadCorner &&
        vector.vectorId == draggingItem.vectorId) ||
      (selectItem &&
        selectItem.type == VectorType.RoadCorner &&
        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.RoadCorner &&
      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();
    this.context.restore();

    this.drawText(vector, vector.vectorId);
  }

  drawControlPoint(vector) {
    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);
  }

  // 文字
  drawText(position, txt, angle) {
    this.context.save();
    this.setCanvasStyle(Style.Font);
    if (coordinate.ratio == Constant.ratio) {
      this.context.font = "12px Microsoft YaHei";
    } else {
      this.context.font = "12px Microsoft YaHei";
    }
    let pt = coordinate.getScreenXY(position);
    if (angle) {
      this.context.translate(pt.x, pt.y);
      this.context.rotate(angle);
      //this.context.strokeText(txt, 0, 0)
      this.context.fillText(txt, 0, 0);
    } else {
      //this.context.strokeText(txt, pt.x, pt.y)
      this.context.fillText(txt, pt.x, pt.y);
    }
    this.context.restore();
  }

  drawTag(geometry, styleType, hide) {
    this.context.save();

    this.context.lineWidth = Style.Tag.lineWidth * coordinate.ratio;
    this.context.strokeStyle = Style.Tag.strokeStyle;
    this.context.fillStyle = Style.Tag.fillStyle;

    if (styleType) {
      if (styleType == "style-1") {
        this.context.lineWidth =
          Style.DownLoad.style1.Tag.lineWidth * coordinate.ratio;
        this.context.strokeStyle = Style.DownLoad.style1.Tag.strokeStyle;
        this.context.fillStyle = Style.DownLoad.style1.Tag.fillStyle;
      } else if (styleType == "style-2") {
        this.context.lineWidth =
          Style.DownLoad.style2.Tag.lineWidth * coordinate.ratio;
        this.context.strokeStyle = Style.DownLoad.style2.Tag.strokeStyle;
        this.context.fillStyle = Style.DownLoad.style2.Tag.fillStyle;
      } else if (styleType == "style-3") {
        this.context.lineWidth =
          Style.DownLoad.style3.Tag.lineWidth * coordinate.ratio;
        this.context.strokeStyle = Style.DownLoad.style3.Tag.strokeStyle;
        this.context.fillStyle = Style.DownLoad.style3.Tag.fillStyle;
      } else if (styleType == "style-4") {
        this.context.lineWidth =
          Style.DownLoad.style4.Tag.lineWidth * coordinate.ratio;
        this.context.strokeStyle = Style.DownLoad.style4.Tag.strokeStyle;
        this.context.fillStyle = Style.DownLoad.style4.Tag.fillStyle;
      }
    } else {
      const selectItem = stateService.getSelectItem();
      const draggingItem = stateService.getDraggingItem();
      const focusItem = stateService.getFocusItem();

      if (selectItem && selectItem.type == VectorType.Tag) {
        if (geometry.vectorId == selectItem.vectorId) {
          this.context.strokeStyle = Style.Select.Tag.strokeStyle;
          this.context.fillStyle = Style.Select.Tag.fillStyle;
        }
      } else if (draggingItem && draggingItem.type == VectorType.Tag) {
        if (geometry.vectorId == draggingItem.vectorId) {
          this.context.strokeStyle = Style.Select.Tag.strokeStyle;
          this.context.fillStyle = Style.Select.Tag.fillStyle;
        }
      }

      if (focusItem && focusItem.type == VectorType.Tag) {
        if (geometry.vectorId == focusItem.vectorId) {
          this.context.strokeStyle = Style.Focus.Tag.strokeStyle;
          this.context.fillStyle = Style.Focus.Tag.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.Tag.strokeStyle_adding;
      this.context.fillStyle = Style.Tag.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() == "")) {
        console.log(dataService.$app.config);
        // 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;
    const pt = coordinate.getScreenXY(element);
    this.context.save();
    if (element.name == ElementEvents.AddingPoint) {
      radius = Style.Element.AddingPoint.radius * coordinate.ratio;
      this.context.strokeStyle = Style.Element.AddingPoint.strokeStyle;
      this.context.fillStyle = Style.Element.AddingPoint.fillStyle;
    } else if (element.name == ElementEvents.StartSymbolPoints) {
      radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio;
      this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle;
      this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle;
    } else if (element.name == ElementEvents.EndSymbolPoints) {
      radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio;
      this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle;
      this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle;
    } else if (element.name == "pano") {
      radius = Style.Pano.radius * coordinate.ratio;
      this.context.strokeStyle = Style.Pano.strokeStyle;
      this.context.fillStyle = Style.Pano.fillStyle;
      this.context.lineWidth = Style.Pano.lineWidth;
    }
    this.context.beginPath();
    this.context.arc(pt.x, pt.y, radius, 0, twoPi, true);
    this.context.stroke();
    this.context.fill();
    this.context.restore();
  }

  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();
  }

  //由多个点构成，里面的坐标都已经是屏幕坐标
  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 };