<template>
|
<div
|
class="s-cavas"
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
>
|
<canvas
|
ref="myCanvas"
|
:width="canvasWidth"
|
:height="canvasHeight"
|
:style="`background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`"
|
></canvas>
|
|
<el-tooltip
|
content="刷新底图"
|
placement="bottom"
|
popper-class="atooltip"
|
v-if="isShowRefresh"
|
>
|
<span class="iconfont icongengxin" @click="refresh"></span>
|
</el-tooltip>
|
<p class="tip" :style="disabled ? `display:block;` : `display:none;`">
|
批量配置方式不允许绘制区域，请选择摄像机进行区域绘制
|
</p>
|
<el-dialog
|
title
|
:visible.sync="visible"
|
width="1150px"
|
append-to-body
|
:before-close="cancelFunc"
|
>
|
<canvas-dialog
|
ref="bigCanvas"
|
:canvasDataToChild="canvasData"
|
:snapshot_url="canvasBg"
|
@refresh="refresh"
|
></canvas-dialog>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cancelFunc" size="small">取 消</el-button>
|
<el-button type="primary" @click="handleOk" size="small"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import canvasDialog from "./Dialog";
|
import { updateSnapshot } from "@/api/camera";
|
export default {
|
name: "myCanvas",
|
components: {
|
canvasDialog,
|
},
|
props: {
|
divId: {
|
default: "my-canvas",
|
type: String,
|
},
|
isGB28181: {
|
default: false,
|
type: Boolean,
|
},
|
isShowRefresh: {
|
default: true,
|
type: Boolean,
|
},
|
sourceType: {
|
default: 1,
|
type: Number,
|
},
|
isShowDrawArrow: {
|
default: false,
|
type: Boolean,
|
},
|
disabled: {
|
default: false,
|
type: Boolean,
|
},
|
canvasDataShow: {
|
default: () => {
|
return { line: [], rect: [], arrow: [], polygon: [] };
|
},
|
type: Object,
|
},
|
currentCameraId: {
|
type: String,
|
default: "",
|
},
|
snapshot_url: {
|
type: String,
|
default: "",
|
},
|
isLink: {
|
type: Boolean,
|
default: false,
|
},
|
loading: {
|
type: Boolean,
|
default: false,
|
},
|
canvasWidth: {
|
type: Number,
|
default: 576,
|
},
|
canvasHeight: {
|
type: Number,
|
default: 324,
|
},
|
showProportion: {
|
type: Number,
|
default: 1.666,
|
},
|
},
|
computed: {
|
canvasBg() {
|
if (this.snapshot_url) {
|
// 数据栈自动上传处理
|
if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
|
return this.snapshot_url.replace("/opt/vasystem", "");
|
}
|
|
if (this.sourceType == 2) {
|
return `${this.snapshot_url}`;
|
} else {
|
return `/httpImage/${this.snapshot_url}`;
|
}
|
} else {
|
return this.blackImg;
|
}
|
},
|
},
|
data() {
|
return {
|
blackImg: require("../../assets/img/baseimg.png"),
|
canvasData: {
|
line: [],
|
rect: [],
|
arrow: [],
|
polygon: [],
|
}, // 最终输出的画布坐标数据
|
canvasPic: new Image(), // 撤销用的图片
|
canvasHistory: [], // 历史数据，以供撤销使用
|
step: -1, // 记录索引，以供撤销使用
|
c: null,
|
ctx: null,
|
visible: false,
|
baseImg: undefined,
|
//showProportion: 1.666
|
};
|
},
|
watch: {
|
loading: {
|
handler(newVal, oldVal) {
|
// console.log(newVal,'loading')
|
if (newVal) {
|
this.baseImg = "";
|
this.refresh();
|
}
|
},
|
deep: true,
|
},
|
canvasDataShow: {
|
handler(newVal, oldVal) {
|
// console.log(newVal, "canvasDataShow newVal");
|
this.canvasData.line = newVal.line;
|
this.canvasData.rect = newVal.rect;
|
this.canvasData.arrow = newVal.arrow;
|
this.canvasData.polygon = newVal.polygon;
|
this.clickSelect(this.canvasData);
|
},
|
deep: true,
|
},
|
},
|
mounted() {
|
this.$nextTick(() => {
|
// this.c = document.querySelector("#" + this.divId);
|
this.c = this.$refs.myCanvas;
|
this.ctx = this.c.getContext("2d");
|
this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow));
|
this.clickSelect(this.canvasData);
|
});
|
},
|
methods: {
|
// 获取canvas底图
|
async getCanvasPic() {
|
if (TreeDataPool.selectedNode.type == "MENU") {
|
return;
|
}
|
// this.$emit('changeBaseImg',this.currentCameraId)
|
this.$emit("changeLoading", true);
|
if (this.currentCameraId) {
|
let _this = this;
|
await updateSnapshot(this.currentCameraId, this.isGB28181)
|
.then((res) => {
|
if (res.data.cameraId === _this.currentCameraId) {
|
this.baseImg = res.data.snapshotUrl;
|
this.$emit(
|
"refresh",
|
res.data.snapshotUrl,
|
_this.currentCameraId
|
);
|
this.$forceUpdate();
|
this.$notify({
|
type: "success",
|
message: "底图已刷新",
|
});
|
}
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: "底图刷新失败",
|
});
|
});
|
this.$emit("changeLoading", false);
|
}
|
},
|
showModal() {
|
// console.log(this.canvasData, "点击绘制的时候传递过去的数据");
|
this.visible = true;
|
this.$nextTick(() => {
|
// this.$refs.bigCanvas.delCursor = {}
|
});
|
},
|
cancelFunc() {
|
this.visible = false;
|
this.$refs.bigCanvas.cancel();
|
// console.log("关闭了");
|
},
|
handleOk() {
|
// 判断图形的名字是否重复
|
// console.log("ok");
|
this.$refs.bigCanvas.changeType("0");
|
let repeatName = this.isRepeat();
|
if (repeatName !== "") {
|
this.$notify({
|
type: "error",
|
message: repeatName + "图形名称重复，请更正！",
|
});
|
return;
|
}
|
this.$notify({
|
type: "success",
|
message: "已保存绘制！",
|
});
|
// 每次保存关闭模态窗时都要把模态窗的数据写到父组件里来
|
this.canvasData = this.$refs.bigCanvas.canvasData;
|
// 顺便甩到更外层去
|
this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
|
// console.log("你好", this.canvasData);
|
|
this.clickSelect(this.canvasData);
|
this.visible = false;
|
},
|
// 回显cavas数据
|
// 点击选中变色 将当前页面所有路径重绘判断当前鼠标的坐标在哪个图形内 如果不传坐标参数就是回显的方法
|
clickSelect(e) {
|
this.ctx.clearRect(0, 0, this.c.width, this.c.height);
|
let _this = this; // 集合中遍历需要将this转存一下使用
|
_this.canvasData.line.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "default";
|
if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
|
// 如果传入了事件坐标，就用isPointInStroke判断一下
|
// 如果当前环境覆盖了该坐标，就将图形的index放到数组里
|
// 当鼠标移入之后将当前的模式切换为选中模式
|
_this.type = "0";
|
_this.delCursor.type = "1";
|
_this.delCursor.index = i;
|
// 将当前元素标红
|
_this.ctx.strokeStyle = "red";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "pointer";
|
}
|
});
|
_this.canvasData.rect.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[2].x / _this.showProportion,
|
v.location[2].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[3].x / _this.showProportion,
|
v.location[3].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "default";
|
if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
|
// 如果传入了事件坐标，就用isPointInStroke判断一下
|
// 当鼠标移入之后将当前的模式切换为选中模式
|
_this.type = "0";
|
_this.delCursor.type = "2";
|
_this.delCursor.index = i;
|
// 将当前元素标红
|
_this.ctx.strokeStyle = "red";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[2].x / _this.showProportion,
|
v.location[2].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[3].x / _this.showProportion,
|
v.location[3].y / _this.showProportion
|
);
|
_this.ctx.lineTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "pointer";
|
}
|
});
|
_this.canvasData.arrow.forEach(function (v, i) {
|
_this.ctx.strokeStyle = "yellow";
|
// _this.ctx.beginPath()
|
// _this.ctx.moveTo(v.location[0].x / 2, v.location[0].y / 2)
|
// _this.ctx.lineTo(v.location[1].x / 2, v.location[1].y / 2)
|
// _this.ctx.stroke()
|
_this.drawArrow(
|
_this.ctx,
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion,
|
20,
|
30,
|
"yellow"
|
); // 绘制方法
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "default";
|
if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
|
// 如果传入了事件坐标，就用isPointInStroke判断一下
|
// 如果当前环境覆盖了该坐标，就将图形的index放到数组里
|
// 当鼠标移入之后将当前的模式切换为选中模式
|
_this.type = "0";
|
_this.delCursor.type = "4";
|
_this.delCursor.index = i;
|
// 将当前元素标红
|
_this.ctx.strokeStyle = "red";
|
// _this.ctx.beginPath()
|
// _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
|
// _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
|
// _this.ctx.stroke()
|
_this.drawArrow(
|
_this.ctx,
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.location[1].x / _this.showProportion,
|
v.location[1].y / _this.showProportion,
|
20,
|
30,
|
"red"
|
); // 绘制方法
|
_this.showRemarks(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "pointer";
|
}
|
});
|
_this.canvasData.polygon.forEach(function (v, i) {
|
if (v.location.length === 0) {
|
return;
|
}
|
_this.ctx.strokeStyle = "yellow";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
for (let i = 1; i < v.location.length; i++) {
|
_this.ctx.lineTo(
|
v.location[i].x / _this.showProportion,
|
v.location[i].y / _this.showProportion
|
);
|
}
|
_this.ctx.closePath();
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[v.location.length - 1].x / _this.showProportion,
|
v.location[v.location.length - 1].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "default";
|
if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
|
// 如果传入了事件坐标，就用isPointInStroke判断一下
|
// 如果当前环境覆盖了该坐标，就将图形的index放到数组里
|
// 当鼠标移入之后将当前的模式切换为选中模式
|
_this.type = "0";
|
_this.delCursor.type = "5";
|
_this.delCursor.index = i;
|
// 将当前元素标红
|
_this.ctx.strokeStyle = "red";
|
_this.ctx.beginPath();
|
_this.ctx.moveTo(
|
v.location[0].x / _this.showProportion,
|
v.location[0].y / _this.showProportion
|
);
|
for (let i = 1; i < v.location.length; i++) {
|
_this.ctx.lineTo(
|
v.location[i].x / _this.showProportion,
|
v.location[i].y / _this.showProportion
|
);
|
}
|
_this.ctx.closePath();
|
_this.ctx.stroke();
|
_this.showRemarks(
|
v.location[v.location.length - 1].x / _this.showProportion,
|
v.location[v.location.length - 1].y / _this.showProportion,
|
v.name
|
);
|
_this.c.style.cursor = "pointer";
|
}
|
});
|
},
|
// 回显图形备注
|
showRemarks(x, y, remarks) {
|
this.ctx.moveTo(x, y - 10); // 因为放大之后是y-20，所以缩小版的为y-10
|
this.ctx.fillStyle = "green"; // 设置填充颜色为绿色
|
this.ctx.font = '10px "微软雅黑"'; // 设置字体
|
this.ctx.textBaseline = "bottom"; // 设置字体底线对齐绘制基线
|
this.ctx.textAlign = "left"; // 设置字体对齐的方式
|
this.ctx.fillText(remarks, x, y - 10); // 填充文字
|
},
|
// 箭头绘制函数
|
drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
|
// ctx：Canvas绘图环境
|
// fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
|
// toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
|
// theta：三角斜边一直线夹角
|
// headlen：三角斜边长度
|
// width：箭头线宽度
|
// color：箭头颜色
|
theta = typeof theta !== "undefined" ? theta : 30;
|
headlen = typeof theta !== "undefined" ? headlen : 10;
|
width = typeof width !== "undefined" ? width : 1;
|
color = typeof color !== "undefined" ? color : "yellow";
|
// 计算各角度和对应的P2,P3坐标
|
let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
|
let angle1 = ((angle + theta) * Math.PI) / 180;
|
let angle2 = ((angle - theta) * Math.PI) / 180;
|
let topX = headlen * Math.cos(angle1);
|
let topY = headlen * Math.sin(angle1);
|
let botX = headlen * Math.cos(angle2);
|
let botY = headlen * Math.sin(angle2);
|
|
ctx.save();
|
ctx.beginPath();
|
let arrowX = fromX - topX;
|
let arrowY = fromY - topY;
|
ctx.moveTo(arrowX, arrowY);
|
ctx.moveTo(fromX, fromY);
|
ctx.lineTo(toX, toY);
|
arrowX = toX + topX;
|
arrowY = toY + topY;
|
ctx.moveTo(arrowX, arrowY);
|
ctx.lineTo(toX, toY);
|
arrowX = toX + botX;
|
arrowY = toY + botY;
|
ctx.lineTo(arrowX, arrowY);
|
ctx.strokeStyle = color;
|
ctx.lineWidth = width;
|
ctx.stroke();
|
ctx.restore();
|
},
|
async refresh() {
|
// console.log(this.loading,'刷新底图',this.snapshot_url)
|
if (!this.currentCameraId) {
|
return false;
|
}
|
// await this.$emit('changeLoading', true)
|
this.getCanvasPic();
|
},
|
// 判断图形名称是否重复
|
isRepeat() {
|
let _this = this; // 集合中遍历需要将this转存一下使用
|
let nameArray = [];
|
for (const v of _this.$refs.bigCanvas.canvasData.line) {
|
for (const item of nameArray) {
|
if (v.name === item) {
|
return v.name;
|
}
|
}
|
nameArray.push(v.name);
|
}
|
for (const v of _this.$refs.bigCanvas.canvasData.arrow) {
|
for (const item of nameArray) {
|
if (v.name === item) {
|
return v.name;
|
}
|
}
|
nameArray.push(v.name);
|
}
|
for (const v of _this.$refs.bigCanvas.canvasData.rect) {
|
for (const item of nameArray) {
|
if (v.name === item) {
|
return v.name;
|
}
|
}
|
nameArray.push(v.name);
|
}
|
for (const v of _this.$refs.bigCanvas.canvasData.polygon) {
|
for (const item of nameArray) {
|
if (v.name === item) {
|
return v.name;
|
}
|
}
|
nameArray.push(v.name);
|
}
|
return "";
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
canvas {
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
.s-cavas {
|
// width: 576px;
|
// height: 324px;
|
margin-top: 10px;
|
position: relative;
|
overflow: auto;
|
@media screen {
|
}
|
.tip {
|
position: absolute;
|
width: 350px;
|
left: 80px;
|
top: 90px;
|
color: white;
|
font-size: 1.5rem;
|
}
|
span {
|
position: relative;
|
left: 265px;
|
top: 6px;
|
font-size: 2.5rem;
|
cursor: pointer;
|
color: #3d68e1;
|
}
|
}
|
.img-icon {
|
width: 600px;
|
height: 480px;
|
background-size: cover;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
</style>
|
