添加绘制相关类

src/components/main-panel/index.vue

@@ -8,6 +8,7 @@
     <Menu
       v-if="menus"
       :menu="menus"
+      :class="{fill: isFull}"
       :active-key="activeMenuKey"
       @update:active-key="val => emit('update:activeMenuKey', val)"
     />
@@ -102,4 +103,8 @@ const layoutClass = computed(() => ({
     }
   }
 }
+
+.fill {
+  left: calc(-1 * var(--editor-menu-width))
+}
 </style>

src/graphic/CanvasStyle/default.js

@@ -103,9 +103,8 @@ const Measure = {
 };
 
 const NormalLine = {
-  strokeStyle: "#CED806",
+  strokeStyle: "#000",
   lineWidth: 2,
-  dash: [3, 2, 2],
 };
 const GuideLine = {
   strokeStyle: "#CED806",

src/graphic/CanvasStyle/focus.js

@@ -6,6 +6,12 @@ const Road = {
   strokeStyle: "#3290FF",
 };
 
+const NormalLine = {
+  ...def.NormalLine,
+  lineWidth: 2,
+  strokeStyle: "#3290FF",
+}
+
 const Magnifier = {
   ...def.Magnifier
 }
@@ -67,5 +73,6 @@ export default {
   CurveRoad,
   RoadEdge,
   Magnifier,
+  NormalLine,
   CurveRoadEdge,
 };

src/graphic/CanvasStyle/select.js

@@ -6,6 +6,11 @@ const Road = {
   strokeStyle: "#3290FF",
 };
 
+const NormalLine = {
+  ...def.NormalLine,
+  lineWidth: 2,
+  strokeStyle: "#3290FF",
+}
 const Arrow = {
   lineWidth: 2,
   strokeStyle: "red",
@@ -62,6 +67,7 @@ export default {
   ControlPoint,
   CurveRoad,
   RoadEdge,
+  NormalLine,
   CurveRoadEdge,
   Arrow
 };

src/graphic/Layer.js

@@ -202,7 +202,6 @@ export default class Layer {
         if (seleteItem != null) {
           console.log("选中：" + seleteItem.vectorId);
         } else {
-          console.log("什么也没选中");
         }
         break;
       case LayerEvents.PanBackGround:

src/graphic/Renderer/Draw.js

@@ -408,14 +408,18 @@ export default class Draw {
       ctx.strokeStyle = vector.arrowColor;
     }
     ctx.beginPath();
-
     ctx.moveTo(start.x, start.y);
     ctx.lineTo(end.x, end.y);
 
-    const lines = mathUtil.getArrow(start, end);
-    ctx.moveTo(lines[0].x, lines[0].y);
-    ctx.lineTo(lines[1].x, lines[1].y);
-    ctx.lineTo(lines[2].x, lines[2].y);
+    const dires = vector.category === UIEvents.MeasureLine
+      ? [[start, end], [end, start]]
+      : [[start, end]]
+    for (let [start, end] of dires) {
+      const lines = mathUtil.getArrow(start, end);
+      ctx.moveTo(lines[0].x, lines[0].y);
+      ctx.lineTo(lines[1].x, lines[1].y);
+      ctx.lineTo(lines[2].x, lines[2].y);
+    }
     ctx.stroke();
     ctx.restore();
 
@@ -560,13 +564,14 @@ export default class Draw {
   }
 
   drawLine(vector) {
+    console.log(vector)
     if ([UIEvents.Arrow, UIEvents.MeasureLine].includes(vector.category)) {
       return this.drawArrow(vector);
     }
-    let start = dataService.getPoint(vector.startId);
-    start = coordinate.getScreenXY(start);
-    let end = dataService.getPoint(vector.endId);
-    end = coordinate.getScreenXY(end);
+    const startReal = dataService.getPoint(vector.startId);
+    const start = coordinate.getScreenXY(startReal);
+    const endReal = dataService.getPoint(vector.endId);
+    const end = coordinate.getScreenXY(endReal);
 
     this.context.save();
     const style = help.setVectorStyle(
@@ -582,6 +587,8 @@ export default class Draw {
     this.context.lineTo(end.x, end.y);
     this.context.stroke();
     this.context.restore();
+    this.drawPoint(startReal)
+    this.drawPoint(endReal)
   }
 
   drawElementLine(element) {

src/graphic/enum/UIEvents.js

@@ -8,7 +8,7 @@ const UIEvents = {
   // 箭头
   Arrow: "ArrowLine",
   // 测量
-  MeasureLine: "measure",
+  MeasureLine: "MeasureLine",
   // 文字
   Text: "text", //这个是标注，暂时这样
   //svg

src/hook/useGraphic.ts

@@ -19,6 +19,15 @@ const newsletter = ref<{
   focusVector?: FocusVector
 }>({ selectUI: null, focusVector: null });
 
+const changeIndex = ref(0)
+export const changeStore = () => changeIndex.value++
+export const useChange = (fn: () => void) => {
+  return watchEffect(() => {
+    changeIndex.value;
+    fn()
+  })
+}
+
 export const graphicState = ref({
   canRevoke: false,
   canRecovery: false,

src/views/graphic/geos/arrow.vue

@@ -16,25 +16,28 @@
 import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
 import UiInput from "@/components/base/components/input/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {drawRef, FocusVector, uiType, UIType} from '@/hook/useGraphic'
+import {drawRef, FocusVector, uiType, UIType, useChange} from '@/hook/useGraphic'
 import {computed, ref, watch, watchEffect} from "vue";
 import {dataService} from "@/graphic/Service/DataService";
 import GeoActions from "@/graphic/enum/GeoActions"
 import {debounce} from "@/utils";
+import VectorCategory from "@/graphic/enum/VectorCategory";
 
 const props = defineProps<{geo: FocusVector}>()
 const vector = computed(() => dataService.getLine(props.geo.vectorId))
 const color = ref("#000000")
-watchEffect(() => {
+useChange(() => {
   color.value = vector.value.arrowColor
 })
-watch(
-  () => [color.value],
-  debounce(([color]) => {
-    vector.value.setArrowColor(color)
-    drawRef.value.renderer.autoRedraw()
-  }, 500)
-)
+
+
+const syncVector = ([color]) => {
+  vector.value.setColor(color)
+  drawRef.value.renderer.autoRedraw()
+  drawRef.value.history.save()
+}
+
+watch(() => [color.value], debounce(syncVector, 500))
 
 const menus = [
   {
@@ -59,6 +62,10 @@ const menus = [
   }
 ]
 
+if (props.geo.category === VectorCategory.Line.NormalLine) {
+  menus.shift()
+}
+
 </script>
 
 <style scoped lang="scss">

src/views/graphic/geos/circle.vue

@@ -15,7 +15,7 @@
 import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
 import UiInput from "@/components/base/components/input/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {drawRef, FocusVector, uiType, UIType} from '@/hook/useGraphic'
+import {drawRef, FocusVector, uiType, UIType, useChange} from '@/hook/useGraphic'
 import {computed, ref, watch, watchEffect} from "vue";
 import {dataService} from "@/graphic/Service/DataService";
 import {debounce} from "@/utils";
@@ -25,16 +25,17 @@ import GeoActions from "@/graphic/enum/GeoActions";
 const props = defineProps<{geo: FocusVector}>()
 const vector = computed(() => dataService.getCircle(props.geo.vectorId))
 const color = ref("#000000")
-watchEffect(() => {
+useChange(() => {
   color.value = vector.value.color
 })
-watch(
-  () => [color.value],
-  debounce(([color]) => {
-    vector.value.setColor(color)
-    drawRef.value.renderer.autoRedraw()
-  }, 500)
-)
+
+const syncVector = ([color]) => {
+  vector.value.setColor(color)
+  drawRef.value.renderer.autoRedraw()
+  drawRef.value.history.save()
+}
+
+watch(() => [color.value], debounce(syncVector, 500))
 const menus = [
   {
     key: 'color',

src/views/graphic/geos/index.ts

@@ -3,9 +3,13 @@ import Arrow from './arrow.vue'
 import Text from './text.vue'
 import Circle from './circle.vue'
 import magnifier from './magnifier.vue'
+import VectorCategory from "@/graphic/enum/VectorCategory";
+
 
 export default {
   [VectorType.ArrowLine]: Arrow,
+  [VectorCategory.Line.MeasureLine]: Arrow,
+  [VectorCategory.Line.NormalLine]: Arrow,
   [VectorType.Text]: Text,
   [VectorType.Circle]: Circle,
   [VectorType.Magnifier]: magnifier

src/views/graphic/geos/magnifier.vue

@@ -34,7 +34,7 @@ const menus = [
   {
     key: 'reset',
     text: "恢复默认",
-    onClick: () => updateURL(null)
+    onClick: () => syncVector(null)
   },
   {
     key: 'del',
@@ -48,16 +48,17 @@ const menus = [
 watch(
   () => [file.value],
   async ([blob]) => {
-    updateURL(getStaticFile(await uploadImage(blob)))
+    syncVector(getStaticFile(await uploadImage(blob)))
   }
 )
 
-const updateURL = (url: string) => {
+
+const syncVector = (url: string) => {
   vector.value.setSrc(url)
   vector.value.setImageData()
     .then(() => {
       drawRef.value.renderer.autoRedraw()
-      console.log("????", vector.value)
+      drawRef.value.history.save()
     })
 }
 

src/views/graphic/geos/text.vue

@@ -38,7 +38,7 @@
 import GeoTeleport from "@/views/graphic/geos/geo-teleport.vue";
 import UiInput from "@/components/base/components/input/index.vue";
 import UiIcon from "@/components/base/components/icon/index.vue";
-import {FocusVector, drawRef} from '@/hook/useGraphic'
+import {FocusVector, drawRef, useChange} from '@/hook/useGraphic'
 import {computed, ref, watch, watchEffect} from "vue";
 import {dataService} from "@/graphic/Service/DataService";
 import {debounce} from '@/utils'
@@ -57,6 +57,7 @@ const syncVector = ([text, size, color]) => {
   vector.value.setColor(color)
   vector.value.setFontSize(size)
   drawRef.value.renderer.autoRedraw()
+  drawRef.value.history.save()
 }
 
 watchEffect(() => {
@@ -65,7 +66,8 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() => {
+useChange(() => {
+  console.log(vector.value)
   color.value = vector.value.color
   size.value = vector.value.fontSize
   text.value = vector.value.value

src/views/graphic/header.vue

@@ -38,7 +38,7 @@
 import UiIcon from "@/components/base/components/icon/index.vue";
 import UiButton from "@/components/base/components/button/index.vue";
 import {Mode} from './menus'
-import {drawRef, graphicState} from '@/hook/useGraphic'
+import {drawRef, graphicState, changeStore} from '@/hook/useGraphic'
 import {computed, watchEffect} from "vue";
 import {router, writeRouteName} from '@/router'
 import {types, AccidentPhoto, accidentPhotos} from '@/store/accidentPhotos'
@@ -57,16 +57,25 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
     {
       text: "回退",
       disable: !graphicState.value.canRevoke,
-      onClick: () => drawRef.value.uiControl.menu_revoke()
+      onClick: () => {
+        drawRef.value.uiControl.menu_revoke()
+        changeStore()
+      }
     },
     {
       text: "前进",
       disable: !graphicState.value.canRecovery,
-      onClick: () => drawRef.value.uiControl.menu_recovery()
+      onClick: () => {
+        drawRef.value.uiControl.menu_recovery()
+        changeStore()
+      }
     },
     {
       text: "清除",
-      onClick: () => drawRef.value.uiControl.menu_clear()
+      onClick: () => {
+        drawRef.value.uiControl.menu_clear()
+        changeStore()
+      }
     },
     {
       text: "恢复",
@@ -91,6 +100,7 @@ const saveHandler = () => {
     ...data.value,
     data: JSON.parse(JSON.stringify(drawRef.value.load.save()))
   }
+  console.log("screenShot", drawRef.value.uiControl.screenShot())
   const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value
   const index = origin.indexOf(data.value)
   if (~index) {