Wed Sep 13 09:24:00 CST 2023 inscode

src/Treeclassify.vue

+<template>
+    <div class="canvas-container" ref="canvasContainer">
+      <canvas ref="canvas"></canvas>
+      <div class="element"
+        v-for="(element, index) in elements"
+        :key="index"
+        :style="{ left: element.left + 'px', top: element.top + 'px', width: element.width + 'px', height: element.height + 'px' }"
+        v-draggable="{ onDrag: handleDrag, onDragEnd: handleDragEnd }">
+      
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import VueDraggable from 'vuedraggable'
+  import { fabric } from 'fabric'
+  
+  export default {
+    components: {
+      VueDraggable
+    },
+    data() {
+      return {
+        elements: [
+          { type: 'rect', left: 50, top: 50, width: 100, height: 100 },
+          { type: 'rect', left: 200, top: 200, width: 150, height: 75 },
+    
+        ],
+        canvas: null
+      }
+    },
+    mounted() {
+      this.canvas = new fabric.Canvas(this.$refs.canvas)
+      this.canvas.setWidth(this.$refs.canvasContainer.offsetWidth)
+      this.canvas.setHeight(this.$refs.canvasContainer.offsetHeight)
+      this.canvas.backgroundColor = 'grey';
+  
+  
+  
+  
+      this.elements.forEach(element => {
+        if (element.type === 'image') {
+          fabric.Image.fromURL(element.src, img => {
+            img.set({ left: element.left, top: element.top, width: element.width, height: element.height, angle: 0 })
+            this.canvas.add(img)
+            element.object = img
+          })
+        } else {
+          const rect = new fabric.Rect({
+            left: element.left,
+            top: element.top,
+            width: element.width,
+            height: element.height,
+            fill: 'transparent',
+            stroke: 'red'
+          })
+          this.canvas.add(rect)
+          element.object = rect
+        }
+      })
+    },
+    methods: {
+      handleDrag(event) {
+        const element = this.elements[event.elementIndex]
+        element.left = event.position.left
+        element.top = event.position.top
+        if (element.type === 'image') {
+          element.object.set({ left: element.left, top: element.top, angle: 0 })
+        } else {
+          element.object.set({ left: element.left, top: element.top })
+        }
+        this.canvas.renderAll()
+      },
+      handleDragEnd() {
+        this.canvas.renderAll()
+      }
+    }
+  }
+  </script> 
+  
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
-import App from './konva.vue'
+import App from './canvas.vue'
 
 import './assets/main.css'
 
 
 
-// 全量引入 bkui-vue
-import bkui from 'bkui-vue'
-// 全量引入 bkui-vue 样式
-import 'bkui-vue/dist/style.css'
+
 
 createApp(App)
 .use(store)