|
|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <div id="container" ref="container"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Konva from 'konva'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'KonvaExample',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stage: null,
|
|
|
+ layer: null,
|
|
|
+ isSelected:true,//判断是否选中隔离点
|
|
|
+ selectedStates: {} // 存储每个图片的选中状态
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initKonva()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initKonva() {
|
|
|
+ // 创建舞台
|
|
|
+ this.stage = new Konva.Stage({
|
|
|
+ container: this.$refs.container, // 容器元素
|
|
|
+ width: 1250,
|
|
|
+ height: 770,
|
|
|
+ fill: 'black'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建图层
|
|
|
+ this.layer = new Konva.Layer()
|
|
|
+
|
|
|
+ // 创建底图
|
|
|
+ const bgImage = new Image()
|
|
|
+ bgImage.src = require('@/assets/images/table.png')
|
|
|
+ bgImage.onload = () => {
|
|
|
+ const KnovaImage = new Konva.Image({
|
|
|
+ x: 350,
|
|
|
+ y: 10,
|
|
|
+ image: bgImage,
|
|
|
+ width: 500,
|
|
|
+ height: 770,
|
|
|
+ draggable: false
|
|
|
+ })
|
|
|
+ this.layer.add(KnovaImage)
|
|
|
+
|
|
|
+ this.layer.draw()
|
|
|
+ }
|
|
|
+ // 调用函数
|
|
|
+ const imageSrc = require('@/assets/images/localSetIcon.jpg'); // 图片路径
|
|
|
+
|
|
|
+ this.renderGrid( imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
|
|
|
+ // 将图层添加到舞台
|
|
|
+ this.stage.add(this.layer)
|
|
|
+ this.layer.draw()
|
|
|
+
|
|
|
+ // 添加鼠标滚轮缩放功能
|
|
|
+ this.stage.on('wheel', (e) => {
|
|
|
+ e.evt.preventDefault()
|
|
|
+
|
|
|
+ const scaleBy = 1.05 // 缩放因子
|
|
|
+ const oldScale = this.stage.scaleX() // 获取当前缩放比例
|
|
|
+ const pointer = this.stage.getPointerPosition() // 获取鼠标位置
|
|
|
+
|
|
|
+ const mousePointTo = {
|
|
|
+ x: (pointer.x - this.stage.x()) / oldScale,
|
|
|
+ y: (pointer.y - this.stage.y()) / oldScale
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据滚轮滚动的方向决定缩放
|
|
|
+ const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy
|
|
|
+
|
|
|
+ this.stage.scale({ x: newScale, y: newScale })
|
|
|
+
|
|
|
+ const newPos = {
|
|
|
+ x: pointer.x - mousePointTo.x * newScale,
|
|
|
+ y: pointer.y - mousePointTo.y * newScale
|
|
|
+ }
|
|
|
+ this.stage.position(newPos)
|
|
|
+ this.stage.batchDraw()
|
|
|
+ })
|
|
|
+
|
|
|
+ this.stage.on('mousedown', function() {
|
|
|
+ this.stage.container().style.cursor = 'move'
|
|
|
+ }.bind(this))
|
|
|
+
|
|
|
+ this.stage.on('mouseup', function() {
|
|
|
+ this.stage.container().style.cursor = 'default'
|
|
|
+ }.bind(this))
|
|
|
+ this.stage.draggable(true)
|
|
|
+ },
|
|
|
+ renderGrid( imageSrc, rows, cols, startX, startY, xOffset, yOffset, imageWidth, imageHeight, rectWidth, rectHeight) {
|
|
|
+ for (let row = 0; row < rows; row++) {
|
|
|
+ for (let col = 0; col < cols; col++) {
|
|
|
+ const x = startX + col * xOffset // 每个图片的 x 轴位置
|
|
|
+ const y = startY + row * yOffset // 每个图片的 y 轴位置
|
|
|
+ const index = row * cols + col + 1 // 唯一标识的编号
|
|
|
+
|
|
|
+ const point = new Image()
|
|
|
+ point.src = imageSrc
|
|
|
+ point.onload = () => {
|
|
|
+ // 创建图片
|
|
|
+ const knovaImage = new Konva.Image({
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ image: point,
|
|
|
+ width: imageWidth,
|
|
|
+ height: imageHeight,
|
|
|
+ draggable: false
|
|
|
+ })
|
|
|
+ // 状态变量用于追踪当前图片
|
|
|
+ // 点击事件
|
|
|
+ knovaImage.on('click', () => {
|
|
|
+
|
|
|
+ console.log(this.isSelected,'isSelected')
|
|
|
+ if (this.isSelected) {
|
|
|
+ point.src = require('@/assets/images/localSetSelect.jpg'); // 替换成选中的图片
|
|
|
+ } else {
|
|
|
+ point.src = imageSrc; // 恢复成原来的图片
|
|
|
+ }
|
|
|
+ this.isSelected = !this.isSelected; // 切换状态
|
|
|
+ knovaImage.image(point); // 更新图片
|
|
|
+ this.layer.draw(); // 重绘图层
|
|
|
+ });
|
|
|
+ this.layer.add(knovaImage)
|
|
|
+
|
|
|
+ // 创建矩形框
|
|
|
+ const rect = new Konva.Rect({
|
|
|
+ x: x - 3,
|
|
|
+ y: y + imageHeight + 10, // 矩形在图片下方
|
|
|
+ width: rectWidth,
|
|
|
+ height: rectHeight,
|
|
|
+ cornerRadius: 10,
|
|
|
+ stroke: 'red',
|
|
|
+ strokeWidth: 2,
|
|
|
+ fill: 'white'
|
|
|
+ })
|
|
|
+ this.layer.add(rect)
|
|
|
+
|
|
|
+ // 创建文本
|
|
|
+ const text = new Konva.Text({
|
|
|
+ x: x + 12, // 调整文本在矩形内的位置
|
|
|
+ y: y + imageHeight + 15, // 在矩形内部居中显示
|
|
|
+ fontSize: 20,
|
|
|
+ text: `E-${index}`,
|
|
|
+ fontFamily: 'Calibri',
|
|
|
+ fill: 'red'
|
|
|
+ })
|
|
|
+ this.layer.add(text)
|
|
|
+
|
|
|
+ // 渲染图层
|
|
|
+ this.layer.draw()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // methods结束
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+#container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
