Tue Sep 12 20:26:00 CST 2023 inscode

package.json

@@ -12,6 +12,7 @@
     "element-ui": "^2.15.14",
     "fabric": "^5.3.0",
     "guess": "^1.0.2",
+    "konva": "^9.2.0",
     "vue": "^3.2.37",
     "vuedraggable": "^2.24.3"
   },

src/konva.vue

+<template>
+  <div ref="canvasContainer" class="canvas-container">
+    <canvas ref="canvas" class="canvas" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"></canvas>
+    <div v-for="(shape, index) in shapes" :key="index" :style="{top: shape.top + 'px', left: shape.left + 'px'}" class="shape" draggable="true" @dragstart="onDragStart(index)" @dragend="onDragEnd(index)">
+      <span class="value">{{ shape.value }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shapes: [],
+      selectedShape: null,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
+      isDragging: false
+    }
+  },
+  mounted() {
+    const canvas = this.$refs.canvas
+    canvas.width = this.$refs.canvasContainer.clientWidth
+    canvas.height = this.$refs.canvasContainer.clientHeight
+    this.drawShapes()
+  },
+  methods: {
+    addShape(x, y) {
+      const shape = {
+        value: Math.floor(Math.random() * 100),
+        left: x,
+        top: y,
+        width: 50,
+        height: 50
+      }
+      this.shapes.push(shape)
+      this.drawShape(shape)
+    },
+    drawShapes() {
+      const canvas = this.$refs.canvas
+      const context = canvas.getContext('2d')
+      context.clearRect(0, 0, canvas.width, canvas.height)
+      this.shapes.forEach(shape => this.drawShape(shape))
+    },
+    drawShape(shape) {
+      const canvas = this.$refs.canvas
+      const context = canvas.getContext('2d')
+      context.fillStyle = '#2196F3'
+      context.fillRect(shape.left, shape.top, shape.width, shape.height)
+      context.font = '16px Arial'
+      context.fillStyle = '#fff'
+      context.textAlign = 'center'
+      context.fillText(shape.value, shape.left + shape.width / 2, shape.top + shape.height / 2 + 6)
+    },
+    onMouseDown(event) {
+      const canvas = this.$refs.canvas
+      const rect = canvas.getBoundingClientRect()
+      const x = event.clientX - rect.left
+      const y = event.clientY - rect.top
+      this.selectedShape = this.shapes.find(shape => x >= shape.left && x <= shape.left + shape.width && y >= shape.top && y <= shape.top + shape.height)
+      if (this.selectedShape) {
+        this.isDragging = true
+        this.dragOffsetX = x - this.selectedShape.left
+        this.dragOffsetY = y - this.selectedShape.top
+      }
+    },
+    onMouseMove(event) {
+      if (this.isDragging) {
+        const canvas = this.$refs.canvas
+        const rect = canvas.getBoundingClientRect()
+        const x = event.clientX - rect.left
+        const y = event.clientY - rect.top
+        this.selectedShape.left = x - this.dragOffsetX
+        this.selectedShape.top = y - this.dragOffsetY
+        this.drawShapes()
+      }
+    },
+    onMouseUp() {
+      this.isDragging = false
+    },
+    onDragStart(index) {
+      this.selectedShape = this.shapes[index]
+      this.selectedShape.width += 10
+      this.selectedShape.height += 10
+      this.drawShapes()
+    },
+    onDragEnd(index) {
+      this.selectedShape = this.shapes[index]
+      this.selectedShape.width -= 10
+      this.selectedShape.height -= 10
+      this.drawShapes()
+      const canvas = this.$refs.canvas
+      const rect = canvas.getBoundingClientRect()
+      const x = this.selectedShape.left + this.selectedShape.width / 2
+      const y = this.selectedShape.top + this.selectedShape.height / 2
+      const otherShapes = this.shapes.filter(shape => shape !== this.selectedShape)
+      const targetShape = otherShapes.find(shape => x >= shape.left && x <= shape.left + shape.width && y >= shape.top && y <= shape.top + shape.height)
+      if (targetShape) {
+        const context = canvas.getContext('2d')
+        context.beginPath()
+        context.moveTo(this.selectedShape.left + this.selectedShape.width / 2, this.selectedShape.top + this.selectedShape.height / 2)
+        context.lineTo(targetShape.left + targetShape.width / 2, targetShape.top + targetShape.height / 2)
+        context.strokeStyle = '#2196F3'
+        context.lineWidth = 3
+        context.stroke()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.canvas-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.shape {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  background-color: #2196F3;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  cursor: move;
+}
+
+.shape:hover {
+  border-color: #2196F3;
+  background-color: #fff;
+}
+
+.value {
+  font-size: 16px;
+  color: #fff;
+  pointer-events: none;
+}
+</style>

yarn.lock

@@ -705,6 +705,11 @@ json-formatter-js@^2.3.4, json-formatter-js@~2.3.4:
   resolved "https://registry.npmmirror.com/json-formatter-js/-/json-formatter-js-2.3.4.tgz"
   integrity sha512-gmAzYRtPRmYzeAT4T7+t3NhTF89JOAIioCVDddl9YDb3ls3kWcskirafw/MZGJaRhEU6fRimGJHl7CC7gaAI2Q==
 
+konva@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.npmmirror.com/konva/-/konva-9.2.0.tgz"
+  integrity sha512-+woI76Sk+VFVl9z7zPkuTnN2zFpEYg27YWz8BCdQXpt5IS3pdnSPAPQVPPMidcbDi9/G5b/IOIp35/KqMGiYPA==
+
 lodash@~4.17.21:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"