制作新需求

src/graphic/CanvasStyle/index.js

@@ -1,9 +1,11 @@
-import def from './default.js'
-import select from './select.js'
-import focus from './focus.js'
+import def from "./default.js";
+import select from "./select.js";
+import focus from "./focus.js";
+import screen from "./screen.js";
 
 export default {
   ...def,
   Select: select,
-  Focus: focus
-}
+  Focus: focus,
+  Screen: screen,
+};

src/graphic/CanvasStyle/screen.js

@@ -0,0 +1,258 @@
+import { coordinate } from "../Coordinate.js";
+
+const Road = {
+  strokeStyle: "#000",
+  lineWidth: 1 * coordinate.ratio,
+};
+
+const RoadEdge = {
+  ...Road,
+  fillStyle: "rgba(0,0,0,0)",
+  lineWidth: 1 * coordinate.ratio,
+  strokeStyle: "#000",
+};
+
+const Lane = {
+  ...RoadEdge,
+  lineWidth: 1 * coordinate.ratio,
+  strokeStyle: "#000",
+  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: "#000",
+  lineWidth: 1 * coordinate.ratio,
+  fillStyle: "rgba(0,0,0,0)",
+  radius: 10 * coordinate.ratio,
+  target: {
+    radius: 100 * coordinate.ratio,
+    realRadius: 20 * coordinate.ratio,
+    strokeStyle: "#000",
+    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: "#000",
+  fontSize: 14,
+  strokeStyle_adding: "#000",
+  fillStyle_adding: "#000",
+  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: "#000",
+  fillStyle: "#000",
+  radius: 4 * coordinate.ratio,
+  lineWidth: 4 * coordinate.ratio,
+};
+const NormalPoint = {
+  ...Point,
+  fillStyle: "#fff",
+};
+
+const RoadPoint = {
+  ...Point,
+};
+
+const CurveRoadPoint = {
+  ...Point,
+};
+
+const CrossPoint = {
+  ...Point,
+  strokeStyle: "#000",
+  radius: 2 * coordinate.ratio,
+};
+
+const Circle = {
+  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: "#000",
+  lineWidth: 1 * coordinate.ratio,
+};
+const ZebraCrossing = {
+  strokeStyle: "#000",
+  lineWidth: 20 * coordinate.ratio,
+  dash: [2 * coordinate.ratio, 4 * 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: "#000",
+  lineWidth: 2 * coordinate.ratio,
+  text: {
+    fontSize: 12,
+    fillColor: "#000",
+    padding: 6 * coordinate.ratio,
+    backColor: "#000",
+  },
+};
+const BaseLine = {
+  strokeStyle: "#000",
+  fillStyle: "#000",
+  lineWidth: 1 * coordinate.ratio,
+};
+
+const BasePoint = {
+  strokeStyle: "rgba(255,255,255,0)",
+  fillStyle: "#000",
+  radius: 6 * coordinate.ratio,
+  lineWidth: 4 * coordinate.ratio,
+  out: {
+    strokeStyle: "#000",
+    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: "#000",
+    fillStyle: "rgba(255,255,255,0)",
+    radius: 8 * coordinate.ratio,
+    lineWidth: 3 * coordinate.ratio,
+  },
+};
+
+const SVG = {
+  fillStyle: "#000",
+  strokeStyle: "#000",
+  lineWidth: 1 * coordinate.ratio,
+};
+
+export default {
+  NormalLine,
+  Road,
+  CurveRoad,
+  SVG,
+  RoadEdge,
+  CurveRoadEdge,
+  Lane,
+  CurveLan,
+  Point,
+  BaseLine,
+  Circle,
+  Text,
+  CrossPoint,
+  CurveLine,
+  CurveRoadPoint,
+  GuideLine,
+  Magnifier,
+  Font: CanvasFont,
+  MeasureLine,
+  FreeMeasureLine: MeasureLine,
+  PositionLine: MeasureLine,
+  LocationLineByFixPoint: MeasureLine,
+  LocationLineByBasePoint: MeasureLine,
+  NormalPoint,
+  ZebraCrossing,
+  Measure,
+  Element,
+  TestPoint,
+  RoadPoint,
+  GuidePositionLine,
+  ExtendedPositionLine: GuidePositionLine,
+  GuideLocationLine: GuidePositionLine,
+
+  SingleArrowLine,
+  DoubleArrowLine,
+  BasePoint,
+  bgColor: "#fff",
+};

src/graphic/Renderer/Draw.js

@@ -16,7 +16,12 @@ export const help = {
   getVectorStyle(vector, geoType = vector.geoType) {
     const geoId = vector?.vectorId;
     if (!geoId || Settings.screenMode) {
-      return [Style[geoType], undefined];
+      return [
+        Settings.screenMode && Style["Screen"][geoType]
+          ? Style["Screen"][geoType]
+          : Style[geoType],
+        undefined,
+      ];
     }
 
     const itemsEntry = [
@@ -24,6 +29,7 @@ export const help = {
       [stateService.getDraggingItem(), "Dragging"],
       [stateService.getFocusItem(), "Focus"],
     ];
+
     let currentAttr;
 
     //console.log(itemsEntry)
@@ -146,10 +152,8 @@ export const help = {
     ctx.closePath();
   },
   getRealDistance(p1, p2) {
-    return (
-      Math.round(
-        (mathUtil.getDistance(p1, p2) * coordinate.res * 100) / coordinate.ratio
-      ) / 100
+    return Math.round(
+      (mathUtil.getDistance(p1, p2) * coordinate.res * 100) / coordinate.ratio
     );
   },
   getPerpendicularPoint(p1, p2, p3, d) {
@@ -184,27 +188,30 @@ export const help = {
       [start, end] = [end, start];
     }
 
-    const angle =
-      (Math.atan2(end.y - start.y, end.x - start.x) * 180) / Math.PI;
-    const center = mathUtil.lineCenter(start, end);
-
+    const at2 = Math.atan2(end.y - start.y, end.x - start.x) * 180;
+    const angle = at2 / Math.PI;
+    const fontSize = (style.fontSize || 10) * coordinate.ratio;
+    const vline = mathUtil.getVerticalLineByDistance(start, end, fontSize);
+    const center = mathUtil.lineCenter(vline[0], vline[1]);
+    console.log(center, start, end);
     ctx.save();
     ctx.translate(center.x, center.y);
-    // ctx.rotate((angle * Math.PI) / 180);
-    ctx.font = `${(style.fontSize || 10) * coordinate.ratio}px Microsoft YaHei`;
+    ctx.rotate((angle * Math.PI) / 180);
+
+    ctx.font = `${fontSize}px Microsoft YaHei`;
     const textCenter = help.getTextCenter(ctx, text);
     ctx.fillStyle = style.backColor;
     if (!Settings.screenMode) {
-      const padding = style.padding;
-      help.roundRect(
-        ctx,
-        -textCenter.x - padding,
-        textCenter.y - padding,
-        textCenter.width + 2 * padding,
-        textCenter.height + 2 * padding,
-        textCenter.height / 2 + padding
-      );
-      ctx.fill();
+      // const padding = style.padding;
+      // help.roundRect(
+      //   ctx,
+      //   -textCenter.x - padding,
+      //   textCenter.y - padding,
+      //   textCenter.width + 2 * padding,
+      //   textCenter.height + 2 * padding,
+      //   textCenter.height / 2 + padding
+      // );
+      // ctx.fill();
     }
     ctx.fillStyle = style.fillColor;
     ctx.fillText(text, -textCenter.x, -textCenter.y);
@@ -576,6 +583,7 @@ export default class Draw {
     } else {
       width = vector.singleRoadWidth / vector.singleRoadDrivewayCount;
     }
+    console.log(width);
     width = width.toFixed(0);
 
     vector.roadWidthTipsPos.forEach((line) => {
@@ -586,7 +594,7 @@ export default class Draw {
       const [style] = help.setVectorStyle(this.context, vector, ["NormalLine"]);
       help.drawStyleLine(this.context, [start, end]);
       help.drawLineText(this.context, start, end, width, {
-        fillColor: "#fff",
+        fillColor: Settings.screenMode ? "#000" : "#fff",
         padding: 6,
         fontSize: 12,
         backColor: style.strokeStyle,
@@ -1142,8 +1150,8 @@ export default class Draw {
       if (text) {
         style = {
           ...style,
-          fillStyle: text.color,
-          strokeStyle: text.color,
+          fillStyle: Settings.screenMode ? "#000" : text.color,
+          strokeStyle: Settings.screenMode ? "#000" : text.color,
         };
       }
     }
@@ -1172,7 +1180,10 @@ export default class Draw {
       ctx.restore();
     };
 
-    if (Settings.selectBasePointId === vector.vectorId) {
+    if (
+      Settings.selectBasePointId === vector.vectorId &&
+      !Settings.screenMode
+    ) {
       style = {
         ...style,
         fillStyle: "rgba(255, 143, 40, 1)",
@@ -1265,8 +1276,8 @@ export default class Draw {
     }
     this.context.save();
     const [_, foo] = help.setVectorStyle(this.context, vector);
-
-    this.context.fillStyle = vector.color;
+    const color = Settings.screenMode ? "#000" : vector.color;
+    this.context.fillStyle = color;
     this.context.textBaseline = "bottom";
     this.context.font = `${
       vector.fontSize * coordinate.ratio
@@ -1301,7 +1312,11 @@ export default class Draw {
     this.context.restore();
     vector.displayPoint &&
       this.drawPoint(
-        { ...vector.center, color: vector.color, fillColor: vector.color },
+        {
+          ...vector.center,
+          color: color,
+          fillColor: color,
+        },
         true
       );
 
@@ -1387,9 +1402,9 @@ export default class Draw {
       this.context,
       coordinate.getScreenXY(startReal),
       coordinate.getScreenXY(endReal),
-      (vector.value
+      vector.value
         ? Math.round(vector.value * 100) / 100
-        : help.getRealDistance(startReal, endReal)) + "m",
+        : help.getRealDistance(startReal, endReal),
       style
     );
   }
@@ -1483,6 +1498,7 @@ export default class Draw {
       this.context.setLineDash(style.dash);
     }
 
+    console.log(vector);
     help.drawStyleLine(this.context, [start, end], vector.style, vector.weight);
     // vector.category = VectorCategory.Line.LocationLineByFixPoint;
     switch (vector.category) {

src/graphic/Util/MathUtil.js

@@ -73,6 +73,35 @@ export default class MathUtil {
     return parameter;
   }
 
+  // 沿着直线垂直方向移动len后的直线
+  getVerticalLineByDistance(p1, p2, translationDistance) {
+    // 计算线段的斜率
+    var slope = p2.x - p1.x === 0 ? 1 : (p2.y - p1.y) / (p2.x - p1.x);
+
+    // 计算垂直向量
+    var perpendicularVector = { x: -slope, y: 1 };
+
+    // 将垂直向量归一化为单位向量
+    var length = Math.sqrt(
+      perpendicularVector.x * perpendicularVector.x +
+        perpendicularVector.y * perpendicularVector.y
+    );
+    perpendicularVector.x /= length;
+    perpendicularVector.y /= length;
+
+    // 计算垂直方向平移后的新坐标
+    var newP1 = {
+      x: p1.x + perpendicularVector.x * translationDistance,
+      y: p1.y + perpendicularVector.y * translationDistance,
+    };
+    var newP2 = {
+      x: p2.x + perpendicularVector.x * translationDistance,
+      y: p2.y + perpendicularVector.y * translationDistance,
+    };
+
+    return [newP1, newP2];
+  }
+
   create2AngleLine(point, angle, driftAngle) {
     let line1 = this.createLine2(point, angle - driftAngle / 2);
     let line2 = this.createLine2(point, angle + driftAngle / 2);
@@ -1913,8 +1942,8 @@ export default class MathUtil {
    * @returns
    */
   getLinePointPos(startPoint, endPoint, targetPointDistance) {
-    if(!targetPointDistance){
-      targetPointDistance = Constant.roadWidthTipsDistance
+    if (!targetPointDistance) {
+      targetPointDistance = Constant.roadWidthTipsDistance;
     }
     let lineLength = this.getDistance(startPoint, endPoint);
 

src/views/graphic/setting.vue

@@ -5,23 +5,40 @@
         <div>
           <p>
             <span>默认单车道宽度</span>
-            <span>单位： m</span>
+            <span>单位： mm</span>
           </p>
-          <ui-input v-model="data.singleRoadWidth" width="100%">
+          <ui-input
+            :modelValue="data.singleRoadWidth * 100"
+            @update:modelValue="(val) => (data.singleRoadWidth = val / 100)"
+            width="100%"
+          >
             <template v-slot:icon>
-              <ui-icon type="measure" ctrl @click="setSceneSingleRoadWidth" class="measure_icon" />
+              <ui-icon
+                type="measure"
+                ctrl
+                @click="setSceneSingleRoadWidth"
+                class="measure_icon"
+              />
             </template>
           </ui-input>
         </div>
         <div>
-
           <p>
             <span>默认隔离带宽度</span>
-            <span>单位： m</span>
+            <span>单位： mm</span>
           </p>
-          <ui-input v-model="data.roadQuarantineWidth" width="100%">
+          <ui-input
+            :modelValue="data.roadQuarantineWidth * 100"
+            @update:modelValue="(val) => (data.roadQuarantineWidth = val / 100)"
+            width="100%"
+          >
             <template v-slot:icon>
-              <ui-icon type="measure" ctrl @click="setSceneRoadQuarantineWidth" class="measure_icon" />
+              <ui-icon
+                type="measure"
+                ctrl
+                @click="setSceneRoadQuarantineWidth"
+                class="measure_icon"
+              />
             </template>
           </ui-input>
         </div>
@@ -32,12 +49,12 @@
           </p>
           <div class="select-boxs">
             <span
-                v-for="option in lineWidthOption"
-                :key="option.value"
-                :class="{active: option.value === data.lineWidth}"
-                @click="data.lineWidth = option.value"
+              v-for="option in lineWidthOption"
+              :key="option.value"
+              :class="{ active: option.value === data.lineWidth }"
+              @click="data.lineWidth = option.value"
             >
-              {{option.label}}
+              {{ option.label }}
             </span>
           </div>
         </div>
@@ -48,43 +65,43 @@
 <script setup lang="ts">
 import UiConfirm from "@/components/base/components/dialog/Confirm.vue";
 import UiInput from "@/components/base/components/input/index.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {trackMeasureWidth, trackMode} from "@/views/scene/trackMeasureWidth";
-import { drawRef } from '@/hook/useGraphic'
+import { trackMeasureWidth, trackMode } from "@/views/scene/trackMeasureWidth";
+import { drawRef } from "@/hook/useGraphic";
 import UiButton from "@/components/base/components/button/index.vue";
 
-const props = defineProps<{ close?: () => void }>()
+const props = defineProps<{ close?: () => void }>();
 
-const data = ref({...drawRef.value.uiControl.getDefaultSetting()})
+const data = ref({ ...drawRef.value.uiControl.getDefaultSetting() });
 const lineWidthOption = [
-  {label: 2, value: 2},
-  {label: 1.4, value: 1.4},
-  {label: 1, value: 1},
-  {label: 0.7, value: 0.7},
-  {label: 0.5, value: 0.5},
-  {label: 0.35, value: 0.35},
-]
+  { label: 2, value: 2 },
+  { label: 1.4, value: 1.4 },
+  { label: 1, value: 1 },
+  { label: 0.7, value: 0.7 },
+  { label: 0.5, value: 0.5 },
+  { label: 0.35, value: 0.35 },
+];
 
-console.log(data)
+console.log(data);
 
 const setSceneSingleRoadWidth = async () => {
-  const width = await trackMeasureWidth()
+  const width = await trackMeasureWidth();
   if (width !== null) {
-    data.value.singleRoadWidth = width
+    data.value.singleRoadWidth = width;
   }
-}
+};
 
 const setSceneRoadQuarantineWidth = async () => {
-  data.value.roadQuarantineWidth = await trackMeasureWidth()
-}
+  data.value.roadQuarantineWidth = await trackMeasureWidth();
+};
 
 const handler = (label) => {
-  if (label === 'ok') {
-    drawRef.value.uiControl.setDefaultSetting({...data.value})
+  if (label === "ok") {
+    drawRef.value.uiControl.setDefaultSetting({ ...data.value });
   }
-  props.close && props.close()
-}
+  props.close && props.close();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -113,10 +130,10 @@ const handler = (label) => {
     line-height: 32px;
     color: #fff;
     font-size: 14px;
-    background: rgba(255,255,255,0.1);
+    background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     &.active {
-      background: rgba(47,143,255,0.5);
+      background: rgba(47, 143, 255, 0.5);
     }
   }
 }