文章目录
前言
vue+konva.js(未使用vue-konva)，实现数据标注矩形和多边形功能
demo2添加功能如下：
- 自适应画布
- 新矩形和多边形（顶点已经约束不能拖拽出画布）
- ctrl+z撤销和del删除
- 鼠标滚轮放大和缩小
- 检查图形是否规范
计划添加：约束图形不能拖拽出画布功能
一、 自适应画布
二、新矩形和多边形
三、ctrl+z撤销和del删除
四、鼠标滚轮放大和缩小
五、检查图形是否规范
六、代码
<!--
* @Descripttion:
* @version:
* @Author: yangxing
* @Date: 2022-07-14 11:49:34
* @LastEditors: yangxing
* @LastEditTime: 2022-08-13 15:22:02
-->
<template>
<div style="width: 80vw">
<el-button-group>
<el-button size="mini" @click="selectTool(0)">矩形</el-button>
<el-button size="mini" @click="selectTool(1)">多边形</el-button>
</el-button-group>
<div id="map" ref="map"></div>
</div>
</template>
<script>
import { text } from "body-parser";
import Konva from "konva";
export default {
name: "MyKonva",
data() {
return {
rect: false,
poly: false,
stage: null,
layer: null,
shape: null,
image: { src: null },
currentTool: "",
toolObject: [
{
name: "rect",
type: "rect",
/* 矩形颜色 */ color: "#75fb4c",
/* 边框颜色 */ lineColor: "#75fb4c",
/* 顶点颜色 */ anchorColor: "green",
},
{
name: "poly",
type: "poly",
/* 矩形颜色 */ color: "#E63F00",
/* 边框颜色 */ lineColor: "#E63F00 ",
/* 顶点颜色 */ anchorColor: "red",
},
],
drawing: false, //一开始不能绘画
currentDrawingShape: null, //现在绘画的图形
rectPoints: [], //存储矩形的各个顶点的数组
polygonPoints: [], //存储绘画多边形各个顶点的数组
stageWidth: 0, //舞台宽
stageHeight: 0, //舞台高
scale: 1, //窗口变化的缩放比例
currentDel: null, //删除对象
currentCancel: null, //删除对象
mouseOffsetX: 0,
mouseOffsetY: 0,
mouseOffsetList: [],
label: "label", //标注
};
},
methods: {
//选择工具
selectTool(index) {
//如果还在绘画，但选择工具，则将正在绘画的图形删除
if (this.drawing) {
this.currentDrawingShape.getParent().destroy();
this.rectPoints = [];
this.polygonPoints = [];
this.drawing = false;
this.layer.draw();
}
this.currentTool = this.toolObject[index];
},
//重新调整画布
resizeStage() {
this.scale = this.$refs.map.clientWidth / this.stageWidth;
this.stage.width(this.stageWidth * this.scale);
this.stage.height(this.stageHeight * this.scale);
this.stage.scale({ x: this.scale, y: this.scale });
//维持原来大小
this.layer.find("Circle").forEach((element) => {
element.setAttr("radius", 5 / this.scale / this.layer.scaleX());
});
this.layer.find("Label").forEach((element) => {
element.getText().setAttrs({
fontSize: 16 / this.scale / this.layer.scaleX(),
padding: 1 / this.scale / this.layer.scaleX(),
});
});
this.stage.draw();
},
/**
*初始化konva舞台
*/
initKonvaStage() {
//1实例化stage层
this.stageWidth = this.$refs.map.clientWidth;
this.stageHeight = this.$refs.map.clientHeight;
this.stage = new Konva.Stage({
container: "map",
width: this.stageWidth,
height: this.stageHeight,
ignoreStroke: true,
});
this.stage.container().style.cursor = "crosshair";
var vc_this = this;
//2实例化layer层
this.layer = new Konva.Layer();
//3添加layer层
this.stage.add(this.layer);
var imageObj = new Image();
imageObj.onload = function () {
vc_this.shape = new Konva.Image({
image: imageObj,
width: vc_this.stageWidth,
height: vc_this.stageHeight,
});
vc_this.layer.add(vc_this.shape);
};
imageObj.src = require("../assets/dog.jpeg");
//给***舞台***绑定事件
this.stageBindEvent(this);
},
/**
* 舞台绑定的事件
* @param vc_this
*/
stageBindEvent(vc_this) {
//鼠标按下
this.stage.on("mousedown", (e) => {
//鼠标左键开始
if (e.evt.button == 0) {
if (e.target === vc_this.stage) {
vc_this.$message({
message: "请选择图片！",
type: "warning",
center: true,
duration: 1000,
});
return;
}
//图形起始点只能在图片层上
if (e.target === vc_this.shape) {
//开始初始绘画
vc_this.stageMousedown(vc_this.currentTool, e);
return;
}
//允许后续点绘画在其他图形上
if (vc_this.drawing) {
vc_this.stageMousedown(vc_this.currentTool, e);
return;
}
} else if (e.evt.button == 2) {
if (vc_this.polygonPoints.length != 0) {
//最好使用konva提供的鼠标xy点坐标
var mousePos = vc_this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / vc_this.scale - vc_this.layer.getAttr("x")) /
vc_this.layer.scaleX(),
y =
(mousePos.y / vc_this.scale - vc_this.layer.getAttr("y")) /
vc_this.layer.scaleY();
//group继续添加多边形的点
vc_this.drawCircle(
vc_this.currentTool,
x,
y,
vc_this.currentDrawingShape.getParent(),
vc_this.polygonPoints
);
vc_this.polygonPoints.push(x);
vc_this.polygonPoints.push(y);
//绘画多边形
vc_this.currentDrawingShape.setAttr("points", vc_this.polygonPoints);
//group继续添加多边形的边
vc_this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === vc_this.currentTool.name + "line";
})[0]
.setAttr("points", vc_this.polygonPoints);
//判断是否是只有两个点的多边形，如果起点和终点相同，不允许绘画
if (
vc_this.currentDrawingShape.points().length == 2 ||
vc_this.currentDrawingShape.points().length == 4
) {
vc_this.drawing = false;
vc_this.currentDrawingShape.getParent().destroy();
vc_this.polygonPoints = [];
vc_this.$message({
message: "顶点数必须大于2个！",
type: "warning",
center: true,
duration: 1000,
});
return;
}
e.cancelBubble = true;
this.drawing = false;
}
}
});
//鼠标移动
this.stage.on("mousemove", (e) => {
if (vc_this.currentTool && vc_this.drawing) {
//绘画中
vc_this.stageMousemove(vc_this.currentTool);
}
});
//鼠标放开
vc_this.stage.on("mouseup", (e) => {
if (e.evt.button == 0) {
if (vc_this.currentTool && vc_this.drawing) {
vc_this.stageMouseup(vc_this.currentTool, e);
}
} else if (e.evt.button == 2) {
if (
vc_this.currentTool &&
!vc_this.drawing &&
vc_this.polygonPoints.length != 0
) {
vc_this.stageMouseup(vc_this.currentTool, e);
}
}
});
//鼠标滚轮事件
vc_this.stage.on("wheel", (e) => {
if (vc_this.shape) {
var step = 0.03; // 每次缩放的比例
var mousePos = vc_this.stage.getPointerPosition();
var x = mousePos.x / vc_this.scale,
y = mousePos.y / vc_this.scale;
if (e.evt.wheelDelta > 0) {
vc_this.mouseOffsetX = x * step;
vc_this.mouseOffsetY = y * step;
// 放大
vc_this.layer.scaleX(vc_this.layer.scaleX() + step);
vc_this.layer.scaleY(vc_this.layer.scaleY() + step);
vc_this.layer.move({ x: -vc_this.mouseOffsetX, y: -vc_this.mouseOffsetY });
vc_this.mouseOffsetList.push(vc_this.mouseOffsetX, vc_this.mouseOffsetY);
//维持原来大小
vc_this.layer.find("Circle").forEach((element) => {
element.setAttr("radius", 5 / vc_this.scale / vc_this.layer.scaleX());
});
vc_this.layer.find("Label").forEach((element) => {
element.getText().setAttrs({
fontSize: 16 / vc_this.scale / vc_this.layer.scaleX(),
padding: 1 / vc_this.scale / vc_this.layer.scaleX(),
});
});
vc_this.stage.draw();
} else if (e.evt.wheelDelta < 0 && vc_this.mouseOffsetList.length != 0) {
vc_this.layer.scaleX(vc_this.layer.scaleX() - step);
vc_this.layer.scaleY(vc_this.layer.scaleY() - step);
vc_this.mouseOffsetY = vc_this.mouseOffsetList.pop();
vc_this.mouseOffsetX = vc_this.mouseOffsetList.pop();
vc_this.layer.move({ x: vc_this.mouseOffsetX, y: vc_this.mouseOffsetY });
//维持原来大小
vc_this.layer.find("Circle").forEach((element) => {
element.setAttr("radius", 5 / vc_this.scale / vc_this.layer.scaleX());
});
vc_this.layer.find("Label").forEach((element) => {
element.getText().setAttrs({
fontSize: 16 / vc_this.scale / vc_this.layer.scaleX(),
padding: 1 / vc_this.scale / vc_this.layer.scaleX(),
});
});
vc_this.stage.draw();
}
}
});
//舞台快捷键
var container = this.stage.container();
container.tabIndex = 1;
container.focus();
container.addEventListener("keydown", (e) => {
//删除的快捷键
if (e.keyCode === 46) {
if (this.currentDel) {
this.currentDel.destroy();
this.currentDel = null;
this.$message({
message: "删除成功！",
type: "success",
center: true,
duration: 1000,
});
}
}
vc_this.stage.container().style.cursor = "crosshair";
e.preventDefault();
vc_this.layer.draw();
});
container.addEventListener("keydown", (e) => {
//撤销的快捷键(ctrl+z)
if (e.ctrlKey == true && e.keyCode == 90) {
switch (this.currentTool.type) {
case "rect":
//正在绘画，直接删除group
if (this.drawing) {
this.currentDrawingShape.getParent().destroy();
this.rectPoints = [];
this.drawing = false;
} else {
//绘画完成，直接删除group
this.currentCancel.destroy();
this.rectPoints = [];
this.drawing = false;
}
break;
case "poly":
//删除点
var y = this.polygonPoints.pop();
var x = this.polygonPoints.pop();
//如果撤销的是第一个点，直接删除group
if (this.drawing && this.polygonPoints.length == 0) {
this.currentCancel.destroy();
this.drawing = false;
} //如果是已绘画完的多边形
else if (!this.drawing && this.polygonPoints.length == 0) {
if (this.currentCancel) {
this.currentCancel.destroy();
this.currentCancel = null;
this.$message({
message: "删除成功！",
type: "success",
center: true,
duration: 1000,
});
}
} else {
this.currentCancel
.getChildren((node) => {
return node.x() == x && node.y() == y;
})[0]
.destroy();
//重新绘画多边形
//最好使用konva提供的鼠标xy点坐标
var mousePos = this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) /
this.layer.scaleX(),
y =
(mousePos.y / this.scale - this.layer.getAttr("y")) /
this.layer.scaleY();
var tempPoints = this.polygonPoints.concat();
tempPoints.push(x);
tempPoints.push(y);
//修改多边形的点
this.currentCancel
.find("." + this.currentTool.name + "poly")[0]
.setAttr("points", tempPoints);
//重新绘画多边形的边
this.currentCancel
.find("." + this.currentTool.name + "line")[0]
.setAttr("points", tempPoints);
}
break;
}
}
vc_this.stage.container().style.cursor = "crosshair";
e.preventDefault();
vc_this.layer.draw();
});
},
/**
* 在舞台上鼠标点下发生的事件
* @param currentTool 当前选择的工具
* @param e 传入的event对象
*/
stageMousedown(currentTool, e) {
if (currentTool.type == null) {
this.$message({
message: "请选择标注工具！",
type: "warning",
center: true,
duration: 1000,
});
return;
}
switch (currentTool.type) {
case "rect":
//最好使用konva提供的鼠标xy点坐标
var mousePos = this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX(),
y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
//拖拽组
var group = new Konva.Group({
name: currentTool.name + "group",
draggable: true,
});
//添加矩形的初始点
var rectTopLeft = this.drawCircle(currentTool, x, y, group, this.rectPoints);
//修改矩形顶点名称
rectTopLeft.name("rectTopLeft");
//绘制矩形
this.drawRect(currentTool, x, y, group);
//添加矩形的边
this.rectPoints.push(x);
this.rectPoints.push(y);
this.drawLine(currentTool, this.rectPoints, group);
this.layer.add(group);
this.currentCancel = group;
this.layer.draw();
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
break;
case "poly":
//如果数组长度小于2，初始化多边形和顶点，使它们成为一组,否则什么都不做
if (this.polygonPoints.length < 2) {
//最好使用konva提供的鼠标xy点坐标
var mousePos = this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX(),
y =
(mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
//拖拽组
var group = new Konva.Group({
name: currentTool.name + "group",
draggable: false,
});
this.polygonPoints = [x, y];
//添加多边形的点
this.drawCircle(currentTool, x, y, group, this.polygonPoints);
//绘画多边形
this.drawPolygon(currentTool, this.polygonPoints, group);
//添加多边形的边
this.drawLine(currentTool, this.polygonPoints, group);
this.layer.add(group);
this.currentCancel = group;
//添加标签
var label = this.drawLabel(currentTool, x, y, group, this.label);
label.hide();
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
this.layer.draw();
} //多边形增加顶点
else {
//最好使用konva提供的鼠标xy点坐标
var mousePos = this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX(),
y =
(mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
//group继续添加多边形的点
this.drawCircle(
currentTool,
x,
y,
this.currentDrawingShape.getParent(),
this.polygonPoints
);
this.polygonPoints.push(x);
this.polygonPoints.push(y);
//绘画多边形
this.currentDrawingShape.setAttr("points", this.polygonPoints);
//group继续添加多边形的边
this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "line";
})[0]
.setAttr("points", this.polygonPoints);
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
this.layer.draw();
}
break;
default:
break;
}
this.drawing = true;
},
/**
* 鼠标在舞台上移动事件
* @param currentTool 当前选择的工具
* @param e 传入的event对象
*/
stageMousemove(currentTool) {
switch (currentTool.type) {
case "rect":
this.stage.container().style.cursor = "crosshair";
//矩形初始化，鼠标移动操作
//最好使用konva提供的鼠标xy点坐标
var mousePos = this.stage.getPointerPosition();
//考虑鼠标缩放
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX(),
y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
var point1 = [this.rectPoints[0], this.rectPoints[1]];
var point2 = [x, this.rectPoints[1]];
var point3 = [x, y];
var point4 = [this.rectPoints[0], y];
//如果矩形顶点不足创建顶点
if (this.rectPoints.length < 8) {
this.rectPoints = point1.concat(point2, point3, point4);
//删除第一个顶点
this.currentDrawingShape
.getParent()
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.destroy();
var rectTopLeft = this.drawCircle(
currentTool,
point1[0],
point1[1],
this.currentDrawingShape.getParent(),
this.rectPoints
);
rectTopLeft.name("rectTopLeft");
//添加标签
var label = this.drawLabel(
currentTool,
point1[0],
point1[1],
this.currentDrawingShape.getParent(),
this.label
);
label.hide();
var rectTopRight = this.drawCircle(
currentTool,
point2[0],
point2[1],
this.currentDrawingShape.getParent(),
this.rectPoints
);
rectTopRight.name("rectTopRight");
var rectBottomRight = this.drawCircle(
currentTool,
point3[0],
point3[1],
this.currentDrawingShape.getParent(),
this.rectPoints
);
rectBottomRight.name("rectBottomRight");
var rectBottomLeft = this.drawCircle(
currentTool,
point4[0],
point4[1],
this.currentDrawingShape.getParent(),
this.rectPoints
);
rectBottomLeft.name("rectBottomLeft");
}
//修改矩形的顶点
this.rectPoints[2] = point2[0];
this.rectPoints[3] = point2[1];
this.rectPoints[4] = point3[0];
this.rectPoints[5] = point3[1];
this.rectPoints[6] = point4[0];
this.rectPoints[7] = point4[1];
this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === "rectTopRight";
})[0]
.setAttrs({
x: point2[0],
y: point2[1],
});
this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === "rectBottomRight";
})[0]
.setAttrs({
x: point3[0],
y: point3[1],
});
this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === "rectBottomLeft";
})[0]
.setAttrs({
x: point4[0],
y: point4[1],
});
//添加矩形的边
this.currentDrawingShape
.getParent()
.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "line";
})[0]
.setAttr("points", this.rectPoints);
this.currentDrawingShape.setAttrs({
width: x - this.rectPoints[0],
height: y - this.rectPoints[1],
});
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
break;
case "poly":
this.stage.container().style.cursor = "crosshair";
//多边形初始化后，如果数组长度大于2，鼠标移动时，实时更新下一个点
if (this.polygonPoints.length >= 2) {
var mousePos = this.stage.getPointerPosition();
var x =
(mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX(),
y =
(mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
var tempPoints = this.polygonPoints.concat([]);
tempPoints.push(x);
tempPoints.push(y);
//更新多边形的线
this.currentDrawingShape
.getParent()
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "line";
})[0]
.setAttr("points", tempPoints);
//更新多边形
this.currentDrawingShape.setAttr("points", tempPoints);
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
}
break;
default:
break;
}
this.layer.draw();
},
/**
* 鼠标在舞台弹起
* @param currentTool 当前选择的工具
* @param e 传入的event对象
*/
stageMouseup(currentTool, e) {
switch (currentTool.type) {
case "rect":
this.currentDrawingShape = this.currentDrawingShape.getParent();
if (
this.currentDrawingShape.getChildren((element) => {
return element.getClassName() === "Circle";
}).length < 4
) {
this.drawing = false;
this.currentDrawingShape.destroy();
this.rectPoints = [];
this.$message({
message: "矩形过小！",
type: "warning",
center: true,
duration: 1000,
});
return;
} else {
//显示标签
this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "label";
})[0]
.show();
this.rectPoints = [];
this.drawing = false;
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
}
break;
case "poly":
if (e.evt.button == 2) {
this.currentDrawingShape = this.currentDrawingShape.getParent();
//显示标签
this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "label";
})[0]
.show();
//形成多边形直接发送数据
this.$message({
message: "成功！",
type: "success",
center: true,
duration: 1000,
});
//右键弹起
this.polygonPoints = [];
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
}
break;
default:
break;
}
this.layer.draw();
},
/**
* 多边形圆形
* @param //x x坐标
* @param //y y坐标
*/
drawCircle(currentTool, x, y, group, shapePoints) {
var vc_this = this;
var circle = new Konva.Circle({
name: currentTool.name + "circle",
x: x,
y: y,
radius: 5 / this.scale / this.layer.scaleX(),
visible: true, //是否显示
fill: currentTool.anchorColor,
stroke: currentTool.anchorColor,
draggable: false,
strokeWidth: 0.5,
strokeScaleEnabled: false,
//增加点击区域
hitStrokeWidth: 8 / this.scale / this.layer.scaleX(),
//设置拖动区域，不能超过舞台大小
dragBoundFunc: function (pos) {
//左上角
if (pos.x < 0 && pos.y < 0) {
return {
x: 0,
y: 0,
};
} //左侧
else if (pos.x <= 0 && 0 <= pos.y && pos.y <= vc_this.stage.height()) {
return {
x: 0,
y: pos.y,
};
}
//左下角
else if (pos.x < 0 && pos.y > vc_this.stage.height()) {
return {
x: 0,
y: vc_this.stage.height(),
};
} //下侧
else if (
0 <= pos.x &&
pos.x <= vc_this.stage.width() &&
pos.y > vc_this.stage.height()
) {
return {
x: pos.x,
y: vc_this.stage.height(),
};
} //右下角
else if (pos.x > vc_this.stage.width() && pos.y > vc_this.stage.height()) {
return {
x: vc_this.stage.width(),
y: vc_this.stage.height(),
};
}
//右侧
else if (
pos.x > vc_this.stage.width() &&
0 <= pos.y &&
pos.y <= vc_this.stage.height()
) {
return {
x: vc_this.stage.width(),
y: pos.y,
};
}
//右上角
else if (pos.x > vc_this.stage.width() && pos.y < 0) {
return {
x: vc_this.stage.width(),
y: 0,
};
} //上侧
else if (0 <= pos.x && pos.x <= vc_this.stage.width() && pos.y < 0) {
return {
x: pos.x,
y: 0,
};
}
},
});
group.add(circle);
var xChange, yChange;
circle.on("mouseover", (e) => {
vc_this.stage.container().style.cursor = "pointer";
});
circle.on("mousedown", (e) => {
if (!vc_this.drawing) {
circle.draggable(true);
//将现在绘画的对象改为group
vc_this.currentDrawingShape = circle.getParent();
} else {
circle.draggable(false);
}
e.cancelBubble = true;
});
circle.on("mouseleave", (e) => {
vc_this.stage.container().style.cursor = "crosshair";
});
circle.on("dragstart", (e) => {
switch (currentTool.type) {
case "rect":
vc_this.currentDrawingShape = circle.getParent();
break;
case "poly":
//查找拖拽了多边形的哪个点
for (var i = 0; i < shapePoints.length; i += 2) {
if (
circle.getAttr("x") == shapePoints[i] &&
circle.getAttr("y") == shapePoints[i + 1]
) {
xChange = i;
yChange = i + 1;
break;
}
}
break;
default:
break;
}
});
circle.on("dragmove", (e) => {
switch (currentTool.type) {
case "rect":
//查找拖拽了多边形的哪个点
var circleName = circle.name();
//修改点位置
var anchorX = circle.getX();
var anchorY = circle.getY();
switch (circleName) {
case "rectTopLeft":
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopRight";
})[0]
.y(anchorY);
//修改线
shapePoints[3] = anchorY;
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectBottomLeft";
})[0]
.x(anchorX);
shapePoints[6] = anchorX;
//更改拖拽点的位置来改变线段
shapePoints[0] = anchorX;
shapePoints[1] = anchorY;
break;
case "rectTopRight":
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.y(anchorY);
shapePoints[1] = anchorY;
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectBottomRight";
})[0]
.x(anchorX);
shapePoints[4] = anchorX;
//更改拖拽点的位置来改变线段
shapePoints[2] = anchorX;
shapePoints[3] = anchorY;
break;
case "rectBottomRight":
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectBottomLeft";
})[0]
.y(anchorY);
shapePoints[7] = anchorY;
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopRight";
})[0]
.x(anchorX);
shapePoints[2] = anchorX;
//更改拖拽点的位置来改变线段
shapePoints[4] = anchorX;
shapePoints[5] = anchorY;
break;
case "rectBottomLeft":
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectBottomRight";
})[0]
.y(anchorY);
shapePoints[5] = anchorY;
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.x(anchorX);
shapePoints[0] = anchorX;
//更改拖拽点的位置来改变线段
shapePoints[6] = anchorX;
shapePoints[7] = anchorY;
break;
}
//隐藏label
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "label";
})[0]
.hide();
//修改矩形位置和大小
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "rect";
})[0]
.position(
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.position()
);
var width =
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopRight";
})[0]
.getX() -
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.getX();
var height =
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectBottomLeft";
})[0]
.getY() -
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === "rectTopLeft";
})[0]
.getY();
if (width && height) {
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "rect";
})[0]
.width(width);
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "rect";
})[0]
.height(height);
}
break;
case "poly":
//隐藏label
vc_this.currentDrawingShape
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "label";
})[0]
.hide();
var x = circle.x();
var y = circle.y();
//更改拖拽点的位置
shapePoints[xChange] = x;
shapePoints[yChange] = y;
break;
default:
break;
}
});
circle.on("dragend", (e) => {
switch (currentTool.type) {
case "rect":
//修改标签位置
var rect = vc_this.currentDrawingShape.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "rect";
})[0];
var label = vc_this.currentDrawingShape.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "label";
})[0];
label.setAttrs({
x:
(rect.getClientRect().x / vc_this.scale - vc_this.layer.getAttr("x")) /
vc_this.layer.scaleX(),
y:
(rect.getClientRect().y / vc_this.scale - vc_this.layer.getAttr("y")) /
vc_this.layer.scaleX(),
visible: true,
});
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
circle.draggable(false);
break;
case "poly":
//修改标签位置
var poly = vc_this.currentDrawingShape.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "poly";
})[0];
var label = vc_this.currentDrawingShape.getChildren((node) => {
return node.getAttr("name") === currentTool.name + "label";
})[0];
label.setAttrs({
x: poly.points()[0],
y: poly.points()[1],
visible: true,
});
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
circle.draggable(false);
break;
default:
break;
}
vc_this.$message({
message: "修改成功！",
type: "success",
center: true,
duration: 1000,
});
e.cancelBubble = true;
});
return circle;
},
drawLabel(currentTool, x, y, group, labelText) {
var label = new Konva.Label({
x: x,
y: y,
name: currentTool.name + "label",
visible: true,
opacity: 1,
});
var tag = new Konva.Tag({
fill: currentTool.color,
});
var text = new Konva.Text({
text: labelText,
fontFamily: "Calibri",
fontSize: 16 / this.scale / this.layer.scaleX(),
padding: 1 / this.scale / this.layer.scaleX(),
fill: "#fff",
});
label.add(tag);
label.add(text);
group.add(label);
return label;
},
/**
* 线
* @param //points 坐标数组
*/
drawLine(currentTool, points, group) {
var line = new Konva.Line({
name: currentTool.name + "line",
points: points,
stroke: currentTool.lineColor,
strokeWidth: 1,
visible: true,
draggable: false,
closed: true,
strokeScaleEnabled: false,
opacity: 1, //透明度
});
group.add(line);
return line;
},
/**
*多边形
@param currentTool
* @param points 多边形绘画的各个顶点，类型数组
*/
drawPolygon(currentTool, points, group) {
var poly = new Konva.Line({
name: currentTool.name + "poly",
points: points,
/* fill: currentTool.color, */
stroke: currentTool.color,
strokeWidth: 1,
draggable: false,
opacity: 0.5,
lineCap: "round",
lineJoin: "round",
closed: true,
strokeScaleEnabled: false,
});
this.currentDrawingShape = poly;
group.add(poly);
var vc_this = this;
poly.getParent().on("mouseleave", (e) => {
vc_this.stage.container().style.cursor = "crosshair";
});
poly.getParent().on("mousedown", (e) => {
if (e.evt.button == 0) {
//绘画结束
if (!vc_this.drawing) {
vc_this.stage.container().style.cursor = "move";
//设置现在绘画节点的对象为该多边形和顶点的组
vc_this.currentDrawingShape = poly.getParent();
// 如果要让顶点和多边形一起拖拽，必须设置，多边形不能被拖拽
poly.setAttr("draggable", false);
poly.getParent().setAttr("draggable", true);
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
//添加删除撤销对象
this.currentDel = vc_this.currentDrawingShape;
this.currentCancel = vc_this.currentDrawingShape;
vc_this.layer.draw();
} else {
vc_this.stage.container().style.cursor = "crosshair";
poly.getParent().setAttr("draggable", false);
}
}
});
poly.getParent().on("dragend", (e) => {
if (currentTool.name === vc_this.toolObject[1].name) {
var updatePoints = [];
var polyPoints = poly.points();
for (var i = 0; i < polyPoints.length / 2; i++) {
updatePoints.push(polyPoints[i * 2] + poly.getParent().x());
updatePoints.push(polyPoints[i * 2 + 1] + poly.getParent().y());
}
poly.getParent().destroy();
vc_this.currentDrawingShape = vc_this.drawGroup(
updatePoints,
vc_this.toolObject[1]
);
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
//添加删除撤销对象
this.currentDel = vc_this.currentDrawingShape;
this.currentCancel = vc_this.currentDrawingShape;
vc_this.layer.draw();
/* vc_this.setMaskData(); */
}
vc_this.$message({
message: "修改成功！",
type: "success",
center: true,
duration: 1000,
});
vc_this.stage.container().style.cursor = "crosshair";
//设置组不能拖动
vc_this.currentDrawingShape.setAttr("draggable", false);
});
return poly;
},
/**
*矩形
* @param (currentTool, x, y, group)
*/
drawRect(currentTool, x, y, group) {
var rect = new Konva.Rect({
name: currentTool.name + "rect",
x: x,
y: y,
width: 0,
height: 0,
opacity: 0.5,
/* fill: currentTool.color, */
stroke: currentTool.color,
strokeScaleEnabled: false,
strokeWidth: 1,
});
this.currentDrawingShape = rect;
group.add(rect);
var vc_this = this;
rect.getParent().on("mouseleave", () => {
vc_this.stage.container().style.cursor = "crosshair";
});
rect.getParent().on("mousedown", (e) => {
if (e.evt.button == 0) {
//如果不是正在绘画图形时
if (!vc_this.drawing) {
vc_this.stage.container().style.cursor = "move";
//设置现在绘画节点的对象为该多边形和顶点的组
vc_this.currentDrawingShape = rect.getParent();
// 如果要让顶点和多边形一起拖拽，必须设置，多边形不能被拖拽
rect.setAttr("draggable", false);
rect.getParent().setAttr("draggable", true);
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
//添加删除撤销对象
this.currentDel = vc_this.currentDrawingShape;
this.currentCancel = vc_this.currentDrawingShape;
vc_this.layer.draw();
} else {
vc_this.stage.container().style.cursor = "crosshair";
rect.getParent().setAttr("draggable", false);
}
}
});
rect.getParent().on("dragend", (e) => {
if (currentTool.name === vc_this.toolObject[0].name) {
var updatePoints = [];
var rectPoints = rect
.getParent()
.getChildren((element) => {
return element.getAttr("name") === currentTool.name + "line";
})[0]
.points();
for (var i = 0; i < rectPoints.length / 2; i++) {
updatePoints.push(rectPoints[i * 2] + rect.getParent().x());
updatePoints.push(rectPoints[i * 2 + 1] + rect.getParent().y());
}
rect.getParent().destroy();
vc_this.currentDrawingShape = vc_this.drawGroup(
updatePoints,
vc_this.toolObject[0]
);
//添加删除撤销对象
this.currentDel = vc_this.currentDrawingShape;
this.currentCancel = vc_this.currentDrawingShape;
vc_this.layer.draw();
/* vc_this.setMaskData(); */
}
//使所有顶点在顶层显示
vc_this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
vc_this.$message({
message: "修改成功！",
type: "success",
center: true,
duration: 1000,
});
vc_this.stage.container().style.cursor = "crosshair";
//设置组不能拖动
vc_this.currentDrawingShape.setAttr("draggable", false);
});
return rect;
},
/**
*多边形组
* @param points 多边形绘画的各个顶点，类型数组
*/
drawGroup(points, currentTool) {
//拖拽组
var group = new Konva.Group({
name: currentTool.name + "Group",
draggable: false,
});
switch (currentTool.type) {
case "poly":
for (var i = 0; i < points.length / 2; i++) {
var p = {
x: points[i * 2],
y: points[i * 2 + 1],
};
if (i == 0) {
//添加标签
this.drawLabel(currentTool, p.x, p.y, group, this.label);
}
//添加多边形的点
this.drawCircle(currentTool, p.x, p.y, group, points);
}
//绘画多边形
var poly = this.drawPolygon(currentTool, points, group);
//添加多边形的边
var polyline = this.drawLine(currentTool, points, group);
poly.moveToBottom();
polyline.moveToBottom();
this.layer.draw();
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
break;
case "rect":
//添加矩形的点
for (var i = 0; i < points.length / 2; i++) {
var p = {
x: points[i * 2],
y: points[i * 2 + 1],
};
//添加矩形的点
this.drawCircle(currentTool, p.x, p.y, group, points);
}
//修改顶点的名字
group
.getChildren((node) => {
return node.getClassName() === "Circle";
})[0]
.name("rectTopLeft");
group
.getChildren((node) => {
return node.getClassName() === "Circle";
})[1]
.name("rectTopRight");
group
.getChildren((node) => {
return node.getClassName() === "Circle";
})[2]
.name("rectBottomRight");
group
.getChildren((node) => {
return node.getClassName() === "Circle";
})[3]
.name("rectBottomLeft");
//绘制矩形
var rect = this.drawRect(currentTool, points[0], points[1], group);
this.currentDrawingShape.setAttrs({
width: points[4] - points[0],
height: points[5] - points[1],
});
//添加矩形的边
this.drawLine(currentTool, points, group);
//添加标签
this.drawLabel(
currentTool,
rect.getClientRect().x,
rect.getClientRect().y,
group,
this.label
);
//使所有顶点在顶层显示
this.stage.find("Circle").forEach((element) => {
element.moveToTop();
});
break;
default:
break;
}
this.layer.add(group);
this.layer.draw();
return group;
},
},
mounted() {
this.initKonvaStage();
this.$nextTick(() => {
window.addEventListener("resize", this.resizeStage);
});
//禁止浏览器右击菜单
document.oncontextmenu = function (e) {
return false;
};
},
destroyed() {
window.removeEventListener("resize", this.resizeStage);
this.stage.destroy();
}
};
</script>
<style scoped>
#map {
background: #ddd;
width: 100%;
aspect-ratio: 16/9;
}
</style>
七、源码下载
https://download.csdn.net/download/u011472784/86399863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
