From d617780edd642a84761d26c72219f806f2892eb9 Mon Sep 17 00:00:00 2001
From: qq_32624153 <qq_32624153@devide>
Date: Tue, 12 Sep 2023 20:26:00 +0800
Subject: [PATCH] Tue Sep 12 20:26:00 CST 2023 inscode

---
 package.json  |   1 +
 src/konva.vue | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++
 yarn.lock     |   5 ++
 3 files changed, 155 insertions(+)
 create mode 100644 src/konva.vue

diff --git a/package.json b/package.json
index b1d2fd0..76ac8e6 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/konva.vue b/src/konva.vue
new file mode 100644
index 0000000..7610b67
--- /dev/null
+++ b/src/konva.vue
@@ -0,0 +1,149 @@
+<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>
diff --git a/yarn.lock b/yarn.lock
index 3cdf54d..df86955 100644
--- a/yarn.lock
+++ b/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"
-- 
GitLab