From 814985200bc5dd73368a603a594a6f3469a8befd Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 30 十二月 2022 16:57:00 +0800
Subject: [PATCH] 修复树组件多选的bug
---
src/components/canvas/Dialog.vue | 568 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 330 insertions(+), 238 deletions(-)
diff --git a/src/components/canvas/Dialog.vue b/src/components/canvas/Dialog.vue
index 8d66184..9e743eb 100644
--- a/src/components/canvas/Dialog.vue
+++ b/src/components/canvas/Dialog.vue
@@ -5,19 +5,28 @@
ref="remarksName"
v-model="delCursor.remarksName"
size="mini"
- style="margin-left: 90px;margin-top: 15px; width: 150px; position:relation;"
+ style="
+ margin-left: 90px;
+ margin-top: 15px;
+ width: 150px;
+ position: relation;
+ "
placeholder="鍥惧舰澶囨敞"
@change="changeName"
></el-input>
</p>
- <el-row style="margin-top:10px">
- <el-col :span="2" style="position:relative;margin-top:10px">
- <el-tooltip content="鍒囨崲鍒版鐘舵�佸悗鍙�変腑宸茬敾鍥惧舰" placement="left" popper-class="atooltip">
+ <el-row style="margin-top: 10px">
+ <el-col :span="2" style="position: relative; margin-top: 10px">
+ <el-tooltip
+ content="鍒囨崲鍒版鐘舵�佸悗鍙�変腑宸茬敾鍥惧舰"
+ placement="left"
+ popper-class="atooltip"
+ >
<el-button
class="btn"
@click="changeType('0')"
:disabled="disableSelect"
- :style="type == '0'? 'border:2px solid #0066eb':''"
+ :style="type == '0' ? 'border:2px solid #0066eb' : ''"
>
<i class="iconfont iconshou"></i>
</el-button>
@@ -26,9 +35,13 @@
content="鐩寸嚎"
placement="left"
popper-class="atooltip"
- :style="type == '1'? 'border:2px solid #0066eb':''"
+ :style="type == '1' ? 'border:2px solid #0066eb' : ''"
>
- <el-button class="btn" @click="changeType('1')" :disabled="disableLine">
+ <el-button
+ class="btn"
+ @click="changeType('1')"
+ :disabled="disableLine"
+ >
<i class="iconfont iconzhixian"></i>
</el-button>
</el-tooltip>
@@ -36,9 +49,13 @@
content="鐭╁舰"
placement="left"
popper-class="atooltip"
- :style="type == '2'? 'border:2px solid #0066eb':''"
+ :style="type == '2' ? 'border:2px solid #0066eb' : ''"
>
- <el-button class="btn" @click="changeType('2')" :disabled="disableRect">
+ <el-button
+ class="btn"
+ @click="changeType('2')"
+ :disabled="disableRect"
+ >
<i class="iconfont iconlegend-base"></i>
</el-button>
</el-tooltip>
@@ -46,9 +63,13 @@
content="绠ご"
placement="left"
popper-class="atooltip"
- :style="type == '4'? 'border:2px solid #0066eb':''"
+ :style="type == '4' ? 'border:2px solid #0066eb' : ''"
>
- <el-button class="btn" @click="changeType('4')" :disabled="disableArrow">
+ <el-button
+ class="btn"
+ @click="changeType('4')"
+ :disabled="disableArrow"
+ >
<i class="iconfont iconrighttop"></i>
</el-button>
</el-tooltip>
@@ -56,29 +77,54 @@
content="澶氳竟褰細鍙屽嚮缁撴潫缁樺埗"
placement="left"
popper-class="atooltip"
- :style="type == '5'? 'border:2px solid #0066eb':''"
+ :style="type == '5' ? 'border:2px solid #0066eb' : ''"
>
- <el-button @click="changeType('5')" class="btn" :disabled="disablePolygon">
+ <el-button
+ @click="changeType('5')"
+ class="btn"
+ :disabled="disablePolygon"
+ >
<i class="iconfont iconduobianxing"></i>
</el-button>
</el-tooltip>
- <el-tooltip content="閫変腑鍥惧舰鍐嶇紪杈戦噸缁橈紝閲嶇粯鐨勫浘褰繚鐣欎箣鍓嶇殑鍚嶇О" placement="left" popper-class="atooltip">
+ <el-tooltip
+ content="閫変腑鍥惧舰鍐嶇紪杈戦噸缁橈紝閲嶇粯鐨勫浘褰繚鐣欎箣鍓嶇殑鍚嶇О"
+ placement="left"
+ popper-class="atooltip"
+ >
<el-button class="btn" @click="edit()" :disabled="disableSelect">
<i class="iconfont iconxiugaitubiao1"></i>
</el-button>
</el-tooltip>
- <el-tooltip content="鍏堥�変腑鍥惧舰锛屽啀鍒犻櫎" placement="left" popper-class="atooltip">
+ <el-tooltip
+ content="鍏堥�変腑鍥惧舰锛屽啀鍒犻櫎"
+ placement="left"
+ popper-class="atooltip"
+ >
<el-button class="btn" @click="del()" :disabled="disableSelect">
<i class="iconfont iconshanchu5"></i>
</el-button>
</el-tooltip>
- <el-tooltip content="娓呯┖鎵�鏈夊凡鐢诲浘褰紝姝ゆ搷浣滀笉鍙挙閿�" placement="left" popper-class="atooltip">
+ <el-tooltip
+ content="娓呯┖鎵�鏈夊凡鐢诲浘褰紝姝ゆ搷浣滀笉鍙挙閿�"
+ placement="left"
+ popper-class="atooltip"
+ >
<el-button class="btn" @click="clear()" :disabled="disableSelect">
<i class="iconfont iconqingkong"></i>
</el-button>
</el-tooltip>
- <el-tooltip content="鎾ら攢涓婁竴姝ユ搷浣�" placement="left" popper-class="atooltip">
- <el-button class="btn" @click="del()" :disabled="disableSelect" style="border:0px">
+ <el-tooltip
+ content="鎾ら攢涓婁竴姝ユ搷浣�"
+ placement="left"
+ popper-class="atooltip"
+ >
+ <el-button
+ class="btn"
+ @click="undo()"
+ :disabled="disableSelect"
+ style="border: 0px"
+ >
<i class="iconfont iconfanhui1" style="font-size: 2rem"></i>
</el-button>
<!-- <span
@@ -90,20 +136,30 @@
</el-tooltip>
<!-- <el-button type="default" @click="undo()">鎾ら攢</el-button> -->
</el-col>
- <el-col :span="22" style="position:relative;width:980px;padding-left:10px">
+ <el-col
+ :span="22"
+ style="position: relative; width: 980px; padding-left: 10px"
+ >
<canvas
id="canvasDialog"
ref="canvasDialog"
width="960"
height="540"
- :style="
- `position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;`
- "
+ :style="`position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;`"
></canvas>
<p
- style="position:absolute;width:350px;left:80px;top:90px;color:white;font-size:1.5rem"
+ style="
+ position: absolute;
+ width: 350px;
+ left: 80px;
+ top: 90px;
+ color: white;
+ font-size: 1.5rem;
+ "
:style="disabled ? `display:block;` : `display:none;`"
- >鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�</p>
+ >
+ 鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�
+ </p>
<!-- <span
class="iconfont icongengxin"
@click="refresh"
@@ -139,7 +195,7 @@
line: [],
rect: [], // {id:'uuid', name: '鐭╁舰1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
arrow: [],
- polygon: []
+ polygon: [],
},
// canvasData: this.canvasDataToChild, // 鏈�缁堣緭鍑虹殑鐢诲竷鍧愭爣鏁版嵁
originX: null, // 褰撳墠鐐瑰嚮鐐箈
@@ -151,7 +207,7 @@
c: null,
ctx: null,
inputWidth: 80,
- oldName: "" // 鐢ㄦ潵鏆傚瓨鏇存敼涔嬪墠鐨剅emarksName,鏂逛究鏀捐繘鎾ら攢闃熷垪閲�
+ oldName: "", // 鐢ㄦ潵鏆傚瓨鏇存敼涔嬪墠鐨剅emarksName,鏂逛究鏀捐繘鎾ら攢闃熷垪閲�
};
},
mounted() {
@@ -165,14 +221,14 @@
}
this.oldName = oldVal.remarksName;
},
- deep: true
+ deep: true,
},
snapshot_url: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
// console.log(newVal, 'canvasDialog')
}
- }
+ },
},
canvasDataToChild: {
handler(newVal, oldVal) {
@@ -186,11 +242,11 @@
this.step++;
this.canvasHistory.push({
type: 0,
- src: this.c.toDataURL("image/png")
+ src: this.c.toDataURL("image/png"),
});
},
- deep: true
- }
+ deep: true,
+ },
// canvasDataToChild: function(newVal, oldVal) {
// this.init()
// }
@@ -198,7 +254,8 @@
methods: {
// 鍒濆鍖栧嚱鏁�
init() {
- this.c = document.querySelector("#canvasDialog");
+ //this.c = document.querySelector("#canvasDialog");
+ this.c = this.$refs["canvasDialog"];
this.ctx = this.c.getContext("2d");
this.drawCanvasInit();
this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild));
@@ -208,17 +265,18 @@
this.step++;
this.canvasHistory.push({
type: 0,
- src: this.c.toDataURL("image/png")
+ src: this.c.toDataURL("image/png"),
});
- this.delCursor = { type: -1, index: -1, remarksName: "", id: "" }
+ this.delCursor = { type: -1, index: -1, remarksName: "", id: "" };
console.log("鐢诲竷鍒濆鍖�");
},
// 鍙栨秷鐢诲竷娓呴櫎鐘舵�佸嚱鏁�
cancel() {
- this.changeType('0')
- this.undisabled()
- this.delCursor = {}
+ this.changeType("0");
+ this.undisabled();
+ //this.delCursor = {}
+ this.delCursor = { type: -1, index: -1, remarksName: "", id: "" };
this.canvasHistory.length = 0;
this.step = -1;
this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild));
@@ -228,19 +286,19 @@
this.step++;
this.canvasHistory.push({
type: 0,
- src: this.c.toDataURL("image/png")
+ src: this.c.toDataURL("image/png"),
});
},
// 涓荤洃鍚祦绋�
drawCanvasInit() {
- window.addEventListener("keydown", e => {
+ window.addEventListener("keydown", (e) => {
let keyID = e.keyCode ? e.keyCode : e.which;
if (keyID === 82) {
// r閿�
this.undo();
}
});
- this.c.addEventListener("mousedown", e => {
+ this.c.addEventListener("mousedown", (e) => {
if (this.type !== "0") {
this.flag = true;
this.originX = e.offsetX; // 榧犳爣钀戒笅鏃剁殑X
@@ -249,30 +307,30 @@
// 缁樺埗澶氳竟褰�
this.points.push({
x: this.originX,
- y: this.originY
+ y: this.originY,
});
}
} else {
this.clickSelect(e);
}
});
- this.c.addEventListener("mousemove", e => {
+ this.c.addEventListener("mousemove", (e) => {
switch (this.type) {
case "1":
- this.drawLine(e)
+ this.drawLine(e);
break;
case "2":
- this.drawRect(e)
+ this.drawRect(e);
break;
case "4":
- this.drawArrow(e)
+ this.drawArrow(e);
break;
case "5":
- this.drawPolygon(e)
+ this.drawPolygon(e);
break;
}
});
- this.c.addEventListener("mouseup", e => {
+ this.c.addEventListener("mouseup", (e) => {
switch (this.type) {
case "1":
// 鐩寸嚎
@@ -288,7 +346,7 @@
break;
}
});
- this.c.addEventListener("dblclick", e => {
+ this.c.addEventListener("dblclick", (e) => {
if (this.type === "5") {
// 缁樺埗澶氳竟褰�
this.polygonDblclick(e);
@@ -307,9 +365,9 @@
this.canvasData.polygon.length = 0;
this.canvasHistory.length = 0;
- this.indexInit()
- this.freedEdit()
- this.delCursor = {}
+ this.indexInit();
+ this.freedEdit();
+ this.delCursor = {};
this.step = -1;
},
// 淇敼鍥惧舰鍚嶇О
@@ -318,27 +376,23 @@
switch (this.delCursor.type) {
case "1":
this.oldName = this.canvasData.line[this.delCursor.index].name;
- this.canvasData.line[
- this.delCursor.index
- ].name = this.delCursor.remarksName;
+ this.canvasData.line[this.delCursor.index].name =
+ this.delCursor.remarksName;
break;
case "2":
this.oldName = this.canvasData.rect[this.delCursor.index].name;
- this.canvasData.rect[
- this.delCursor.index
- ].name = this.delCursor.remarksName;
+ this.canvasData.rect[this.delCursor.index].name =
+ this.delCursor.remarksName;
break;
case "4":
this.oldName = this.canvasData.arrow[this.delCursor.index].name;
- this.canvasData.arrow[
- this.delCursor.index
- ].name = this.delCursor.remarksName;
+ this.canvasData.arrow[this.delCursor.index].name =
+ this.delCursor.remarksName;
break;
case "5":
this.oldName = this.canvasData.polygon[this.delCursor.index].name;
- this.canvasData.polygon[
- this.delCursor.index
- ].name = this.delCursor.remarksName;
+ this.canvasData.polygon[this.delCursor.index].name =
+ this.delCursor.remarksName;
break;
}
this.clickSelect();
@@ -347,33 +401,29 @@
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
- name: this.oldName
+ name: this.oldName,
});
} else {
this.$notify({
type: "warning",
- message: "鍛藉悕闀垮害涓嶈兘瓒呰繃6涓瓧锛�"
+ message: "鍛藉悕闀垮害涓嶈兘瓒呰繃6涓瓧锛�",
});
switch (this.delCursor.type) {
case "1":
- this.delCursor.remarksName = this.canvasData.line[
- this.delCursor.index
- ].name;
+ this.delCursor.remarksName =
+ this.canvasData.line[this.delCursor.index].name;
break;
case "2":
- this.delCursor.remarksName = this.canvasData.rect[
- this.delCursor.index
- ].name;
+ this.delCursor.remarksName =
+ this.canvasData.rect[this.delCursor.index].name;
break;
case "4":
- this.delCursor.remarksName = this.canvasData.arrow[
- this.delCursor.index
- ].name;
+ this.delCursor.remarksName =
+ this.canvasData.arrow[this.delCursor.index].name;
break;
case "5":
- this.delCursor.remarksName = this.canvasData.polygon[
- this.delCursor.indexhhhhhhhhhhh
- ].name;
+ this.delCursor.remarksName =
+ this.canvasData.polygon[this.delCursor.indexhhhhhhhhhhh].name;
break;
}
}
@@ -388,7 +438,7 @@
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
- data: delEle
+ data: delEle,
});
},
// 鍒犻櫎鍏冪礌
@@ -419,7 +469,7 @@
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
deleteLength: 0, // 鍒犻櫎鐨勮瘽deleteLength涓�0
- data: delEle
+ data: delEle,
});
// console.log(this.canvasHistory, "鍒犻櫎涔嬪悗鐨勬挙閿�闃熷垪");
},
@@ -430,37 +480,52 @@
delEle = {
id: this.canvasData.line[this.delCursor.index].id,
name: this.canvasData.line[this.delCursor.index].name,
- location: this.canvasData.line[this.delCursor.index].location
- }
+ location: this.canvasData.line[this.delCursor.index].location,
+ };
// this.canvasData.line.splice(this.delCursor.index, 1);
- this.canvasData.line[this.delCursor.index].location = [{ x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }]
+ this.canvasData.line[this.delCursor.index].location = [
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ ];
break;
case "2":
delEle = {
id: this.canvasData.rect[this.delCursor.index].id,
name: this.canvasData.rect[this.delCursor.index].name,
- location: this.canvasData.rect[this.delCursor.index].location
- }
- // this.canvasData.rect.splice(this.delCursor.index, 1);
- this.canvasData.rect[this.delCursor.index].location = [{ x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }]
+ location: this.canvasData.rect[this.delCursor.index].location,
+ };
+ // this.canvasData.rect.splice(this.delCursor.index, 1);
+ this.canvasData.rect[this.delCursor.index].location = [
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ ];
break;
case "4":
delEle = {
id: this.canvasData.arrow[this.delCursor.index].id,
name: this.canvasData.arrow[this.delCursor.index].name,
- location: this.canvasData.arrow[this.delCursor.index].location
- }
- // this.canvasData.arrow.splice(this.delCursor.index, 1);
- this.canvasData.arrow[this.delCursor.index].location = [{ x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }]
+ location: this.canvasData.arrow[this.delCursor.index].location,
+ };
+ // this.canvasData.arrow.splice(this.delCursor.index, 1);
+ this.canvasData.arrow[this.delCursor.index].location = [
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ ];
break;
case "5":
delEle = {
id: this.canvasData.polygon[this.delCursor.index].id,
name: this.canvasData.polygon[this.delCursor.index].name,
- location: this.canvasData.polygon[this.delCursor.index].location
- }
- // this.canvasData.polygon.splice(this.delCursor.index, 1);
- this.canvasData.polygon[this.delCursor.index].location = [{ x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }, { x: delEle.location[0].x, y: delEle.location[0].y }]
+ location: this.canvasData.polygon[this.delCursor.index].location,
+ };
+ // this.canvasData.polygon.splice(this.delCursor.index, 1);
+ this.canvasData.polygon[this.delCursor.index].location = [
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ { x: delEle.location[0].x, y: delEle.location[0].y },
+ ];
break;
}
this.clickSelect();
@@ -469,22 +534,22 @@
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
- deleteLength: 1, // 缂栬緫鐨勮瘽deleteLength涓�1
- data: delEle
+ deleteLength: 1, // 缂栬緫鐨勮瘽deleteLength涓�1
+ data: delEle,
});
this.editObj = {
id: this.delCursor.id,
type: this.delCursor.type,
index: this.delCursor.index,
- remarksName: this.delCursor.remarksName
- }
- this.disabledOthers(this.delCursor.type)
+ remarksName: this.delCursor.remarksName,
+ };
+ this.disabledOthers(this.delCursor.type);
// 鍒囨崲褰撳墠鐘舵��
- this.changeType(this.delCursor.type)
+ this.changeType(this.delCursor.type);
this.$notify({
type: "warning",
- message: "宸叉摝闄ゆ棫鐨勫尯鍩燂紝璇风洿鎺ョ粯鍒跺尯鍩�"
- })
+ message: "宸叉摝闄ゆ棫鐨勫尯鍩燂紝璇风洿鎺ョ粯鍒跺尯鍩�",
+ });
},
// 鐐瑰嚮閫変腑鍙樿壊 灏嗗綋鍓嶉〉闈㈡墍鏈夎矾寰勯噸缁樺垽鏂綋鍓嶉紶鏍囩殑鍧愭爣鍦ㄥ摢涓浘褰㈠唴 濡傛灉涓嶄紶鍧愭爣鍙傛暟灏辨槸鍥炴樉鐨勬柟娉�
clickSelect(e) {
@@ -566,7 +631,10 @@
v.location[1].x,
v.location[1].y,
20,
- _this.twoPointDistance({ x: v.location[0].x, y: v.location[0].y }, { x: v.location[1].x, y: v.location[1].y }) * 0.1,
+ _this.twoPointDistance(
+ { x: v.location[0].x, y: v.location[0].y },
+ { x: v.location[1].x, y: v.location[1].y }
+ ) * 0.1,
2,
"yellow"
); // 缁樺埗鏂规硶
@@ -594,7 +662,10 @@
v.location[1].x,
v.location[1].y,
20,
- _this.twoPointDistance({ x: v.location[0].x, y: v.location[0].y }, { x: v.location[1].x, y: v.location[1].y }) * 0.1,
+ _this.twoPointDistance(
+ { x: v.location[0].x, y: v.location[0].y },
+ { x: v.location[1].x, y: v.location[1].y }
+ ) * 0.1,
2,
"red"
); // 缁樺埗鏂规硶
@@ -612,12 +683,7 @@
}
_this.ctx.closePath();
_this.ctx.stroke();
- _this.showRemarks(
- v.location[0].x,
- v.location[0].y,
- v.name,
- false
- );
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, false);
_this.c.style.cursor = "pointer";
if (e && _this.minDistance(e.offsetX, e.offsetY, v.location, 10)) {
// 濡傛灉浼犲叆浜嗕簨浠跺潗鏍囷紝灏辩敤isPointInStroke鍒ゆ柇涓�涓�
@@ -637,12 +703,7 @@
}
_this.ctx.closePath();
_this.ctx.stroke();
- _this.showRemarks(
- v.location[0].x,
- v.location[0].y,
- v.name,
- true
- );
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true);
_this.c.style.cursor = "pointer";
}
}
@@ -651,6 +712,8 @@
},
// 鎾ら攢
undo() {
+ console.log(this.canvasHistory);
+ console.log(this.step);
if (this.type === "5" && this.flag) {
// 姝ｅ湪鐢诲杈瑰舰锛屾殏瀛樻暟缁勯噷鏈夊潗鏍囨暟鎹紝鍙竴姝ヤ竴姝ユ挙閿�
if (this.points.length > 0) {
@@ -668,7 +731,7 @@
}
} else {
// 澶氳竟褰㈠凡缁忓畬鎴愭垨鑰呮槸鍦ㄧ敾鍒殑鍥惧舰
- if (this.step >= 0) {
+ if (this.step > 0) {
if (this.canvasHistory[this.step].data !== undefined) {
// 缂栬緫鍒犻櫎姝ラ鐨勬挙閿� 涔嬪墠鍒犻櫎鐨勬暟鎹師璺鍥炲幓
switch (this.canvasHistory[this.step].type) {
@@ -713,14 +776,12 @@
// 淇敼鍥惧舰澶囨敞鐨勬挙閿�
switch (this.canvasHistory[this.step].type) {
case "1":
- this.canvasData.line[
- this.canvasHistory[this.step].index
- ].name = this.canvasHistory[this.step].name;
+ this.canvasData.line[this.canvasHistory[this.step].index].name =
+ this.canvasHistory[this.step].name;
break;
case "2":
- this.canvasData.rect[
- this.canvasHistory[this.step].index
- ].name = this.canvasHistory[this.step].name;
+ this.canvasData.rect[this.canvasHistory[this.step].index].name =
+ this.canvasHistory[this.step].name;
break;
case "4":
this.canvasData.arrow[
@@ -743,6 +804,7 @@
this.step--;
} else {
// 姝ｅ父鐨勬挙閿�
+ console.log("姝ｅ父鐨勬挙閿�");
this.ctx.clearRect(0, 0, this.c.width, this.c.height);
let canvasPic = new Image();
if (this.step > 0) {
@@ -753,9 +815,12 @@
canvasPic.addEventListener("load", function () {
ctx.drawImage(canvasPic, 0, 0);
});
+ console.log("娓呴櫎");
+
// 鎾ら攢鏈�缁堟暟鎹�
switch (this.canvasHistory[this.step].type) {
- case "1":
+ case 1:
+ console.log("娓呴櫎绾�");
this.canvasData.line.pop();
break;
case 2:
@@ -779,55 +844,55 @@
} else {
this.$notify({
type: "warning",
- message: "涓嶈兘鍐嶇户缁挙閿�浜�"
+ message: "涓嶈兘鍐嶇户缁挙閿�浜�",
});
}
}
// console.log("鎾ら攢锛�",this.canvasData);
},
disabledOthers(type) {
- console.log("褰撳墠type:", type)
+ console.log("褰撳墠type:", type);
switch (type) {
case "1":
- this.disableLine = false
- this.disableRect = true
- this.disableArrow = true
- this.disablePolygon = true
- this.disableSelect = true
- break
+ this.disableLine = false;
+ this.disableRect = true;
+ this.disableArrow = true;
+ this.disablePolygon = true;
+ this.disableSelect = true;
+ break;
case "2":
- this.disableLine = true
- this.disableRect = false
- this.disableArrow = true
- this.disablePolygon = true
- this.disableSelect = true
- break
+ this.disableLine = true;
+ this.disableRect = false;
+ this.disableArrow = true;
+ this.disablePolygon = true;
+ this.disableSelect = true;
+ break;
case "4":
- this.disableLine = true
- this.disableRect = true
- this.disableArrow = false
- this.disablePolygon = true
- this.disableSelect = true
- break
+ this.disableLine = true;
+ this.disableRect = true;
+ this.disableArrow = false;
+ this.disablePolygon = true;
+ this.disableSelect = true;
+ break;
case "5":
- this.disableLine = true
- this.disableRect = true
- this.disableArrow = true
- this.disablePolygon = false
- this.disableSelect = true
- break
+ this.disableLine = true;
+ this.disableRect = true;
+ this.disableArrow = true;
+ this.disablePolygon = false;
+ this.disableSelect = true;
+ break;
}
- console.log("绂佺敤鐩寸嚎锛�", this.disableLine)
- console.log("绂佺敤鐭╁舰锛�", this.disableRect)
- console.log("绂佺敤绠ご锛�", this.disableArrow)
- console.log("绂佺敤澶氳竟褰細", this.disablePolygon)
+ console.log("绂佺敤鐩寸嚎锛�", this.disableLine);
+ console.log("绂佺敤鐭╁舰锛�", this.disableRect);
+ console.log("绂佺敤绠ご锛�", this.disableArrow);
+ console.log("绂佺敤澶氳竟褰細", this.disablePolygon);
},
undisabled() {
- this.disableLine = false
- this.disableRect = false
- this.disableArrow = false
- this.disablePolygon = false
- this.disableSelect = false
+ this.disableLine = false;
+ this.disableRect = false;
+ this.disableArrow = false;
+ this.disablePolygon = false;
+ this.disableSelect = false;
},
// 鍒锋柊搴曞浘
refresh() {
@@ -852,6 +917,7 @@
width = typeof width !== "undefined" ? width : 1;
// color = typeof color !== 'undefined' ? color : 'yellow'
// 璁＄畻鍚勮搴﹀拰瀵瑰簲鐨凱2,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;
@@ -884,7 +950,7 @@
let bbox = c.getBoundingClientRect();
return {
x: (x - bbox.left) * (c.width / bbox.width),
- y: (y - bbox.top) * (c.height / bbox.height)
+ y: (y - bbox.top) * (c.height / bbox.height),
/*
* 姝ゅ涓嶇敤涓嬮潰涓よ鏄负浜嗛槻姝娇鐢–SS鍜孞S鏀瑰彉浜哻anvas鐨勯珮瀹戒箣鍚庢槸琛ㄩ潰绉媺澶ц�屽疄闄�
* 鏄剧ず鍍忕礌涓嶅彉鑰岄�犳垚鐨勫潗鏍囪幏鍙栦笉鍑嗙殑鎯呭喌
@@ -945,10 +1011,10 @@
},
// 鍒囨崲鐢荤嚎绫诲瀷
changeType(num) {
- if (num === '0') {
+ if (num === "0") {
this.c.style.cursor = "pointer";
} else {
- this.c.style.cursor = "crosshair"
+ this.c.style.cursor = "crosshair";
}
this.type = num;
},
@@ -1007,14 +1073,17 @@
e.offsetX,
e.offsetY,
20,
- this.twoPointDistance({ x: this.originX, y: this.originY }, { x: e.offsetX, y: e.offsetY }) * 0.1,
+ this.twoPointDistance(
+ { x: this.originX, y: this.originY },
+ { x: e.offsetX, y: e.offsetY }
+ ) * 0.1,
2,
"yellow"
); // 缁樺埗鏂规硶
}
},
twoPointDistance(p1, p2) {
- let dep = Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2));
+ let dep = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
return dep;
},
// 鐢诲杈瑰舰绉诲姩鍑芥暟
@@ -1024,13 +1093,13 @@
this.loadImage();
this.pointsUndo = this.points.concat({
x: e.offsetX,
- y: e.offsetY
+ y: e.offsetY,
});
this.drawPolygonUtil(
this.points.concat({
// concat杩斿洖杩炴帴鍚庣殑鏁扮粍锛屽師鏁扮粍涓嶅彉锛岀浉褰撲簬鎶婄Щ鍔ㄧ殑鍧愭爣浣滀负涓�涓櫄鍋囩殑鍧愭爣杩藉姞鍦ㄥ悗闈�,缁濓紒
x: e.offsetX,
- y: e.offsetY
+ y: e.offsetY,
})
);
}
@@ -1045,51 +1114,51 @@
return;
}
this.flag = false;
- let Id
- let fileName
+ let Id;
+ let fileName;
let coordinate = [];
coordinate.push({
x: this.originX,
- y: this.originY
+ y: this.originY,
});
coordinate.push({
x: e.offsetX,
- y: e.offsetY
+ y: e.offsetY,
});
// console.log("line鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid()
+ Id = this.getUuid();
fileName = this.remarks(this.originX, this.originY, "1");
this.canvasData.line.push({
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
} else {
- Id = this.editObj.id
- fileName = this.editObj.remarksName
+ Id = this.editObj.id;
+ fileName = this.editObj.remarksName;
this.canvasData.line.splice(this.delCursor.index, 1, {
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
}
- this.clickSelect()
- this.undisabled()
- this.c.style.cursor = "crosshair"
+ this.clickSelect();
+ this.undisabled();
+ this.c.style.cursor = "crosshair";
// 灏嗗綋鍓嶅垰鐢诲畬鐨勫浘褰㈠姞鍏ュ垹鏀规父鏍囷紝鍙互灏嗗垰鐢诲畬鐨勫浘褰㈠悕绉版樉绀哄湪宸︿笂瑙�
this.delCursor = {
id: this.getUuid(),
remarksName: fileName,
type: "1",
- index: this.lineIndex - 1
+ index: this.lineIndex - 1,
};
this.url = this.c.toDataURL(); // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
this.step++;
this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
this.canvasHistory.push({ type: 1, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
// this.changeType('0')
- this.freedEdit()
+ this.freedEdit();
},
// 鐢荤煩褰㈡姮璧�
rectMouseUp(e) {
@@ -1105,49 +1174,49 @@
// 閫嗘椂閽堢畻鍑虹煩褰㈠洓瑙掑潗鏍�
coordinate.push({
x: this.originX,
- y: this.originY
+ y: this.originY,
});
coordinate.push({
x: this.originX,
- y: e.offsetY
+ y: e.offsetY,
});
coordinate.push({
x: e.offsetX,
- y: e.offsetY
+ y: e.offsetY,
});
coordinate.push({
x: e.offsetX,
- y: this.originY
+ y: this.originY,
});
- let Id
- let fileName
+ let Id;
+ let fileName;
// console.log("rect鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid()
+ Id = this.getUuid();
fileName = this.remarks(this.originX, this.originY, "2");
this.canvasData.rect.push({
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
} else {
- Id = this.editObj.id
- fileName = this.editObj.remarksName
+ Id = this.editObj.id;
+ fileName = this.editObj.remarksName;
this.canvasData.rect.splice(this.delCursor.index, 1, {
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
}
- this.clickSelect()
- this.undisabled()
- this.c.style.cursor = "crosshair"
+ this.clickSelect();
+ this.undisabled();
+ this.c.style.cursor = "crosshair";
this.delCursor = {
id: Id,
remarksName: fileName,
type: "2",
- index: this.rectIndex - 1
+ index: this.rectIndex - 1,
};
// console.log("鍒氱敾瀹岀殑鐭╁舰鏍囧織锛�",this.delCursor)
this.url = this.c.toDataURL(); // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
@@ -1155,7 +1224,7 @@
this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
this.canvasHistory.push({ type: 2, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
- this.freedEdit()
+ this.freedEdit();
},
// 鐢荤澶存椂鎶捣
arrowMouseUp(e) {
@@ -1167,82 +1236,82 @@
return;
}
this.flag = false;
- let Id
- let fileName
+ let Id;
+ let fileName;
let coordinate = [];
coordinate.push({
x: this.originX,
- y: this.originY
+ y: this.originY,
});
coordinate.push({
x: e.offsetX,
- y: e.offsetY
+ y: e.offsetY,
});
// console.log("arrow鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid()
+ Id = this.getUuid();
fileName = this.remarks(this.originX, this.originY, "4");
this.canvasData.arrow.push({
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
} else {
- Id = this.editObj.id
- fileName = this.editObj.remarksName
+ Id = this.editObj.id;
+ fileName = this.editObj.remarksName;
this.canvasData.arrow.splice(this.delCursor.index, 1, {
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
}
- this.clickSelect()
- this.undisabled()
- this.c.style.cursor = "crosshair"
+ this.clickSelect();
+ this.undisabled();
+ this.c.style.cursor = "crosshair";
// 灏嗗綋鍓嶅垰鐢诲畬鐨勫浘褰㈠姞鍏ュ垹鏀规父鏍囷紝鍙互灏嗗垰鐢诲畬鐨勫浘褰㈠悕绉版樉绀哄湪宸︿笂瑙�
this.delCursor = {
id: this.getUuid(),
remarksName: fileName,
type: "4",
- index: this.arrowIndex - 1
+ index: this.arrowIndex - 1,
};
this.url = this.c.toDataURL(); // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
this.step++;
this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
this.canvasHistory.push({ type: 4, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
// this.changeType('0')
- this.freedEdit()
+ this.freedEdit();
},
// 鐢诲杈瑰舰缁撴潫鏃跺弻鍑�
polygonDblclick(e) {
this.flag = false;
this.points.pop(); // 鍙屽嚮涔嬪悗澶氫竴涓偣鐨勯噸澶嶅潗鏍囷紝闇�瑕佸垹闄�
- let Id
- let fileName
+ let Id;
+ let fileName;
let coordinate = [];
this.points.map((item, index) => {
coordinate.push(item);
});
// console.log("polygon鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid()
+ Id = this.getUuid();
fileName = this.remarks(this.points[0].x, this.points[0].y, "5");
this.canvasData.polygon.push({
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
} else {
- Id = this.editObj.id
- fileName = this.editObj.remarksName
+ Id = this.editObj.id;
+ fileName = this.editObj.remarksName;
this.canvasData.polygon.splice(this.delCursor.index, 1, {
id: Id,
name: fileName,
- location: coordinate
+ location: coordinate,
});
}
- this.clickSelect()
- this.undisabled()
+ this.clickSelect();
+ this.undisabled();
this.c.style.cursor = "crosshair";
this.points.length = 0;
// 灏嗗綋鍓嶅垰鐢诲畬鐨勫浘褰㈠姞鍏ュ垹鏀规父鏍囷紝鍙互灏嗗垰鐢诲畬鐨勫浘褰㈠悕绉版樉绀哄湪宸︿笂瑙�
@@ -1250,7 +1319,7 @@
id: this.getUuid(),
remarksName: fileName,
type: "5",
- index: this.polygonIndex - 1
+ index: this.polygonIndex - 1,
};
this.url = this.c.toDataURL();
this.step++;
@@ -1258,18 +1327,23 @@
this.canvasHistory.push({ type: 5, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
// this.changeType('0')
// console.log("鎬绘暟鎹細",this.canvasData)
- this.freedEdit()
+ this.freedEdit();
},
// 閲婃斁缂栬緫鐘舵��
freedEdit() {
- this.editObj = {}
+ this.editObj = {};
},
// 鍥炴樉鍘嗗彶鏁版嵁鏃惰绠椾竴涓嬪洖鏄剧殑姣忕鍏冪礌鐨勬暟閲忎互渚跨敓鎴愬浘褰㈡敞瑙ｆ椂鑾峰緱姝ｇ‘鐨勫紑澶�
indexInit() {
this.lineIndex = this.canvasData.line.length;
this.rectIndex = this.canvasData.rect.length;
this.arrowIndex = this.canvasData.arrow.length;
- this.polygonIndex = this.canvasData.polygon.length;
+ //鎺掗櫎this.canvasData.polygon鍏ㄩ儴鍖哄煙(鍏ㄩ儴鍖哄煙鐨刬d灏辨槸鎽勫儚鏈虹殑id)
+
+ let filterPolygonArr = this.canvasData.polygon.filter(
+ (item) => item.id != this.TreeDataPool.selectedNode.id
+ );
+ this.polygonIndex = filterPolygonArr.length;
},
// 鐢熸垚uuid
getUuid() {
@@ -1282,19 +1356,37 @@
},
// 鍒ゆ柇涓�涓偣鏄惁绂讳竴涓浘褰㈢殑鏈�灏忚窛绂讳负n鍍忕礌浠ュ唴
minDistance(x, y, locations, n) {
- let flag = false
+ let flag = false;
for (let i = 0; i < locations.length; i++) {
if (i == locations.length - 1) {
- if (this.point2Line(x, y, locations[i].x, locations[i].y, locations[0].x, locations[0].y) < n) {
- flag = true
+ if (
+ this.point2Line(
+ x,
+ y,
+ locations[i].x,
+ locations[i].y,
+ locations[0].x,
+ locations[0].y
+ ) < n
+ ) {
+ flag = true;
}
} else {
- if (this.point2Line(x, y, locations[i].x, locations[i].y, locations[i + 1].x, locations[i + 1].y) < n) {
- flag = true
+ if (
+ this.point2Line(
+ x,
+ y,
+ locations[i].x,
+ locations[i].y,
+ locations[i + 1].x,
+ locations[i + 1].y
+ ) < n
+ ) {
+ flag = true;
}
}
}
- return flag
+ return flag;
},
point2Line(x, y, x1, y1, x2, y2) {
let cross = (x2 - x1) * (x - x1) + (y2 - y1) * (y - y1); // |AB| * |AC|*cos(x)
@@ -1305,15 +1397,15 @@
return Math.sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2) + 0.0);
let r = cross / d2;
- let px = x1 + (x2 - x1) * r; // C鍦� AB涓婄殑鍨傝冻鐐癸紙px锛宲y锛�
+ let px = x1 + (x2 - x1) * r; // C鍦� AB涓婄殑鍨傝冻鐐癸紙px锛宲y锛�
let py = y1 + (y2 - y1) * r;
return Math.sqrt((x - px) * (x - px) + (y - py) * (y - py) + 0.0); //涓ょ偣闂磋窛绂诲叕寮�
- }
+ },
},
props: {
isGB28181: {
default: false,
- type: Boolean
+ type: Boolean,
},
// isShowDrawArrow: {
// default: false,
@@ -1321,7 +1413,7 @@
// },
disabled: {
default: false,
- type: Boolean
+ type: Boolean,
},
canvasDataToChild: {
default: () => {
@@ -1329,16 +1421,16 @@
line: [],
rect: [],
arrow: [],
- polygon: []
+ polygon: [],
};
},
- type: Object
+ type: Object,
},
snapshot_url: {
type: String,
- default: ""
- }
- }
+ default: "",
+ },
+ },
};
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0