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

import def from "./default.js";
import { coordinate } from "@/graphic/Coordinate.js";

const Road = {
  ...def.Road,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};

const Circle = {
  strokeStyle: "red",
  fillStyle: "rgba(0,0,0,0)",
  lineWidth: 2 * coordinate.ratio,
  radius: 30 * coordinate.ratio,
};
const MeasureLine = {
  strokeStyle: "red",
  lineWidth: 4 * coordinate.ratio,
  text: {
    fontSize: 12,
    fillColor: "#fff",
    padding: 6 * coordinate.ratio,
    backColor: "red",
  },
};

const BaseLine = {
  strokeStyle: "#3290FF",
  lineWidth: 1 * coordinate.ratio,
};
const NormalLine = {
  ...def.NormalLine,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};
const CurveLine = {
  ...def.CurveLine,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};
const SingleArrowLine = {
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "red",
};
const DoubleArrowLine = {
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "red",
};
const CurveRoad = {
  ...def.CurveRoad,
  ...Road,
  lineWidth: 2 * coordinate.ratio,
};

const Text = {
  ...def.Text,
  strokeStyle: "#00C8AF",
  fillStyle: "#00C8AF",
};

const RoadEdge = {
  ...def.RoadEdge,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};

const CurveRoadEdge = {
  ...def.CurveRoadEdge,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};

const Point = {
  ...def.Point,
  fillStyle: "#3290FF",
};

const RoadPoint = {
  ...Point,
};

const CurveRoadPoint = {
  ...def.CurveRoadPoint,
  ...Point,
};

const CrossPoint = {
  ...def.CrossPoint,
  fillStyle: "#3290FF",
};

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

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(50,144,255,0.2)",
  strokeStyle: "black",
  lineWidth: 2 * coordinate.ratio,
};

export default {
  Road,
  Text,
  Point,
  TestPoint,
  RoadPoint,
  SVG,
  CurveRoadPoint,
  CrossPoint,
  CurveRoad,
  MeasureLine,
  BasePoint,
  BaseLine,
  CurveLine,
  Circle,
  RoadEdge,
  NormalLine,
  CurveRoadEdge,
  SingleArrowLine,
  DoubleArrowLine,
};