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 BaseLine = {
  strokeStyle: "#3290FF",
  lineWidth: 1 * coordinate.ratio,
};
const NormalLine = {
  ...def.NormalLine,
  lineWidth: 2 * coordinate.ratio,
  strokeStyle: "#3290FF",
};
const ArrowLine = {
  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,
  }
}



export default {
  Road,
  Text,
  Point,
  TestPoint,
  RoadPoint,
  CurveRoadPoint,
  CrossPoint,
  CurveRoad,
  BasePoint,
  BaseLine,
  RoadEdge,
  NormalLine,
  CurveRoadEdge,
  ArrowLine,
};