fix: 方案四

src/views/page-config/ConfigEdit.vue

@@ -98,6 +98,11 @@
       <div ref="drawContainer" id="drawContainer" class="draw-container">
         <div id="shopEditContainer" v-moveable:1>
           <MapContainer />
+          <LabelPoint
+            ref="labelPointRef"
+            id="labelPoint"
+            style="position: absolute; left: -3000px; top: 0px"
+          />
         </div>
         <el-upload
           v-if="!hasBg"
@@ -148,6 +153,7 @@
 <script setup lang="ts">
   import ConfigDialog from './component/ConfigDrawer.vue';
   import ConfigFinish from './component/ConfigFinish.vue';
+  import LabelPoint from './component/mapContainer/LabelPoint.vue';
   import { storeToRefs } from 'pinia';
   import { ElMessage, ElInput } from 'element-plus';
   import { onBeforeUnmount, onMounted, ref } from 'vue';
@@ -162,7 +168,7 @@
   import { useRouter } from 'vue-router';
 
   const mapEditor = useMapEditor();
-  const { bgImg, addedShops, activeShop } = storeToRefs(mapEditor);
+  const { bgImg, addedShops, activeShop, labelPointRef } = storeToRefs(mapEditor);
   const { addShop, addBg, toJson, resetMap, createMap, deleteShop } = mapEditor;
 
   const router = useRouter();

src/views/page-config/component/mapContainer/LabelPoint.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="mapRef" id="mapRef" :style="{ display: 'flex', color: props.shop.bgColor }">
+  <div ref="mapRef" id="mapRef" :style="{ display: 'flex', color: shop.bgColor }">
     <svg width="32px" height="39px" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <linearGradient x1="84.362%" y1="100%" x2="15.638%" y2="0%" id="prefix__a">
@@ -88,11 +88,8 @@
           />
         </g>
       </svg>
-      <span
-        class="text-block"
-        :style="{ fontSize: props.shop.fontSize, color: props.shop.fontColor }"
-      >
-        {{ props.shop.name }}
+      <span class="text-block" :style="{ fontSize: shop.fontSize, color: shop.fontColor }">
+        {{ shop.name }}
       </span>
     </div>
   </div>
@@ -103,13 +100,15 @@
   import html2canvas from 'html2canvas';
   import { MapWorkShopInfoItem } from '../../stores/useMapEditor';
 
-  const props = defineProps<{ shop: MapWorkShopInfoItem; getSvg: (url: string) => void }>();
+  // const props = defineProps<{ shop: MapWorkShopInfoItem; getSvg?: (url: string) => void }>();
+
+  const shop = ref<MapWorkShopInfoItem>({} as MapWorkShopInfoItem);
 
   const mapRef = ref<HTMLDivElement>();
   const img = ref('');
 
