添加绘制相关类

src/components/base/assets/scss/editor/_menu.scss

@@ -9,7 +9,7 @@
     left: var(--editor-menu-left);
     top: var(--editor-head-height);
     bottom: 0;
-    z-index: 2000;
+    z-index: 2;
     overflow: hidden;
 
     backdrop-filter: blur(4px);

src/graphic/CanvasStyle/default.js

@@ -28,7 +28,7 @@ const Magnifier = {
   radius: 10,
   target: {
     radius: 100,
-    realRadius: 30,
+    realRadius: 50,
     strokeStyle: "#2F8FFF",
     lineWidth: 3
   }

src/graphic/Geometry/Magnifier.js

@@ -65,15 +65,21 @@ export default class Magnifier extends Geometry {
   }
 
   setImageData() {
+
     return new Promise((resolve, reject) => {
-      this.photoImage = new Image();
-      this.photoImage.src = this.photoUrl;
-      this.photoImage.onload = function () {
-        resolve();
-      };
-      this.photoImage.onerror = function () {
-        reject();
-      };
+      if (this.photoUrl) {
+        this.photoImage = new Image();
+        this.photoImage.src = this.photoUrl;
+        this.photoImage.onload = function () {
+          resolve();
+        };
+        this.photoImage.onerror = function () {
+          reject();
+        };
+      } else {
+        this.photoImage = null
+        resolve()
+      }
     });
   }
 }

src/graphic/Renderer/Draw.js

