traffic-laser/src/graphic/CanvasStyle/default.js

import { coordinate } from "../Coordinate.js";

const Road = {
  strokeStyle: "#2F8FFF",
  lineWidth: 1 * coordinate.ratio,
};

const RoadEdge = {
  ...Road,
  lineWidth: 1 * coordinate.ratio,
  strokeStyle: "#2F8FFF",
};

const Lane = {
  ...RoadEdge,
  lineWidth: 1 * coordinate.ratio,
  strokeStyle: "#2F8FFF",
  dash: [8 * coordinate.ratio, 8 * coordinate.ratio],
};

const SingleArrowLine = {
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "red",
};

const DoubleArrowLine = {
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "red",
};

const Magnifier = {
  strokeStyle: "#2F8FFF",
  lineWidth: 1 * coordinate.ratio,
  fillStyle: "rgba(0,0,0,0)",
  radius: 10 * coordinate.ratio,
  target: {
    radius: 100 * coordinate.ratio,
    realRadius: 20 * coordinate.ratio,
    strokeStyle: "#2F8FFF",
    lineWidth: 3 * coordinate.ratio,
  },
};

const CurveRoad = {
  ...Road,
  lineWidth: 1 * coordinate.ratio,
};

const CurveRoadEdge = {
  ...CurveRoad,
  ...RoadEdge,
};

const CurveLan = {
  ...CurveRoad,
  ...Lane,
};

const Text = {
  strokeStyle: "rgb(0,0,0,1)",
  fillStyle: "#2F8FFF",
  fontSize: 14,
  strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
  fillStyle_adding: "rgba(243, 255, 0, 0.8)",
  lineWidth: 1 * coordinate.ratio,
};

const CanvasFont = {
  font: `${14}px Microsoft YaHei`,
  fillStyle: "#000000",
  strokeStyle: "#000000",
  textAlign: "center",
  textBaseline: "middle",
  miterLimit: 10 * coordinate.ratio,
  direction: "ltr",
};

const Point = {
  strokeStyle: "#3290FF",
  fillStyle: "#fff",
  radius: 4 * coordinate.ratio,
  lineWidth: 4 * coordinate.ratio,
};

const RoadPoint = {
  ...Point,
};

const CurveRoadPoint = {
  ...Point,
};

const CrossPoint = {
  ...Point,
  strokeStyle: "#3290FF",
  radius: 2 * coordinate.ratio,
};

const Circle = {
  strokeStyle: "red",
  fillStyle: "rgba(0,0,0,0)",
  lineWidth: 2 * coordinate.ratio,
  radius: 30 * coordinate.ratio,
};

const Elliptic = {
  strokeStyle: "red",
  fillStyle: "rgba(0,0,0,0)",
  lineWidth: 2 * coordinate.ratio,
  radius: 30 * coordinate.ratio,
};

const Measure = {
  txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
  strokeStyle: "rgba(255,255,255,1)",
  lineWidth: 1 * coordinate.ratio,
};

const NormalLine = {
  strokeStyle: "#2F8FFF",
  lineWidth: 1 * coordinate.ratio,
};
const CurveLine = {
  ...NormalLine,
};

const GuideLine = {
  strokeStyle: "#CED806",
  lineWidth: 2 * coordinate.ratio,
  dash: [3 * coordinate.ratio, 2 * coordinate.ratio, 2 * coordinate.ratio],
};
const GuidePositionLine = {
  strokeStyle: "#ccc",
  lineWidth: 2 * coordinate.ratio,
  dash: [3 * coordinate.ratio, 2 * coordinate.ratio, 2 * coordinate.ratio],
}
const MeasureLine = {
  strokeStyle: "#2F8FFF",
  lineWidth: 2 * coordinate.ratio,
  text: {
    fontSize: 12,
    fillColor: "#fff",
    padding: 6 * coordinate.ratio,
    backColor: "#2F8FFF",
  },
};
const BaseLine = {
  strokeStyle: "red",
  fillStyle: "red",
  lineWidth: 1 * coordinate.ratio,
};

const BasePoint = {
  strokeStyle: "rgba(255,255,255,0)",
  fillStyle: "red",
  radius: 6 * coordinate.ratio,
  lineWidth: 4 * coordinate.ratio,
  out: {
    strokeStyle: "red",
    fillStyle: "rgba(255,255,255,0)",
    radius: 9 * coordinate.ratio,
    lineWidth: 1 * coordinate.ratio,
  },
};

const Element = {
  AddingPoint: {
    radius: 4 * coordinate.ratio,
    fillStyle: "yellow",
    strokeStyle: "green",
  },
  NewRoad: {
    lineWidth: 4 * coordinate.ratio,
    strokeStyle: "rgba(100,100,100,0.3)",
    errorStrokeStyle: "rgb(250,63,72,0.3)",
  },
  CheckLinesX: {
    lineWidth: 2 * coordinate.ratio,
    strokeStyle: "#CED806",
  },
  CheckLinesY: {
    lineWidth: 2 * coordinate.ratio,
    strokeStyle: "#CED806",
  },
  VCheckLinesX: {
    lineWidth: 2 * coordinate.ratio,
    strokeStyle: "#CED806",
    //strokeStyle: 'rgba(100,149,237,0.5)',
  },
  VCheckLinesY: {
    lineWidth: 2 * coordinate.ratio,
    strokeStyle: "#CED806",
    //strokeStyle: 'rgba(100,149,237,0.5)',
  },
};

const TestPoint = {
  strokeStyle: "rgba(0,0,0,0)",
  fillStyle: "#fff",
  radius: 6 * coordinate.ratio,
  lineWidth: 1 * coordinate.ratio,
  out: {
    strokeStyle: "#3290FF",
    fillStyle: "rgba(255,255,255,0)",
    radius: 8 * coordinate.ratio,
    lineWidth: 3 * coordinate.ratio,
  },
};

const SVG = {
  fillStyle: "rgba(0,0,0,0)",
  strokeStyle: "#3290FF",
  lineWidth: 1 * coordinate.ratio,
};

export default {
  NormalLine,
  Road,
  CurveRoad,
  SVG,
  RoadEdge,
  CurveRoadEdge,
  Lane,
  CurveLan,
  Point,
  BaseLine,
  Circle,
  Elliptic,
  Text,
  CrossPoint,
  CurveLine,
  CurveRoadPoint,
  GuideLine,
  Magnifier,
  Font: CanvasFont,
  MeasureLine,
  PositionLine: MeasureLine,
  Measure,
  Element,
  TestPoint,
  RoadPoint,
  GuidePositionLine,
  SingleArrowLine,
  DoubleArrowLine,
  BasePoint,
  bgColor: "#fff",
};