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

  drawBackGroundImg(vector) {
    this.context.save();

    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 {
      this.context.globalAlpha = 1;
      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();

    for (let i = 0; i < vector.leftLanes.length; ++i) {
      this.drawPoint(vector.leftLanes[i].start);
      this.drawPoint(vector.leftLanes[i].end);
    }
    for (let i = 0; i < vector.rightLanes.length; ++i) {
      this.drawPoint(vector.rightLanes[i].start);
      this.drawPoint(vector.rightLanes[i].end);
    }

    if (vector.midDivide != null && vector.midDivide.display) {
      let midDivideStart = coordinate.getScreenXY(vector.midDivide.start);
      let midDivideEnd = coordinate.getScreenXY(vector.midDivide.end);
      this.context.save();
      this.context.globalAlpha = 1;
      this.context.strokeStyle = "blue";
      this.context.beginPath();
      this.context.setLineDash([10, 3, 1]); //设定实线与空白的大小
      this.context.moveTo(midDivideStart.x, midDivideStart.y);
      this.context.lineTo(midDivideEnd.x, midDivideEnd.y);
      this.context.stroke();
      this.context.restore();
    }
  }

  drawCurveRoad(vector, isTemp) {
    const getStyleLines = () => {
      const styleLines = {
        dotted: [...vector.leftLanes, ...vector.rightLanes],
        solid: [
          vector.points,
          dataService.getCurveEdge(vector.rightEdgeId).points,
          dataService.getCurveEdge(vector.leftEdgeId).points,
        ],
      };
      return Object.entries(styleLines).reduce((t, [key, lines]) => {
        t[key] = lines.map((line) =>
          line.map((point) => coordinate.getScreenXY(point))
        );
        return t;
      }, {});
    };

    const draw = (points, drawPoints = false) => {
      if (drawPoints) {
        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();
        }
      }

      // ctx.lineCap = "round"; //线段端点的样式
      ctx.beginPath();
      for (const curve of mathUtil.getCurvesByPoints(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 ctx = this.context;
    ctx.save();

    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.lineWidth = 2;
    ctx.lineCap = "butt";
    ctx.strokeStyle = strokeStyle;

    const styleLines = getStyleLines();
    for (const style in styleLines) {
      const isSolid = style === "solid";
      ctx.setLineDash(isSolid ? [] : [15, 15]);

      const lines = styleLines[style];
      for (const points of lines) {
        if (points.length < 2) {
          break;
        }
        draw(points, isSolid);
      }
    }
    ctx.restore();
  }

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

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

  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.CurveRoadCorner &&
        vector.vectorId == draggingItem.vectorId) ||
      (selectItem &&
        selectItem.type == VectorType.CurveRoadCorner &&
        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.CurveRoadCorner &&
      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);
  }

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

    this.drawPoint(leftEdge.start);
    this.drawPoint(leftEdge.end);
    this.drawPoint(rightEdge.start);
    this.drawPoint(rightEdge.end);
  }

  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);
    // const pt2 = this.twoOrderBezier(0.5, start, pt, end);
    // this.context.save();
    // this.context.strokeStyle = color;
    // this.context.fillStyle = color;
    // this.context.beginPath();
    // this.context.arc(
    //   pt2.x,
    //   pt2.y,
    //   radius * coordinate.ratio * 3,
    //   0,
    //   Math.PI * 2,
    //   true
    // );
    // this.context.stroke();
    // this.context.fill();
    // this.context.restore();

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

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

    const pt2 = this.twoOrderBezier(0.5, start, pt, end);
    pt = this.twoOrderBezier2(0.5, start, pt2, end);

    this.context.save();
    //曲线
    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.context.save();
    this.context.beginPath();
    this.context.arc(
      pt.x,
      pt.y,
      radius * coordinate.ratio * 3,
      0,
      Math.PI * 2,
      true
    );
    this.context.stroke();
    this.context.fill();

    this.context.restore();
  }

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