-  onMounted(() => {
-    html2canvas(mapRef.value!, {
+  const getImages = () => {
+    return html2canvas(mapRef.value!, {
       width: 213,
       height: 44,
       useCORS: true,
@@ -117,9 +116,38 @@
       backgroundColor: 'transparent',
     }).then((canvas) => {
       img.value = canvas.toDataURL('images/jpg');
-      props.getSvg(img.value);
+      return canvas.toDataURL('images/jpg');
     });
+  };
+
+  const setShop = (data: MapWorkShopInfoItem) => {
+    // shop.value = data;
+    return html2canvas(mapRef.value!, {
+      width: 213,
+      height: 44,
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: 'transparent',
+    }).then((canvas) => {
+      img.value = canvas.toDataURL('images/jpg');
+      return canvas.toDataURL('images/jpg');
+    });
+  };
+
+  onMounted(() => {
+    // html2canvas(mapRef.value!, {
+    //   width: 213,
+    //   height: 44,
+    //   useCORS: true,
+    //   allowTaint: true,
+    //   backgroundColor: 'transparent',
+    // }).then((canvas) => {
+    //   img.value = canvas.toDataURL('images/jpg');
+    //   props.getSvg && props.getSvg(img.value);
+    // });
   });
+
+  defineExpose({ getImages, setShop });
 </script>
 
 <style scoped>

src/views/page-config/component/mapContainer/MapContainer.vue

@@ -16,7 +16,7 @@
           <v-image :config="getPointConfig(item)" />
           <!-- <v-image :config="getRectConfig(item)" /> -->
         </v-group>
-        <v-transformer ref="transformerRef" />
+        <v-transformer ref="transformerRef" :config="transformerConfig" />
       </v-layer>
     </v-stage>
   </div>
@@ -87,22 +87,23 @@
     };
   };
 
-  const handleStageMouseDown = (e) => {
-    console.log(e);
+  const transformerConfig = {
+    keepRatio: true,
+    rotateEnabled: false,
+    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+  };
 
+  const handleStageMouseDown = (e) => {
     if (e.target.attrs.name === 'bg') {
       selectedShape = -1;
       updateTransformer();
     }
 
     if (e.target.parent.attrs.name === 'group') {
-      console.log(e.target.parent.id());
-
       if (e.target.parent.id() === selectedShape) {
         return;
       }
       selectedShape = e.target.parent.id();
-      console.log(selectedShape);
 
       updateTransformer();
     }
@@ -113,12 +114,9 @@
   const updateTransformer = () => {
     const transformerNode = transformerRef.value!.getNode();
     const layer = layerRef.value!.getNode().getLayer();
-    console.log(layer);
 
     if (selectedShape >= 0) {
       const selectedNode = layer.findOne('#' + selectedShape);
-      console.log(selectedNode);
-
       (transformerNode as Konva.Transformer).nodes([selectedNode!]);
     } else {
       (transformerNode as Konva.Transformer).nodes([]);

src/views/page-config/stores/useMapEditor.ts

@@ -43,6 +43,8 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
   /** konva elements refs */
   const bgImage = ref<HTMLImageElement>(new Image());
 
+  const labelPointRef = ref<HTMLDivElement>();
+
   const addBg = () => {
     const imgUrl = urlJoin(globSetting.imgUrl!, bgImg.value);
     console.log(imgUrl);
@@ -92,24 +94,29 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
   };
 
   const getSvgImages = (shop: MapWorkShopInfoItem): MapWorkShopInfoItem => {
-    const tempDiv = document.createElement('div') as HTMLDivElement;
-    tempDiv.setAttribute('style', `position: absolute; left: -3000px; top: 0px;`);
-    const parentEl = document.getElementById('shopEditContainer') as HTMLDivElement;
-    parentEl.append(tempDiv);
+    // const tempDiv = document.createElement('div') as HTMLDivElement;
+    // tempDiv.setAttribute('style', `position: absolute; left: -3000px; top: 0px;`);
+    // const parentEl = document.getElementById('shopEditContainer') as HTMLDivElement;
+    // parentEl.append(tempDiv);
+
+    const labelPoint = document.getElementById('labelPoint')!;
 
     const svgImg = new Image();
     svgImg.onload = () => {
-      tempDiv?.remove();
+      // tempDiv?.remove();
       addedShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
       showShops.value.find((item) => item.id === shop.id)!.pointSvg = svgImg;
     };
-    const pointSvg = h(LabelPoint, {
-      shop,
-      getSvg: (url: string) => {
-        svgImg.src = url;
-      },
+    // const pointSvg = h(LabelPoint, {
+    //   shop,
+    //   getSvg: (url: string) => {
+    //     svgImg.src = url;
+    //   },
+    // });
+    // render(pointSvg, tempDiv);
+    labelPointRef.value.setShop(shop).then((url) => {
+      svgImg.src = url;
     });
-    render(pointSvg, tempDiv);
 
     return { ...shop };
   };
@@ -139,6 +146,7 @@ export const useMapEditor = defineStore('home-map-ediotr', () => {
     showShops,
     activeShop,
     bgImage,
+    labelPointRef,
     addShop,
     addBg,
     toJson,