|
|
|
|
@ -0,0 +1,851 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="drawPicBox">
|
|
|
|
|
<div class="pointBox">
|
|
|
|
|
<h3>
|
|
|
|
|
标注数据
|
|
|
|
|
<el-button
|
|
|
|
|
type="danger"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
@click="deletePic"
|
|
|
|
|
></el-button>
|
|
|
|
|
<el-button type="primary" @click="savePointer">保存</el-button>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="picRow">
|
|
|
|
|
<p v-for="(item, index) in recArrs" :key="index">
|
|
|
|
|
<span
|
|
|
|
|
>{{ item.text }}：
|
|
|
|
|
<el-select
|
|
|
|
|
size="mini"
|
|
|
|
|
v-model="item.type"
|
|
|
|
|
placeholder="请选择标注名称"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(label, value, index) in markOptions"
|
|
|
|
|
:key="value"
|
|
|
|
|
:label="label"
|
|
|
|
|
:value="index"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<!-- <span>图片的宽：{{ imgWidth }}px</span>
|
|
|
|
|
<span>图片的高：{{ imgHeight }}px</span>
|
|
|
|
|
<span>宽：{{ (item.w / imgWidth).toFixed(2) }}</span>
|
|
|
|
|
<span>高：{{ (item.h / imgHeight).toFixed(2) }}</span>
|
|
|
|
|
<span>X：{{ ((item.x + item.w) / 2 / imgWidth).toFixed(2) }}</span>
|
|
|
|
|
<span>Y：{{ ((item.y + item.h) / 2 / imgHeight).toFixed(2) }}</span> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="picCanvans">
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
<img
|
|
|
|
|
@load="onImageLoad"
|
|
|
|
|
:src="
|
|
|
|
|
'http://192.168.50.200:88/images/' +
|
|
|
|
|
parentdata.name +
|
|
|
|
|
'/' +
|
|
|
|
|
currentNodeData.name
|
|
|
|
|
"
|
|
|
|
|
alt=""
|
|
|
|
|
class="img"
|
|
|
|
|
ref="imgDiv"
|
|
|
|
|
/>
|
|
|
|
|
<canvas
|
|
|
|
|
class="canvas_dom"
|
|
|
|
|
id="canvasDom"
|
|
|
|
|
:width="imgWidth"
|
|
|
|
|
:height="imgHeight"
|
|
|
|
|
@mousemove="moveFunction"
|
|
|
|
|
@mousedown="downFunction"
|
|
|
|
|
@mouseup="upFunction"
|
|
|
|
|
@mouseout="outFunction"
|
|
|
|
|
@contextmenu="contextMenuFunction"
|
|
|
|
|
>
|
|
|
|
|
</canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import EventBus from "@/utils/event-bus";
|
|
|
|
|
import { getTypesApi, saveLabelsApi, deleteApi } from "@/utils/api/index";
|
|
|
|
|
export default {
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
markOptions: {}, //获取标注列表
|
|
|
|
|
currentNodeData: "",
|
|
|
|
|
parentdata: "",
|
|
|
|
|
imgWidth: 0,
|
|
|
|
|
imgHeight: 0,
|
|
|
|
|
typeMap: {
|
|
|
|
|
0: "挖掘机",
|
|
|
|
|
1: "塔吊",
|
|
|
|
|
2: "吊车",
|
|
|
|
|
3: "水泥泵车",
|
|
|
|
|
4: "山火",
|
|
|
|
|
5: "烟雾",
|
|
|
|
|
},
|
|
|
|
|
// 保存矩形数据
|
|
|
|
|
recArrs: [],
|
|
|
|
|
curObj: {
|
|
|
|
|
isRightClick: false, // 鼠标右键按下标识
|
|
|
|
|
radious: 4, // 范围误差值
|
|
|
|
|
recSize: 5, // 移动小框的大小
|
|
|
|
|
index: -1, // 当前矩形框的index
|
|
|
|
|
side: 0, // 边界值
|
|
|
|
|
resize: false, // 是否拖拽大小
|
|
|
|
|
draw: false, // 是否画图
|
|
|
|
|
drag: false, // 是否拖动
|
|
|
|
|
x: 0, // 画图的起始x
|
|
|
|
|
y: 0, // 画图的起始y
|
|
|
|
|
startX: 0, // x轴开始位置
|
|
|
|
|
startY: 0, // y轴开始位置
|
|
|
|
|
centerX: 0, //矩形中心点x
|
|
|
|
|
centerY: 0, //矩形中心点y
|
|
|
|
|
},
|
|
|
|
|
//获取的矩形数据
|
|
|
|
|
labelMarkArrs: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
EventBus.$on("currentNodeData", (value) => {
|
|
|
|
|
//console.log(value); // 输出 value
|
|
|
|
|
this.currentNodeData = value;
|
|
|
|
|
});
|
|
|
|
|
EventBus.$on("perentNode", (value) => {
|
|
|
|
|
//console.log(value); // 输出 value
|
|
|
|
|
this.parentdata = value;
|
|
|
|
|
});
|
|
|
|
|
EventBus.$on("labelMark", (value) => {
|
|
|
|
|
//console.log(value); // 输出 value
|
|
|
|
|
this.labelMarkArrs = value;
|
|
|
|
|
console.log(this.labelMarkArrs);
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
this.recArrs = [];
|
|
|
|
|
for (var i = 0; i < this.labelMarkArrs.length; i++) {
|
|
|
|
|
console.log(this.labelMarkArrs[i]);
|
|
|
|
|
//获取的数据转化一下
|
|
|
|
|
this.recArrs.push({
|
|
|
|
|
x:
|
|
|
|
|
this.labelMarkArrs[i].centerX * this.imgWidth -
|
|
|
|
|
(this.labelMarkArrs[i].width * this.imgWidth) / 2,
|
|
|
|
|
y:
|
|
|
|
|
this.labelMarkArrs[i].centerY * this.imgHeight -
|
|
|
|
|
(this.labelMarkArrs[i].height * this.imgHeight) / 2,
|
|
|
|
|
w: this.labelMarkArrs[i].width * this.imgWidth,
|
|
|
|
|
h: this.labelMarkArrs[i].height * this.imgHeight,
|
|
|
|
|
text: this.typeMap[this.labelMarkArrs[i].type],
|
|
|
|
|
type: this.labelMarkArrs[i].type,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log("aaaaaaaaaaaaaaaaa");
|
|
|
|
|
console.log(this.recArrs);
|
|
|
|
|
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
window.addEventListener("resize", this.updateImageSize);
|
|
|
|
|
});
|
|
|
|
|
this.getTypes();
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
window.removeEventListener("resize", this.updateImageSize);
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
methods: {
|
|
|
|
|
getTypes() {
|
|
|
|
|
getTypesApi()
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.markOptions = res.data;
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
//获取图片的宽高
|
|
|
|
|
onImageLoad() {
|
|
|
|
|
this.updateImageSize();
|
|
|
|
|
},
|
|
|
|
|
updateImageSize() {
|
|
|
|
|
const img = this.$refs.imgDiv;
|
|
|
|
|
this.imgWidth = img.offsetWidth;
|
|
|
|
|
this.imgHeight = img.offsetHeight;
|
|
|
|
|
console.log(this.imgWidth, this.imgHeight);
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
this.recArrs = [];
|
|
|
|
|
for (var i = 0; i < this.labelMarkArrs.length; i++) {
|
|
|
|
|
console.log(this.labelMarkArrs[i]);
|
|
|
|
|
//获取的数据转化一下
|
|
|
|
|
this.recArrs.push({
|
|
|
|
|
x:
|
|
|
|
|
this.labelMarkArrs[i].centerX * this.imgWidth -
|
|
|
|
|
(this.labelMarkArrs[i].width * this.imgWidth) / 2,
|
|
|
|
|
y:
|
|
|
|
|
this.labelMarkArrs[i].centerY * this.imgHeight -
|
|
|
|
|
(this.labelMarkArrs[i].height * this.imgHeight) / 2,
|
|
|
|
|
w: this.labelMarkArrs[i].width * this.imgWidth,
|
|
|
|
|
h: this.labelMarkArrs[i].height * this.imgHeight,
|
|
|
|
|
text: this.typeMap[this.labelMarkArrs[i].type],
|
|
|
|
|
type: this.labelMarkArrs[i].type,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log("aaaaaaaaaaaaaaaaa");
|
|
|
|
|
console.log(this.recArrs);
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
},
|
|
|
|
|
// // 拖动图片
|
|
|
|
|
// move(e) {
|
|
|
|
|
// e.preventDefault();
|
|
|
|
|
// // 获取元素
|
|
|
|
|
// var left = document.querySelector(".wrap");
|
|
|
|
|
// var img = document.querySelector(".img");
|
|
|
|
|
// var x = e.pageX - img.offsetLeft;
|
|
|
|
|
// var y = e.pageY - img.offsetTop;
|
|
|
|
|
// // 添加鼠标移动事件
|
|
|
|
|
// left.addEventListener("mousemove", move);
|
|
|
|
|
// function move(e) {
|
|
|
|
|
// img.style.left = e.pageX - x + "px";
|
|
|
|
|
// img.style.top = e.pageY - y + "px";
|
|
|
|
|
// }
|
|
|
|
|
// // 添加鼠标抬起事件，鼠标抬起，将事件移除
|
|
|
|
|
// img.addEventListener("mouseup", function () {
|
|
|
|
|
// left.removeEventListener("mousemove", move);
|
|
|
|
|
// });
|
|
|
|
|
// // 鼠标离开父级元素，把事件移除
|
|
|
|
|
// left.addEventListener("mouseout", function () {
|
|
|
|
|
// left.removeEventListener("mousemove", move);
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
// // 缩放图片
|
|
|
|
|
// rollImg() {
|
|
|
|
|
// /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
|
|
|
|
|
// var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;
|
|
|
|
|
// /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
|
|
|
|
|
// zoom += event.wheelDelta / 12;
|
|
|
|
|
// /* 最小范围 和 最大范围 的图片缩放尺度 */
|
|
|
|
|
// if (zoom >= 100 && zoom < 400) {
|
|
|
|
|
// this.$refs.imgDiv.style.zoom = zoom + "%";
|
|
|
|
|
// }
|
|
|
|
|
// return false;
|
|
|
|
|
// },
|
|
|
|
|
// 禁止鼠标右键
|
|
|
|
|
contextMenuFunction(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
return false;
|
|
|
|
|
},
|
|
|
|
|
// 鼠标移动事件
|
|
|
|
|
moveFunction(e) {
|
|
|
|
|
// console.log('鼠标移动', e);
|
|
|
|
|
// 需要清除之前的辅助线
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
// 画辅助线
|
|
|
|
|
this.drawRuler(e);
|
|
|
|
|
// // 清空辅助线和矩形数据后，这里重绘
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
// 画矩形
|
|
|
|
|
this.drawRect(e);
|
|
|
|
|
// // 移动或缩放
|
|
|
|
|
this.moveOrScale(e);
|
|
|
|
|
},
|
|
|
|
|
// 移动矩形框/缩放矩形框
|
|
|
|
|
moveOrScale(e) {
|
|
|
|
|
let index = this.getEventIndex(e.offsetX, e.offsetY);
|
|
|
|
|
let side = 0;
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
side = this.getEventArea(index, e.offsetX, e.offsetY);
|
|
|
|
|
// 画移动小框
|
|
|
|
|
if (side > 0) {
|
|
|
|
|
this.drawLitRecs(index);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 鼠标样式
|
|
|
|
|
this.changeResizeCursor(side);
|
|
|
|
|
|
|
|
|
|
// 如果在移动
|
|
|
|
|
this.moveRec(e);
|
|
|
|
|
|
|
|
|
|
// 如果在缩放
|
|
|
|
|
this.reSizeRec(e);
|
|
|
|
|
},
|
|
|
|
|
// 移动
|
|
|
|
|
moveRec(e) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
if (this.curObj.drag && this.recArrs[this.curObj.index]) {
|
|
|
|
|
let x = this.curObj.startX + e.offsetX - this.curObj.x;
|
|
|
|
|
let y = this.curObj.startY + e.offsetY - this.curObj.y;
|
|
|
|
|
|
|
|
|
|
let minX = canvasDom.offsetLeft;
|
|
|
|
|
let maxX =
|
|
|
|
|
canvasDom.offsetLeft +
|
|
|
|
|
canvasDom.offsetWidth -
|
|
|
|
|
this.recArrs[this.curObj.index].w;
|
|
|
|
|
let minY = canvasDom.offsetTop;
|
|
|
|
|
let maxY =
|
|
|
|
|
canvasDom.offsetTop +
|
|
|
|
|
canvasDom.offsetHeight -
|
|
|
|
|
this.recArrs[this.curObj.index].h;
|
|
|
|
|
|
|
|
|
|
if (x < minX) {
|
|
|
|
|
x = minX;
|
|
|
|
|
}
|
|
|
|
|
if (x > maxX) {
|
|
|
|
|
x = maxX;
|
|
|
|
|
}
|
|
|
|
|
if (y < minY) {
|
|
|
|
|
y = minY;
|
|
|
|
|
}
|
|
|
|
|
if (y > maxY) {
|
|
|
|
|
y = maxY;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.recArrs[this.curObj.index].x = x;
|
|
|
|
|
this.recArrs[this.curObj.index].y = y;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//缩放
|
|
|
|
|
reSizeRec(e) {
|
|
|
|
|
const { side, index, recSize } = this.curObj;
|
|
|
|
|
const rec = this.recArrs[index];
|
|
|
|
|
if (this.curObj.resize && rec) {
|
|
|
|
|
const temX = rec.x;
|
|
|
|
|
const temY = rec.y;
|
|
|
|
|
const ex = e.offsetX;
|
|
|
|
|
const ey = e.offsetY;
|
|
|
|
|
if (side < 4 && temX + rec.w - ex > recSize) {
|
|
|
|
|
rec.x = ex;
|
|
|
|
|
}
|
|
|
|
|
if (
|
|
|
|
|
(side == 1 || side == 4 || side == 7) &&
|
|
|
|
|
temY + rec.h - ey > recSize
|
|
|
|
|
) {
|
|
|
|
|
rec.y = ey;
|
|
|
|
|
}
|
|
|
|
|
if (side < 4) {
|
|
|
|
|
if (temX + rec.w - ex > recSize) {
|
|
|
|
|
rec.w = temX + rec.w - ex;
|
|
|
|
|
}
|
|
|
|
|
} else if (side < 7) {
|
|
|
|
|
if (ex - temX > recSize) {
|
|
|
|
|
rec.w = ex - temX;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (side == 1 || side == 4 || side == 7) {
|
|
|
|
|
if (temY + rec.h - ey > recSize) {
|
|
|
|
|
rec.h = temY + rec.h - ey;
|
|
|
|
|
}
|
|
|
|
|
} else if (side == 3 || side == 6 || side == 8) {
|
|
|
|
|
if (ey - temY > recSize) {
|
|
|
|
|
rec.h = ey - temY;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 鼠标移出画布
|
|
|
|
|
outFunction(e) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let x = e.clientX;
|
|
|
|
|
let y = e.clientY;
|
|
|
|
|
let left = canvasDom.offsetLeft;
|
|
|
|
|
let top = canvasDom.offsetTop;
|
|
|
|
|
let width = canvasDom.offsetWidth;
|
|
|
|
|
let height = canvasDom.offsetHeight;
|
|
|
|
|
let limitX = left + width;
|
|
|
|
|
let limitY = top + height;
|
|
|
|
|
if (x < left || x > limitX || y < top || y > limitY) {
|
|
|
|
|
console.log("鼠标移出范围， 清除canvas，重新绘制");
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 鼠标移动，画辅助线
|
|
|
|
|
drawRuler(e) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
const canvasHeight = canvasDom.offsetWidth;
|
|
|
|
|
const canvasWidth = canvasDom.offsetWidth;
|
|
|
|
|
//console.log(canvasDom);
|
|
|
|
|
// 开始一条路径
|
|
|
|
|
ctx2d.beginPath();
|
|
|
|
|
// 填充色
|
|
|
|
|
ctx2d.strokeStyle = "red";
|
|
|
|
|
// 路径宽度
|
|
|
|
|
ctx2d.lineWidth = 1;
|
|
|
|
|
// 移动到 鼠标的 x位置， y位置 0（竖线的起点）
|
|
|
|
|
ctx2d.moveTo(e.offsetX, 0);
|
|
|
|
|
// lineTo() 方法添加一个新点，（竖线的终点）
|
|
|
|
|
ctx2d.lineTo(e.offsetX, canvasHeight);
|
|
|
|
|
// 移动到(x: 0, y：鼠标的位置)（横线的起点）
|
|
|
|
|
ctx2d.moveTo(0, e.offsetY);
|
|
|
|
|
// lineTo() 方法添加一个新点，（横线的终点）
|
|
|
|
|
ctx2d.lineTo(canvasWidth, e.offsetY);
|
|
|
|
|
ctx2d.stroke();
|
|
|
|
|
},
|
|
|
|
|
// 清除canvas
|
|
|
|
|
clearCanvas() {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
const canvasHeight = canvasDom.width;
|
|
|
|
|
const canvasWidth = canvasDom.height;
|
|
|
|
|
ctx2d.clearRect(0, 0, canvasHeight, canvasWidth);
|
|
|
|
|
},
|
|
|
|
|
// 鼠标按下并移动，画矩形
|
|
|
|
|
drawRect(e) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
if (this.curObj.draw) {
|
|
|
|
|
ctx2d.strokeRect(
|
|
|
|
|
this.curObj.x,
|
|
|
|
|
this.curObj.y,
|
|
|
|
|
e.offsetX - this.curObj.x,
|
|
|
|
|
e.offsetY - this.curObj.y
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 画初始数据
|
|
|
|
|
drawOldRect() {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
const canvasHeight = canvasDom.width;
|
|
|
|
|
const canvasWidth = canvasDom.height;
|
|
|
|
|
if (!this.recArrs.length) return;
|
|
|
|
|
for (var i = 0; i < this.recArrs.length; i++) {
|
|
|
|
|
// >2的判断是为了防止误触画出来的数据
|
|
|
|
|
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
|
|
|
|
|
ctx2d.beginPath();
|
|
|
|
|
ctx2d.lineWidth = 2; // 矩形框的线条宽度
|
|
|
|
|
ctx2d.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色
|
|
|
|
|
// 设置填充样式
|
|
|
|
|
ctx2d.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
|
|
|
|
|
|
|
|
|
|
ctx2d.strokeRect(
|
|
|
|
|
this.recArrs[i].x,
|
|
|
|
|
this.recArrs[i].y,
|
|
|
|
|
this.recArrs[i].w,
|
|
|
|
|
this.recArrs[i].h
|
|
|
|
|
); // 矩形框
|
|
|
|
|
ctx2d.fillRect(
|
|
|
|
|
this.recArrs[i].x,
|
|
|
|
|
this.recArrs[i].y,
|
|
|
|
|
this.recArrs[i].w,
|
|
|
|
|
this.recArrs[i].h
|
|
|
|
|
); // 填充矩形
|
|
|
|
|
// 如果有文本信息，填充文本信息
|
|
|
|
|
if (this.recArrs[i].text) {
|
|
|
|
|
ctx2d.font = "100 18px 微软雅黑";
|
|
|
|
|
ctx2d.lineWidth = 1;
|
|
|
|
|
ctx2d.strokeStyle = "rgb(255,0,0)";
|
|
|
|
|
ctx2d.strokeText(
|
|
|
|
|
this.recArrs[i].text,
|
|
|
|
|
this.recArrs[i].x +
|
|
|
|
|
this.recArrs[i].w / 2 -
|
|
|
|
|
(this.recArrs[i].text.length / 2) * 16,
|
|
|
|
|
this.recArrs[i].y - 20 < 0
|
|
|
|
|
? this.recArrs[i].y + this.recArrs[i].h + 20
|
|
|
|
|
: this.recArrs[i].y - 10
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
writeMarkHandle() {
|
|
|
|
|
this.dialogFormVisible = false;
|
|
|
|
|
this.drawRect();
|
|
|
|
|
},
|
|
|
|
|
// 鼠标按下事件
|
|
|
|
|
downFunction(e) {
|
|
|
|
|
console.log("鼠标按下", e); // e.button 0 鼠标左键 1 鼠标滚轮 2 鼠标右键
|
|
|
|
|
this.curObj.isRightClick = e.button > 1;
|
|
|
|
|
console.log("是否右键", this.curObj.isRightClick);
|
|
|
|
|
|
|
|
|
|
// 赋值 x,y 轴起始数据
|
|
|
|
|
this.curObj.x = e.offsetX;
|
|
|
|
|
this.curObj.y = e.offsetY;
|
|
|
|
|
|
|
|
|
|
// 判断是否落在的矩形框上
|
|
|
|
|
//得到落点所在框的序数
|
|
|
|
|
this.curObj.index = this.getEventIndex(this.curObj.x, this.curObj.y);
|
|
|
|
|
console.log("落点矩形", this.curObj.index);
|
|
|
|
|
|
|
|
|
|
// 如果是鼠标右键 TODO...
|
|
|
|
|
if (this.curObj.isRightClick) {
|
|
|
|
|
} else {
|
|
|
|
|
// 鼠标左键
|
|
|
|
|
// 如果鼠标落点不在矩形内，画矩形
|
|
|
|
|
if (this.curObj.index === -1) {
|
|
|
|
|
this.curObj.draw = true;
|
|
|
|
|
} else {
|
|
|
|
|
// 落点在矩形内
|
|
|
|
|
//移动或者放缩
|
|
|
|
|
this.curObj.startX = this.recArrs[this.curObj.index].x;
|
|
|
|
|
this.curObj.startY = this.recArrs[this.curObj.index].y;
|
|
|
|
|
//得到落点在一个框中的区域
|
|
|
|
|
this.curObj.side = this.getEventArea(
|
|
|
|
|
this.curObj.index,
|
|
|
|
|
this.curObj.x,
|
|
|
|
|
this.curObj.y
|
|
|
|
|
);
|
|
|
|
|
console.log("this.curObj.side", this.curObj.side);
|
|
|
|
|
if (this.curObj.side < 9) {
|
|
|
|
|
//准备缩放
|
|
|
|
|
console.log("在缩放");
|
|
|
|
|
this.curObj.resize = true;
|
|
|
|
|
} else {
|
|
|
|
|
//准备拖动
|
|
|
|
|
console.log("在拖动");
|
|
|
|
|
this.curObj.drag = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 画移动小框
|
|
|
|
|
this.drawLitRecs(this.curObj.index);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//判断小框类型
|
|
|
|
|
this.changeResizeCursor(this.curObj.side);
|
|
|
|
|
},
|
|
|
|
|
//画移动时的小框,data为矩形框9个点的坐标
|
|
|
|
|
drawLitRecs(index) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
let ctx2d = canvasDom.getContext("2d");
|
|
|
|
|
const data = this.prepareLitRecs(index);
|
|
|
|
|
const { recSize } = this.curObj;
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
ctx2d.strokeRect(
|
|
|
|
|
data[i][0] - recSize / 2,
|
|
|
|
|
data[i][1] - recSize / 2,
|
|
|
|
|
recSize,
|
|
|
|
|
recSize
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//把一个框的左上角坐标和宽高输入，得到8个坐标，左3，右3中2
|
|
|
|
|
prepareLitRecs(index) {
|
|
|
|
|
const data = this.recArrs[index];
|
|
|
|
|
var li = [];
|
|
|
|
|
li[0] = [data.x, data.y];
|
|
|
|
|
li[1] = [data.x, data.y + data.h / 2];
|
|
|
|
|
li[2] = [data.x, data.y + data.h];
|
|
|
|
|
li[3] = [data.x + data.w, data.y];
|
|
|
|
|
li[4] = [data.x + data.w, data.y + data.h / 2];
|
|
|
|
|
li[5] = [data.x + data.w, data.y + data.h];
|
|
|
|
|
li[6] = [data.x + data.w / 2, data.y];
|
|
|
|
|
li[7] = [data.x + data.w / 2, data.y + data.h];
|
|
|
|
|
return li;
|
|
|
|
|
},
|
|
|
|
|
// 修改鼠标样式
|
|
|
|
|
changeResizeCursor(side) {
|
|
|
|
|
let canvasDom = document.getElementById("canvasDom");
|
|
|
|
|
switch (side) {
|
|
|
|
|
case 0:
|
|
|
|
|
canvasDom.style.cursor = "crosshair";
|
|
|
|
|
break;
|
|
|
|
|
case 1:
|
|
|
|
|
canvasDom.style.cursor = "se-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
canvasDom.style.cursor = "e-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 3:
|
|
|
|
|
canvasDom.style.cursor = "ne-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 4:
|
|
|
|
|
canvasDom.style.cursor = "sw-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 5:
|
|
|
|
|
canvasDom.style.cursor = "w-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 6:
|
|
|
|
|
canvasDom.style.cursor = "nw-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 7:
|
|
|
|
|
canvasDom.style.cursor = "s-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 8:
|
|
|
|
|
canvasDom.style.cursor = "n-resize";
|
|
|
|
|
break;
|
|
|
|
|
case 9:
|
|
|
|
|
canvasDom.style.cursor = "move";
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
canvasDom.style.cursor = "default";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//得到落点在一个框中的区域
|
|
|
|
|
getEventArea(index, x, y) {
|
|
|
|
|
const data = this.recArrs[index];
|
|
|
|
|
// console.log("this.recArrs", this.recArrs);
|
|
|
|
|
// console.log("data", data);
|
|
|
|
|
if (
|
|
|
|
|
x > data.x - this.curObj.radious &&
|
|
|
|
|
x < data.x + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
if (
|
|
|
|
|
y > data.y - this.curObj.radious &&
|
|
|
|
|
y < data.y + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 1;
|
|
|
|
|
} else if (
|
|
|
|
|
y > data.y + this.curObj.radious &&
|
|
|
|
|
y < data.y + data.h - this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 2;
|
|
|
|
|
} else if (
|
|
|
|
|
y > data.y + data.h - this.curObj.radious &&
|
|
|
|
|
y < data.y + data.h + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 3;
|
|
|
|
|
}
|
|
|
|
|
} else if (
|
|
|
|
|
x > data.x + data.w - this.curObj.radious &&
|
|
|
|
|
x < data.x + data.w + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
if (
|
|
|
|
|
y > data.y - this.curObj.radious &&
|
|
|
|
|
y < data.y + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 4;
|
|
|
|
|
} else if (
|
|
|
|
|
y > data.y + this.curObj.radious &&
|
|
|
|
|
y < data.y + data.h - this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 5;
|
|
|
|
|
} else if (
|
|
|
|
|
y > data.y + data.h - this.curObj.radious &&
|
|
|
|
|
y < data.y + data.h + this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 6;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (
|
|
|
|
|
y > data.y - this.curObj.radious &&
|
|
|
|
|
y < data.y + this.curObj.radious &&
|
|
|
|
|
x > data.x + this.curObj.radious &&
|
|
|
|
|
x < data.x + data.w - this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 7;
|
|
|
|
|
} else if (
|
|
|
|
|
y > data.y + data.h - this.curObj.radious &&
|
|
|
|
|
y < data.y + data.h + this.curObj.radious &&
|
|
|
|
|
x > data.x + this.curObj.radious &&
|
|
|
|
|
x < data.x + data.w - this.curObj.radious
|
|
|
|
|
) {
|
|
|
|
|
return 8;
|
|
|
|
|
} else {
|
|
|
|
|
return 9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取鼠标落点所在矩形的index, -1 表示没有落在任何框内
|
|
|
|
|
getEventIndex(x, y) {
|
|
|
|
|
if (!this.recArrs.length) return -1;
|
|
|
|
|
for (var i = 0; i < this.recArrs.length; i++) {
|
|
|
|
|
const limitX = x > this.recArrs[i].x - this.curObj.radious;
|
|
|
|
|
const limitW =
|
|
|
|
|
x < this.recArrs[i].x + this.recArrs[i].w + this.curObj.radious;
|
|
|
|
|
const limitY = y > this.recArrs[i].y - this.curObj.radious;
|
|
|
|
|
const limitH =
|
|
|
|
|
y < this.recArrs[i].y + this.recArrs[i].h + this.curObj.radious;
|
|
|
|
|
// 有在范围内的，返回index
|
|
|
|
|
if (limitX && limitY && limitW && limitH) {
|
|
|
|
|
return i;
|
|
|
|
|
}
|
|
|
|
|
// 没有返回 -1
|
|
|
|
|
if (i == this.recArrs.length - 1) {
|
|
|
|
|
return -1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 鼠标抬起事件
|
|
|
|
|
upFunction(e) {
|
|
|
|
|
console.log("鼠标抬起", e);
|
|
|
|
|
if (this.curObj.isRightClick) {
|
|
|
|
|
if (this.curObj.index !== -1) {
|
|
|
|
|
// 删除，重绘
|
|
|
|
|
this.recArrs.splice(this.curObj.index, 1);
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
}
|
|
|
|
|
this.curObj.isRightClick = false;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.curObj.resize = false;
|
|
|
|
|
this.curObj.drag = false;
|
|
|
|
|
|
|
|
|
|
// 如果是画图
|
|
|
|
|
if (this.curObj.draw) {
|
|
|
|
|
this.addToRecs(e);
|
|
|
|
|
this.curObj.draw = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("鼠标抬起-当前矩形框", this.recArrs);
|
|
|
|
|
},
|
|
|
|
|
// 添加矩形
|
|
|
|
|
addToRecs(e) {
|
|
|
|
|
let rec = {
|
|
|
|
|
x: this.curObj.x > e.offsetX ? e.offsetX : this.curObj.x, // x点
|
|
|
|
|
y: this.curObj.y > e.offsetY ? e.offsetY : this.curObj.y, // y点
|
|
|
|
|
w: Math.abs(e.offsetX - this.curObj.x), // 宽
|
|
|
|
|
h: Math.abs(e.offsetY - this.curObj.y), // 高
|
|
|
|
|
text: "矩形框" + this.recArrs.length, // 默认填充文本
|
|
|
|
|
type: 0, // 类型
|
|
|
|
|
// 其他需要的数据自行添加...
|
|
|
|
|
};
|
|
|
|
|
// 防止误触
|
|
|
|
|
if (rec.w > 2 && rec.h > 2) {
|
|
|
|
|
this.recArrs.push(rec);
|
|
|
|
|
console.log("recArrs", this.recArrs);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//保存图片和数据
|
|
|
|
|
savePointer() {
|
|
|
|
|
let params = {
|
|
|
|
|
labels: [],
|
|
|
|
|
path: this.parentdata.name + "/" + this.currentNodeData.name,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < this.recArrs.length; i++) {
|
|
|
|
|
params.labels.push({
|
|
|
|
|
centerX: (this.recArrs[i].x + this.recArrs[i].w / 2) / this.imgWidth,
|
|
|
|
|
centerY: (this.recArrs[i].y + this.recArrs[i].h / 2) / this.imgHeight,
|
|
|
|
|
width: this.recArrs[i].w / this.imgWidth,
|
|
|
|
|
height: this.recArrs[i].h / this.imgHeight,
|
|
|
|
|
type: this.recArrs[i].type,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log(params);
|
|
|
|
|
saveLabelsApi(params)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
if (res.success) {
|
|
|
|
|
this.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
duration: 1500,
|
|
|
|
|
message: res.data,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
EventBus.$emit("treeHandleNode", this.currentNodeData);
|
|
|
|
|
EventBus.$emit("treelist");
|
|
|
|
|
this.recArrs = [];
|
|
|
|
|
this.clearCanvas();
|
|
|
|
|
this.drawOldRect();
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
duration: 1500,
|
|
|
|
|
message: "保存失败",
|
|
|
|
|
type: "error",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
//删除图片和数据
|
|
|
|
|
deletePic() {
|
|
|
|
|
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
deleteApi({
|
|
|
|
|
path: this.parentdata.name + "/" + this.currentNodeData.name,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.$message({
|
|
|
|
|
type: "success",
|
|
|
|
|
message: "删除成功!",
|
|
|
|
|
});
|
|
|
|
|
EventBus.$emit("treelist");
|
|
|
|
|
localStorage.removeItem("currentData");
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.drawPicBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.pointBox {
|
|
|
|
|
//background: #fcc;
|
|
|
|
|
right: 14px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
//border: 1px solid #dcdfe6;
|
|
|
|
|
z-index: 22;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
h3 {
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.el-button--danger {
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
margin-left: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.picRow {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
//height: 32px;
|
|
|
|
|
p {
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
// height: 32px;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
span {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-select {
|
|
|
|
|
width: 140px;
|
|
|
|
|
.el-input--suffix .el-input__inner {
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.picCanvans {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 142px);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
h3 {
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
.wrap {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
//border: 1px solid #dcdfe6;
|
|
|
|
|
// background: rgba(0, 0, 0, 0.3);
|
|
|
|
|
img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 800px;
|
|
|
|
|
cursor: move;
|
|
|
|
|
-moz-user-select: none; /*火狐*/
|
|
|
|
|
-webkit-user-select: none; /*webkit浏览器*/
|
|
|
|
|
-ms-user-select: none; /*IE10*/
|
|
|
|
|
-khtml-user-select: none; /*早期浏览器*/
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
.canvas_dom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
fanluyan
1 year ago
