fix: 修改需求

src/view/case/draw/board/index.js

@@ -57,8 +57,11 @@ export const create = async (store, canvas) => {
       },
     };
     const update = (newData) => {
-      console.log("set", newData);
-      layer.uiControl.setAttributes(type, "update", { ...newData, version: 2 });
+      layer.uiControl.setAttributes(
+        type,
+        type === bgImage ? "upload" : "update",
+        { ...newData, version: 2 }
+      );
     };
     refs.bus.emit("selectShape", shape);
   });
@@ -87,7 +90,7 @@ export const create = async (store, canvas) => {
       const shapes = [];
 
       if (floor) {
-        const bgImage = floor.image.src;
+        const bgImage = floor.image.src || floor.image.url;
         if (bgImage && bgImage.includes("blob:")) {
           const url = await fetch(bgImage)
             .then((res) => res.blob())
@@ -147,11 +150,11 @@ export const create = async (store, canvas) => {
       history.handleRedo();
     },
     setImage(url) {
-      layer.uiControl.setAttributes(bgImage, "update", url);
+      layer.uiControl.setAttributes(bgImage, "upload", { url, scale: 1 });
     },
     export() {
       return new Promise((resolve) => {
-        layer.uiControl.exportImg(canvas, 'cover.jpg', resolve)
+        layer.uiControl.exportImg(canvas, "cover.jpg", resolve);
       });
       const $canvas = document.createElement("canvas");
       $canvas.width = canvas.width;
@@ -161,7 +164,17 @@ export const create = async (store, canvas) => {
       cctx.rect(0, 0, $canvas.width, $canvas.height);
       cctx.fillStyle = "rgba(255,255,255,1)";
       cctx.fill();
-      cctx.drawImage(canvas, 0, 0, $canvas.width, $canvas.height, 0, 0, canvas.width, canvas.height);
+      cctx.drawImage(
+        canvas,
+        0,
+        0,
+        $canvas.width,
+        $canvas.height,
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
 
       return new Promise((resolve) => {
         // resolve(layer.uiControl.menu_screenShot())

src/view/case/draw/board/useBoard.ts

@@ -1,4 +1,4 @@
-import boardFactory, { BoardShape, MetaShapeType } from "./";
+import boardFactory, { BoardShape, MetaShapeType, bgImage } from "./";
 import { getCaseInfo } from "@/store/case";
 import { BoardData, getCaseFileImageInfo } from "@/store/caseFile";
 import { Board } from "./";

src/view/case/draw/edit-shape/bgImage.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="缩放：">
+    <el-slider
+      style="width: 100px"
+      v-model="scale"
+      :min="0.5"
+      :step="0.01"
+      :max="2"
+      @change="shape.setScale(scale, true)"
+    />
+  </el-form-item>
+  <Del @delete="$emit('delete')" />
+</template>
+<script setup lang="ts">
+import { ref, watchEffect } from "vue";
+import { BoardShape } from "../board";
+import Del from "./delete.vue";
+
+const props = defineProps<{ shape: BoardShape }>();
+const emit = defineEmits<{
+  (e: "delete"): void;
+  (e: "blur"): void;
+  (e: "inputIng", ing: boolean): void;
+}>();
+
+const scale = ref<number>(props.shape.data.scale);
+watchEffect(() => {
+  props.shape.setScale(scale.value, false);
+});
+</script>