@@ -435,9 +435,7 @@ export default class Draw {
     const pt = coordinate.getScreenXY(vector.position);
     const target = coordinate.getScreenXY(vector.popPosition);
     const style = help.setVectorStyle(ctx, vector);
-    const radius =
-      ((vector.radius || style.radius) * coordinate.ratio * coordinate.zoom) /
-      coordinate.defaultZoom;
+    const radius = help.getReal(vector.radius || style.radius);
     const offset = radius / 2;
     const targetPts =
       style === Style.Focus.Magnifier
@@ -465,19 +463,20 @@ export default class Draw {
         img = vector.photoImage;
         imgBound = [0, 0, img.width, img.height];
       } else {
-        const size = style.target.realRadius;
+        const size = help.getReal(style.target.realRadius);
         const backImg = dataService.getBackgroundImg();
         img = backImg.imageData;
         const imgCenter = coordinate.getScreenXY(backImg.center);
         const start = {
-          x: imgCenter.x - img.width / 2,
-          y: imgCenter.y - img.height / 2,
+          x: imgCenter.x - help.getReal(img.width) / 2,
+          y: imgCenter.y - help.getReal(img.height) / 2 ,
         };
+        const ro = img.width / help.getReal(img.width)
         imgBound = [
-          pt.x - start.x - size,
-          pt.y - start.y - size,
-          size * 2,
-          size * 2,
+          (pt.x - start.x - size) * ro,
+          (pt.y - start.y - size) * ro,
+          (size * 2) * ro,
+            (size * 2) * ro,
         ];
       }
       const size = help.getReal(style.target.radius);

src/hook/useGraphic.ts

@@ -33,6 +33,7 @@ export const setCanvas = async (canvas: HTMLCanvasElement, data: Ref<AccidentPho
       (id, oldId) => {
         if (data.value) {
           oldId && drawRef.value.load.clear()
+          console.log("load", data.value)
           drawRef.value.load.load(data.value.data, {
             ...data.value.sceneData,
             backImage: getStaticFile(data.value.photoUrl)

src/store/accidentPhotos.ts

@@ -25,3 +25,7 @@ export const types = [
 ]
 
 export const accidentPhotos = ref<AccidentPhoto[]>([])
+
+watch(accidentPhotos, (val) => {
+  console.error(accidentPhotos.value[1])
+}, { deep: true, flush: "sync"})

src/views/graphic/geos/magnifier.vue

@@ -6,6 +6,7 @@
         <ui-icon type="del" class="icon" />
       </template>
       <ui-icon type="del" class="icon" v-if="data.key === 'del'" />
+      <ui-icon type="del" class="icon" v-if="data.key === 'reset'" />
     </template>
 
   </GeoTeleport>
@@ -31,6 +32,11 @@ const menus = [
     text: "拍照"
   },
   {
+    key: 'reset',
+    text: "恢复默认",
+    onClick: () => updateURL(null)
+  },
+  {
     key: 'del',
     text: "删除",
     onClick: () => {
@@ -42,18 +48,19 @@ const menus = [
 watch(
   () => [file.value],
   async ([blob]) => {
-    const url = getStaticFile(await uploadImage(blob))
-    const img = new Image()
-    img.src = url
-    img.onload = () => {
-      console.log(vector.value)
-      vector.value.setPhotoUrl(url)
-      vector.value.setPhotoImage(img)
-      drawRef.value.renderer.autoRedraw()
-    }
+    updateURL(getStaticFile(await uploadImage(blob)))
   }
 )
 
+const updateURL = (url: string) => {
+  vector.value.setSrc(url)
+  vector.value.setImageData()
+    .then(() => {
+      drawRef.value.renderer.autoRedraw()
+      console.log("????", vector.value)
+    })
+}
+
 </script>
 
 <style scoped lang="scss">

src/views/graphic/geos/text.vue

@@ -17,28 +17,54 @@
         <span class="font-size">{{ size }}</span>
       </template>
       <ui-icon type="del" class="del-icon" v-if="data.key === 'del'" />
-
+      <ui-icon type="del" class="del-icon" v-if="data.key === 'text'" />
     </template>
-
   </GeoTeleport>
+
+  <div class="text-model" v-if="updateText">
+    <div class="text-input">
+      <ui-input
+          ref="inputTextRef"
+          v-model="text"
+          width="100%"
+          height="64px"
+          @blur="updateText = false"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 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 {uiType, UIType, FocusVector, drawRef} from '@/hook/useGraphic'
+import {FocusVector, drawRef} from '@/hook/useGraphic'
 import {computed, ref, watch, watchEffect} from "vue";
 import {dataService} from "@/graphic/Service/DataService";
-import {debounce} from '@/utils/index'
+import {debounce} from '@/utils'
 import GeoActions from "@/graphic/enum/GeoActions";
 
 const props = defineProps<{geo: FocusVector}>()
+const inputTextRef = ref()
+const updateText = ref(false)
 const vector = computed(() => dataService.getText(props.geo.vectorId))
 const text = ref("")
 const color = ref("#000000")
 const size = ref(18)
 
+const syncVector = ([text, size, color]) => {
+  vector.value.setValue(text)
+  vector.value.setColor(color)
+  vector.value.setFontSize(size)
+  drawRef.value.renderer.autoRedraw()
+}
+
+watchEffect(() => {
+  if (inputTextRef.value) {
+    inputTextRef.value.vmRef.input.focus()
+  }
+})
+
 watchEffect(() => {
   color.value = vector.value.color
   size.value = vector.value.fontSize
@@ -46,12 +72,7 @@ watchEffect(() => {
 })
 watch(
   () => [text.value, size.value, color.value],
-  debounce(([text, size, color]) => {
-    vector.value.setValue(text)
-    vector.value.setColor(color)
-    vector.value.setFontSize(size)
-    drawRef.value.renderer.autoRedraw()
-  }, 500)
+  debounce(syncVector, 500)
 )
 
 const sizeOption = [];
@@ -68,6 +89,11 @@ const menus = [
     text: "文字大小"
   },
   {
+    key: 'text',
+    text: "修改文字",
+    onClick: () => updateText.value = true
+  },
+  {
     key: 'del',
     text: "删除",
     onClick: () => {
@@ -105,10 +131,32 @@ const menus = [
   z-index: 1;
   opacity: 0;
 }
+
+.text-model {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,.8);
+  z-index: 4
+}
+
+.text-input {
+  width: 785px;
+  height: 64px;
+  display: block;
+  margin: 176px auto 0;
+}
 </style>
 
 <style lang="scss">
 .select-floating.select-float.dire-top {
   margin-top: -10px;
 }
+
+.text-input .ui-input .text input {
+  font-size: 16px;
+  padding: 16px 21px;
+}
 </style>

src/views/graphic/header.vue

@@ -89,7 +89,7 @@ const menus = computed<{disable?: boolean, text: string, onClick: () => void}[]>
 const saveHandler = () => {
   const newData = {
     ...data.value,
-    data: drawRef.value.load.save()
+    data: JSON.parse(JSON.stringify(drawRef.value.load.save()))
   }
   const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value
   const index = origin.indexOf(data.value)