|
|
@@ -0,0 +1,188 @@
|
|
|
+<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:800,
|
|
|
+ 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: 800,
|
|
|
+ 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%;
|
|
|
+ // background: #000;
|
|
|
+}
|
|
|
+</style>
|
