From 60df1fd19c0b4bec51c05135852bee1c440499f6 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 23 九月 2022 18:33:21 +0800
Subject: [PATCH] 统一底图比例和smartai同步
---
src/components/canvas/Dialog.vue | 1333 ++++++++++++++++++++++++++-------------------------------
src/views/hashrate/CameraManage/CameraRules/index.vue | 6
2 files changed, 615 insertions(+), 724 deletions(-)
diff --git a/src/components/canvas/Dialog.vue b/src/components/canvas/Dialog.vue
index 2eb48d8..5f1df78 100644
--- a/src/components/canvas/Dialog.vue
+++ b/src/components/canvas/Dialog.vue
@@ -15,9 +15,9 @@
<canvas
id="canvasDialog"
ref="canvasDialog"
- width="1042"
- height="586"
- :style="`position:static;background:url(${snapshot_url}) 0% 0%/1042px 586px no-repeat;`"
+ width="960"
+ height="540"
+ :style="`position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;`"
></canvas>
<p
style="
@@ -35,11 +35,7 @@
</div>
<div class="control">
- <el-tooltip
- content="鍒囨崲鍒版鐘舵�佸悗鍙�変腑宸茬敾鍥惧舰"
- placement="left"
- popper-class="atooltip"
- >
+ <el-tooltip content="鍒囨崲鍒版鐘舵�佸悗鍙�変腑宸茬敾鍥惧舰" placement="left" popper-class="atooltip">
<el-button
class="btn"
@click="changeType('0')"
@@ -49,45 +45,18 @@
<i class="iconfont"></i>
</el-button>
</el-tooltip>
- <el-tooltip
- content="鐩寸嚎"
- placement="left"
- popper-class="atooltip"
- :class="{ selectedBtn: type == '1' }"
- >
- <el-button
- class="btn"
- @click="changeType('1')"
- :disabled="disableLine"
- >
+ <el-tooltip content="鐩寸嚎" placement="left" popper-class="atooltip" :class="{ selectedBtn: type == '1' }">
+ <el-button class="btn" @click="changeType('1')" :disabled="disableLine">
<i class="iconfont"></i>
</el-button>
</el-tooltip>
- <el-tooltip
- content="鐭╁舰"
- placement="left"
- popper-class="atooltip"
- :class="{ selectedBtn: type == '2' }"
- >
- <el-button
- class="btn"
- @click="changeType('2')"
- :disabled="disableRect"
- >
+ <el-tooltip content="鐭╁舰" placement="left" popper-class="atooltip" :class="{ selectedBtn: type == '2' }">
+ <el-button class="btn" @click="changeType('2')" :disabled="disableRect">
<i class="iconfont"></i>
</el-button>
</el-tooltip>
- <el-tooltip
- content="绠ご"
- placement="left"
- popper-class="atooltip"
- :class="{ selectedBtn: type == '4' }"
- >
- <el-button
- class="btn"
- @click="changeType('4')"
- :disabled="disableArrow"
- >
+ <el-tooltip content="绠ご" placement="left" popper-class="atooltip" :class="{ selectedBtn: type == '4' }">
+ <el-button class="btn" @click="changeType('4')" :disabled="disableArrow">
<i class="iconfont"></i>
</el-button>
</el-tooltip>
@@ -97,52 +66,27 @@
popper-class="atooltip"
:class="{ selectedBtn: type == '5' }"
>
- <el-button
- @click="changeType('5')"
- class="btn"
- :disabled="disablePolygon"
- >
+ <el-button @click="changeType('5')" class="btn" :disabled="disablePolygon">
<i class="iconfont"></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"></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"></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"></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="del()" :disabled="disableSelect" style="border: 0px">
<i class="iconfont"></i>
</el-button>
<!-- <span
@@ -184,7 +128,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, // 褰撳墠鐐瑰嚮鐐箈
@@ -196,46 +140,46 @@
c: null,
ctx: null,
inputWidth: 80,
- oldName: "", // 鐢ㄦ潵鏆傚瓨鏇存敼涔嬪墠鐨剅emarksName,鏂逛究鏀捐繘鎾ら攢闃熷垪閲�
- };
+ oldName: "" // 鐢ㄦ潵鏆傚瓨鏇存敼涔嬪墠鐨剅emarksName,鏂逛究鏀捐繘鎾ら攢闃熷垪閲�
+ }
},
mounted() {
- this.init();
+ this.init()
},
watch: {
delCursor: {
handler(newVal, oldVal) {
if (newVal.remarksName) {
- this.inputWidth = newVal.remarksName.length * 20;
+ this.inputWidth = newVal.remarksName.length * 20
}
- this.oldName = oldVal.remarksName;
+ this.oldName = oldVal.remarksName
},
- deep: true,
+ deep: true
},
snapshot_url: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
// console.log(newVal, 'canvasDialog')
}
- },
+ }
},
canvasDataToChild: {
handler(newVal, oldVal) {
// console.log(newVal, '鎵撳紑缁樺埗鍚庢帴鏀跺埌鐨勬暟鎹�')
- this.canvasHistory.length = 0;
- this.step = -1;
- this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild));
- this.clickSelect(this.canvasData);
- this.indexInit();
+ this.canvasHistory.length = 0
+ this.step = -1
+ this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild))
+ this.clickSelect(this.canvasData)
+ this.indexInit()
// 鍏堝綍涓揩鐓э紝涓嶇劧涓�鐢荤嚎灏辨病浜�
- this.step++;
+ 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()
// }
@@ -244,371 +188,363 @@
// 鍒濆鍖栧嚱鏁�
init() {
//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));
- this.clickSelect(this.canvasData);
- this.indexInit();
+ this.c = this.$refs["canvasDialog"]
+ this.ctx = this.c.getContext("2d")
+ this.drawCanvasInit()
+ this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild))
+ this.clickSelect(this.canvasData)
+ this.indexInit()
// 鍏堝綍涓揩鐓э紝涓嶇劧涓�鐢荤嚎灏辨病浜�
- this.step++;
+ this.step++
this.canvasHistory.push({
type: 0,
- src: this.c.toDataURL("image/png"),
- });
- this.delCursor = { type: -1, index: -1, remarksName: "", id: "" };
+ src: this.c.toDataURL("image/png")
+ })
+ this.delCursor = { type: -1, index: -1, remarksName: "", id: "" }
- console.log("鐢诲竷鍒濆鍖�");
+ console.log("鐢诲竷鍒濆鍖�")
},
// 鍙栨秷鐢诲竷娓呴櫎鐘舵�佸嚱鏁�
cancel() {
- this.changeType("0");
- this.undisabled();
+ 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));
- this.clickSelect(this.canvasData);
- this.indexInit();
+ this.delCursor = { type: -1, index: -1, remarksName: "", id: "" }
+ this.canvasHistory.length = 0
+ this.step = -1
+ this.canvasData = JSON.parse(JSON.stringify(this.canvasDataToChild))
+ this.clickSelect(this.canvasData)
+ this.indexInit()
// 鍏堝綍涓揩鐓э紝涓嶇劧涓�鐢荤嚎灏辨病浜�
- this.step++;
+ this.step++
this.canvasHistory.push({
type: 0,
- src: this.c.toDataURL("image/png"),
- });
+ src: this.c.toDataURL("image/png")
+ })
},
// 涓荤洃鍚祦绋�
drawCanvasInit() {
window.addEventListener("keydown", (e) => {
- let keyID = e.keyCode ? e.keyCode : e.which;
+ let keyID = e.keyCode ? e.keyCode : e.which
if (keyID === 82) {
// r閿�
- this.undo();
+ this.undo()
}
- });
+ })
this.c.addEventListener("mousedown", (e) => {
if (this.type !== "0") {
- this.flag = true;
- this.originX = e.offsetX; // 榧犳爣钀戒笅鏃剁殑X
- this.originY = e.offsetY; // 榧犳爣钀戒笅鏃剁殑Y
+ this.flag = true
+ this.originX = e.offsetX // 榧犳爣钀戒笅鏃剁殑X
+ this.originY = e.offsetY // 榧犳爣钀戒笅鏃剁殑Y
if (this.type === "5") {
// 缁樺埗澶氳竟褰�
this.points.push({
x: this.originX,
- y: this.originY,
- });
+ y: this.originY
+ })
}
} else {
- this.clickSelect(e);
+ this.clickSelect(e)
}
- });
+ })
this.c.addEventListener("mousemove", (e) => {
switch (this.type) {
case "1":
- this.drawLine(e);
- break;
+ this.drawLine(e)
+ break
case "2":
- this.drawRect(e);
- break;
+ this.drawRect(e)
+ break
case "4":
- this.drawArrow(e);
- break;
+ this.drawArrow(e)
+ break
case "5":
- this.drawPolygon(e);
- break;
+ this.drawPolygon(e)
+ break
}
- });
+ })
this.c.addEventListener("mouseup", (e) => {
switch (this.type) {
case "1":
// 鐩寸嚎
- this.lineMouseUp(e);
- break;
+ this.lineMouseUp(e)
+ break
case "2":
// 鐭╁舰
- this.rectMouseUp(e);
- break;
+ this.rectMouseUp(e)
+ break
case "4":
// 绠ご
- this.arrowMouseUp(e);
- break;
+ this.arrowMouseUp(e)
+ break
}
- });
+ })
this.c.addEventListener("dblclick", (e) => {
if (this.type === "5") {
// 缁樺埗澶氳竟褰�
- this.polygonDblclick(e);
+ this.polygonDblclick(e)
}
- });
+ })
},
// 娓呴櫎鐢诲竷鍑芥暟
clear() {
// console.log("娓呴櫎");
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
// 娓呯┖淇濆瓨鐨勭姸鎬�
- this.url = "";
- this.canvasData.line.length = 0;
- this.canvasData.rect.length = 0;
- this.canvasData.arrow.length = 0;
- this.canvasData.polygon.length = 0;
- this.canvasHistory.length = 0;
+ this.url = ""
+ this.canvasData.line.length = 0
+ this.canvasData.rect.length = 0
+ this.canvasData.arrow.length = 0
+ this.canvasData.polygon.length = 0
+ this.canvasHistory.length = 0
- this.indexInit();
- this.freedEdit();
- this.delCursor = {};
- this.step = -1;
+ this.indexInit()
+ this.freedEdit()
+ this.delCursor = {}
+ this.step = -1
},
// 淇敼鍥惧舰鍚嶇О
changeName() {
if (this.delCursor.remarksName.length <= 6) {
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;
- break;
+ this.oldName = this.canvasData.line[this.delCursor.index].name
+ 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;
- break;
+ this.oldName = this.canvasData.rect[this.delCursor.index].name
+ 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;
- break;
+ this.oldName = this.canvasData.arrow[this.delCursor.index].name
+ 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;
- break;
+ this.oldName = this.canvasData.polygon[this.delCursor.index].name
+ this.canvasData.polygon[this.delCursor.index].name = this.delCursor.remarksName
+ break
}
- this.clickSelect();
- this.step++;
+ this.clickSelect()
+ this.step++
this.canvasHistory.push({
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;
- break;
+ this.delCursor.remarksName = this.canvasData.line[this.delCursor.index].name
+ break
case "2":
- this.delCursor.remarksName =
- this.canvasData.rect[this.delCursor.index].name;
- break;
+ this.delCursor.remarksName = this.canvasData.rect[this.delCursor.index].name
+ break
case "4":
- this.delCursor.remarksName =
- this.canvasData.arrow[this.delCursor.index].name;
- break;
+ this.delCursor.remarksName = this.canvasData.arrow[this.delCursor.index].name
+ break
case "5":
- this.delCursor.remarksName =
- this.canvasData.polygon[this.delCursor.indexhhhhhhhhhhh].name;
- break;
+ this.delCursor.remarksName = this.canvasData.polygon[this.delCursor.indexhhhhhhhhhhh].name
+ break
}
}
},
// 宸︿笂瑙掕緭鍏ユ澶卞幓鐒︾偣鍚庝繚瀛樹竴寮犲揩鐓т互浣滄挙閿�涔嬬敤
saveUrl() {
// console.log("淇濆瓨涓�寮犲揩鐓�");
- let delEle = {};
- this.clickSelect();
- this.step++;
+ let delEle = {}
+ this.clickSelect()
+ this.step++
this.canvasHistory.push({
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
- data: delEle,
- });
+ data: delEle
+ })
},
// 鍒犻櫎鍏冪礌
del() {
- let delEle = {};
+ let delEle = {}
switch (this.delCursor.type) {
case "1":
- delEle = this.canvasData.line[this.delCursor.index];
- this.canvasData.line.splice(this.delCursor.index, 1);
- break;
+ delEle = this.canvasData.line[this.delCursor.index]
+ this.canvasData.line.splice(this.delCursor.index, 1)
+ break
case "2":
- delEle = this.canvasData.rect[this.delCursor.index];
- this.canvasData.rect.splice(this.delCursor.index, 1);
- break;
+ delEle = this.canvasData.rect[this.delCursor.index]
+ this.canvasData.rect.splice(this.delCursor.index, 1)
+ break
case "4":
- delEle = this.canvasData.arrow[this.delCursor.index];
- this.canvasData.arrow.splice(this.delCursor.index, 1);
- break;
+ delEle = this.canvasData.arrow[this.delCursor.index]
+ this.canvasData.arrow.splice(this.delCursor.index, 1)
+ break
case "5":
- delEle = this.canvasData.polygon[this.delCursor.index];
- this.canvasData.polygon.splice(this.delCursor.index, 1);
- break;
+ delEle = this.canvasData.polygon[this.delCursor.index]
+ this.canvasData.polygon.splice(this.delCursor.index, 1)
+ break
}
- this.clickSelect();
- this.step++;
+ this.clickSelect()
+ this.step++
this.canvasHistory.push({
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
deleteLength: 0, // 鍒犻櫎鐨勮瘽deleteLength涓�0
- data: delEle,
- });
+ data: delEle
+ })
// console.log(this.canvasHistory, "鍒犻櫎涔嬪悗鐨勬挙閿�闃熷垪");
},
edit() {
- let delEle = {};
+ let delEle = {}
switch (this.delCursor.type) {
case "1":
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 },
- ];
- break;
+ { 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,
- };
+ 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;
+ { 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,
- };
+ 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;
+ { 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,
- };
+ 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;
+ { x: delEle.location[0].x, y: delEle.location[0].y }
+ ]
+ break
}
- this.clickSelect();
- this.step++;
+ this.clickSelect()
+ this.step++
this.canvasHistory.push({
type: this.delCursor.type,
src: this.c.toDataURL("image/png"),
index: this.delCursor.index,
deleteLength: 1, // 缂栬緫鐨勮瘽deleteLength涓�1
- data: delEle,
- });
+ 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) {
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
// console.log("褰撳墠鏁版嵁锛�",this.canvasData)
- this.ctx.lineWidth = "2";
- 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, v.location[0].y);
- _this.ctx.lineTo(v.location[1].x, v.location[1].y);
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, false);
- _this.c.style.cursor = "pointer";
+ this.ctx.lineWidth = "2"
+ 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, v.location[0].y)
+ _this.ctx.lineTo(v.location[1].x, v.location[1].y)
+ _this.ctx.stroke()
+ _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鍒ゆ柇涓�涓�
// 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
// 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
- _this.type = "0";
- _this.delCursor.type = "1";
- _this.delCursor.index = i;
- _this.delCursor.remarksName = v.name;
- _this.delCursor.id = v.id;
+ _this.type = "0"
+ _this.delCursor.type = "1"
+ _this.delCursor.index = i
+ _this.delCursor.remarksName = v.name
+ _this.delCursor.id = v.id
// 灏嗗綋鍓嶅厓绱犳爣绾�
- _this.ctx.strokeStyle = "red";
- _this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x, v.location[0].y);
- _this.ctx.lineTo(v.location[1].x, v.location[1].y);
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true);
- _this.c.style.cursor = "pointer";
+ _this.ctx.strokeStyle = "red"
+ _this.ctx.beginPath()
+ _this.ctx.moveTo(v.location[0].x, v.location[0].y)
+ _this.ctx.lineTo(v.location[1].x, v.location[1].y)
+ _this.ctx.stroke()
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true)
+ _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, v.location[0].y);
- _this.ctx.lineTo(v.location[1].x, v.location[1].y);
- _this.ctx.lineTo(v.location[2].x, v.location[2].y);
- _this.ctx.lineTo(v.location[3].x, v.location[3].y);
- _this.ctx.lineTo(v.location[0].x, v.location[0].y);
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, false);
- _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, v.location[0].y)
+ _this.ctx.lineTo(v.location[1].x, v.location[1].y)
+ _this.ctx.lineTo(v.location[2].x, v.location[2].y)
+ _this.ctx.lineTo(v.location[3].x, v.location[3].y)
+ _this.ctx.lineTo(v.location[0].x, v.location[0].y)
+ _this.ctx.stroke()
+ _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鍒ゆ柇涓�涓�
// 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
- _this.type = "0";
- _this.delCursor.type = "2";
- _this.delCursor.index = i;
- _this.delCursor.remarksName = v.name;
- _this.delCursor.id = v.id;
+ _this.type = "0"
+ _this.delCursor.type = "2"
+ _this.delCursor.index = i
+ _this.delCursor.remarksName = v.name
+ _this.delCursor.id = v.id
// console.log("褰撳墠閫変腑鍏冪礌锛�",_this.delCursor)
// 灏嗗綋鍓嶅厓绱犳爣绾�
- _this.ctx.strokeStyle = "red";
- _this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x, v.location[0].y);
- _this.ctx.lineTo(v.location[1].x, v.location[1].y);
- _this.ctx.lineTo(v.location[2].x, v.location[2].y);
- _this.ctx.lineTo(v.location[3].x, v.location[3].y);
- _this.ctx.lineTo(v.location[0].x, v.location[0].y);
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true);
- _this.selectedId = v.id;
- _this.c.style.cursor = "pointer";
+ _this.ctx.strokeStyle = "red"
+ _this.ctx.beginPath()
+ _this.ctx.moveTo(v.location[0].x, v.location[0].y)
+ _this.ctx.lineTo(v.location[1].x, v.location[1].y)
+ _this.ctx.lineTo(v.location[2].x, v.location[2].y)
+ _this.ctx.lineTo(v.location[3].x, v.location[3].y)
+ _this.ctx.lineTo(v.location[0].x, v.location[0].y)
+ _this.ctx.stroke()
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true)
+ _this.selectedId = v.id
+ _this.c.style.cursor = "pointer"
}
- });
- _this.canvasData.arrow.forEach(function (v, i) {
- _this.ctx.strokeStyle = "yellow";
+ })
+ _this.canvasData.arrow.forEach(function(v, i) {
+ _this.ctx.strokeStyle = "yellow"
// _this.ctx.beginPath()
// _this.ctx.moveTo(v.location[0].x, v.location[0].y)
// _this.ctx.lineTo(v.location[1].x, v.location[1].y)
@@ -626,20 +562,20 @@
) * 0.1,
2,
"yellow"
- ); // 缁樺埗鏂规硶
- _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鍒ゆ柇涓�涓� && _this.ctx.isPointInPath(e.offsetX, e.offsetY)
// 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
// 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
- _this.type = "0";
- _this.delCursor.type = "4";
- _this.delCursor.index = i;
- _this.delCursor.remarksName = v.name;
- _this.delCursor.id = v.id;
+ _this.type = "0"
+ _this.delCursor.type = "4"
+ _this.delCursor.index = i
+ _this.delCursor.remarksName = v.name
+ _this.delCursor.id = v.id
// 灏嗗綋鍓嶅厓绱犳爣绾�
- _this.ctx.strokeStyle = "red";
+ _this.ctx.strokeStyle = "red"
// _this.ctx.beginPath()
// _this.ctx.moveTo(v.location[0].x, v.location[0].y)
// _this.ctx.lineTo(v.location[1].x, v.location[1].y)
@@ -657,46 +593,46 @@
) * 0.1,
2,
"red"
- ); // 缁樺埗鏂规硶
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true);
- _this.c.style.cursor = "pointer";
+ ) // 缁樺埗鏂规硶
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true)
+ _this.c.style.cursor = "pointer"
}
- });
- _this.canvasData.polygon.forEach(function (v, i) {
+ })
+ _this.canvasData.polygon.forEach(function(v, i) {
if (v.location.length !== 0) {
- _this.ctx.strokeStyle = "yellow";
- _this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x, v.location[0].y);
+ _this.ctx.strokeStyle = "yellow"
+ _this.ctx.beginPath()
+ _this.ctx.moveTo(v.location[0].x, v.location[0].y)
for (let i = 1; i < v.location.length; i++) {
- _this.ctx.lineTo(v.location[i].x, v.location[i].y);
+ _this.ctx.lineTo(v.location[i].x, v.location[i].y)
}
- _this.ctx.closePath();
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, false);
- _this.c.style.cursor = "pointer";
+ _this.ctx.closePath()
+ _this.ctx.stroke()
+ _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鍒ゆ柇涓�涓�
// 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
// 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
- _this.type = "0";
- _this.delCursor.type = "5";
- _this.delCursor.index = i;
- _this.delCursor.remarksName = v.name;
- _this.delCursor.id = v.id;
+ _this.type = "0"
+ _this.delCursor.type = "5"
+ _this.delCursor.index = i
+ _this.delCursor.remarksName = v.name
+ _this.delCursor.id = v.id
// 灏嗗綋鍓嶅厓绱犳爣绾�
- _this.ctx.strokeStyle = "red";
- _this.ctx.beginPath();
- _this.ctx.moveTo(v.location[0].x, v.location[0].y);
+ _this.ctx.strokeStyle = "red"
+ _this.ctx.beginPath()
+ _this.ctx.moveTo(v.location[0].x, v.location[0].y)
for (let i = 1; i < v.location.length; i++) {
- _this.ctx.lineTo(v.location[i].x, v.location[i].y);
+ _this.ctx.lineTo(v.location[i].x, v.location[i].y)
}
- _this.ctx.closePath();
- _this.ctx.stroke();
- _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true);
- _this.c.style.cursor = "pointer";
+ _this.ctx.closePath()
+ _this.ctx.stroke()
+ _this.showRemarks(v.location[0].x, v.location[0].y, v.name, true)
+ _this.c.style.cursor = "pointer"
}
}
- });
+ })
// console.log("鍒氶�変腑鐨勫浘褰細",_this.delCursor)
},
// 鎾ら攢
@@ -705,16 +641,16 @@
// 姝ｅ湪鐢诲杈瑰舰锛屾殏瀛樻暟缁勯噷鏈夊潗鏍囨暟鎹紝鍙竴姝ヤ竴姝ユ挙閿�
if (this.points.length > 0) {
if (this.points.length === 1) {
- this.type = "0"; // 涓嶅垏鎹㈡垚鈥�0鈥欐妸澶氳竟褰㈡挙閿�涔嬪悗鏃犳硶缁х画鎾ら攢鍏朵粬鍥惧舰
- this.flag = false;
- this.originX = null;
- this.originY = null;
+ this.type = "0" // 涓嶅垏鎹㈡垚鈥�0鈥欐妸澶氳竟褰㈡挙閿�涔嬪悗鏃犳硶缁х画鎾ら攢鍏朵粬鍥惧舰
+ this.flag = false
+ this.originX = null
+ this.originY = null
}
- this.points.pop();
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- this.loadImage();
- this.pointsUndo.splice(this.pointsUndo.length - 2, 1);
- this.drawPolygonUtil(this.pointsUndo);
+ this.points.pop()
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ this.loadImage()
+ this.pointsUndo.splice(this.pointsUndo.length - 2, 1)
+ this.drawPolygonUtil(this.pointsUndo)
}
} else {
// 澶氳竟褰㈠凡缁忓畬鎴愭垨鑰呮槸鍦ㄧ敾鍒殑鍥惧舰
@@ -727,159 +663,153 @@
this.canvasHistory[this.step].index,
this.canvasHistory[this.step].deleteLength,
this.canvasHistory[this.step].data
- );
- break;
+ )
+ break
case "2":
this.canvasData.rect.splice(
this.canvasHistory[this.step].index,
this.canvasHistory[this.step].deleteLength,
this.canvasHistory[this.step].data
- );
- break;
+ )
+ break
case "4":
this.canvasData.arrow.splice(
this.canvasHistory[this.step].index,
this.canvasHistory[this.step].deleteLength,
this.canvasHistory[this.step].data
- );
- break;
+ )
+ break
case "5":
this.canvasData.polygon.splice(
this.canvasHistory[this.step].index,
this.canvasHistory[this.step].deleteLength,
this.canvasHistory[this.step].data
- );
- break;
+ )
+ break
}
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- let canvasPic = new Image();
- canvasPic.src = this.canvasHistory[this.step - 1].src;
- let ctx = this.ctx;
- canvasPic.addEventListener("load", function () {
- ctx.drawImage(canvasPic, 0, 0);
- });
- this.step--;
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ let canvasPic = new Image()
+ canvasPic.src = this.canvasHistory[this.step - 1].src
+ let ctx = this.ctx
+ canvasPic.addEventListener("load", function() {
+ ctx.drawImage(canvasPic, 0, 0)
+ })
+ this.step--
} else if (this.canvasHistory[this.step].name !== undefined) {
// 淇敼鍥惧舰澶囨敞鐨勬挙閿�
switch (this.canvasHistory[this.step].type) {
case "1":
- this.canvasData.line[this.canvasHistory[this.step].index].name =
- this.canvasHistory[this.step].name;
- break;
+ 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;
- break;
+ this.canvasData.rect[this.canvasHistory[this.step].index].name = this.canvasHistory[this.step].name
+ break
case "4":
- this.canvasData.arrow[
- this.canvasHistory[this.step].index
- ].name = this.canvasHistory[this.step].name;
- break;
+ this.canvasData.arrow[this.canvasHistory[this.step].index].name = this.canvasHistory[this.step].name
+ break
case "5":
- this.canvasData.polygon[
- this.canvasHistory[this.step].index
- ].name = this.canvasHistory[this.step].name;
- break;
+ this.canvasData.polygon[this.canvasHistory[this.step].index].name = this.canvasHistory[this.step].name
+ break
}
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- let canvasPic = new Image();
- canvasPic.src = this.canvasHistory[this.step - 1].src;
- let ctx = this.ctx;
- canvasPic.addEventListener("load", function () {
- ctx.drawImage(canvasPic, 0, 0);
- });
- this.step--;
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ let canvasPic = new Image()
+ canvasPic.src = this.canvasHistory[this.step - 1].src
+ let ctx = this.ctx
+ canvasPic.addEventListener("load", function() {
+ ctx.drawImage(canvasPic, 0, 0)
+ })
+ this.step--
} else {
// 姝ｅ父鐨勬挙閿�
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- let canvasPic = new Image();
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ let canvasPic = new Image()
if (this.step > 0) {
- canvasPic.src = this.canvasHistory[this.step - 1].src;
+ canvasPic.src = this.canvasHistory[this.step - 1].src
}
// 涓嶇煡涓轰綍鐩存帴浼犺繘鍘籺his.ctx浼氭槸undefind锛屾墍浠ュ湪澶栭潰杞瓨涓�涓�
- let ctx = this.ctx;
- canvasPic.addEventListener("load", function () {
- ctx.drawImage(canvasPic, 0, 0);
- });
+ let ctx = this.ctx
+ canvasPic.addEventListener("load", function() {
+ ctx.drawImage(canvasPic, 0, 0)
+ })
// 鎾ら攢鏈�缁堟暟鎹�
switch (this.canvasHistory[this.step].type) {
case "1":
- this.canvasData.line.pop();
- break;
+ this.canvasData.line.pop()
+ break
case 2:
- this.canvasData.rect.pop();
- break;
+ this.canvasData.rect.pop()
+ break
case 4:
- this.canvasData.arrow.pop();
- break;
+ this.canvasData.arrow.pop()
+ break
case 5:
- this.canvasData.polygon.pop();
- this.points.length = 0;
- break;
+ this.canvasData.polygon.pop()
+ this.points.length = 0
+ break
case 0:
// 灏嗗洖鏄炬暟鎹竻绌猴紝鐩稿綋浜庢竻绌洪〉闈�
// console.log("鎾ら攢鍘熷鏁版嵁");
- this.clear();
- break;
+ this.clear()
+ break
}
- this.step--;
+ this.step--
}
} 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() {
- this.$emit("refresh");
+ this.$emit("refresh")
// this.$notify({
// type: 'success',
// message: '搴曞浘宸插埛鏂�'
@@ -895,160 +825,155 @@
// width锛氱澶寸嚎瀹藉害
// color锛氱澶撮鑹�
- theta = typeof theta !== "undefined" ? theta : 30;
- headlen = typeof theta !== "undefined" ? headlen : 10;
- width = typeof width !== "undefined" ? width : 1;
+ theta = typeof theta !== "undefined" ? theta : 30
+ headlen = typeof theta !== "undefined" ? headlen : 10
+ 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;
- let topX = headlen * Math.cos(angle1);
- let topY = headlen * Math.sin(angle1);
- let botX = headlen * Math.cos(angle2);
- let botY = headlen * Math.sin(angle2);
+ 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();
+ 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()
},
// 鑾峰彇鐩稿鍧愭爣(鏆備笉鐢�)
getLocation(x, y, c) {
- let bbox = c.getBoundingClientRect();
+ 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鐨勯珮瀹戒箣鍚庢槸琛ㄩ潰绉媺澶ц�屽疄闄�
* 鏄剧ず鍍忕礌涓嶅彉鑰岄�犳垚鐨勫潗鏍囪幏鍙栦笉鍑嗙殑鎯呭喌
x: (x - bbox.left),
y: (y - bbox.top)
*/
- };
+ }
},
// 鐢熸垚鍥惧舰澶囨敞
remarks(x, y, type) {
- this.ctx.moveTo(x, y - 20);
- this.ctx.fillStyle = "green"; // 璁剧疆濉厖棰滆壊涓虹豢鑹�
- this.ctx.font = '20px "寰蒋闆呴粦"'; // 璁剧疆瀛椾綋
- this.ctx.textBaseline = "bottom"; // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
- this.ctx.textAlign = "left"; // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
- let name = "";
+ this.ctx.moveTo(x, y - 20)
+ this.ctx.fillStyle = "green" // 璁剧疆濉厖棰滆壊涓虹豢鑹�
+ this.ctx.font = '20px "寰蒋闆呴粦"' // 璁剧疆瀛椾綋
+ this.ctx.textBaseline = "bottom" // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
+ this.ctx.textAlign = "left" // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
+ let name = ""
switch (type) {
case "1":
- this.lineIndex++;
- name = "鐩寸嚎" + this.lineIndex;
- break;
+ this.lineIndex++
+ name = "鐩寸嚎" + this.lineIndex
+ break
case "2":
- this.rectIndex++;
- name = "鐭╁舰" + this.rectIndex;
- break;
+ this.rectIndex++
+ name = "鐭╁舰" + this.rectIndex
+ break
case "4":
- this.arrowIndex++;
- name = "绠ご" + this.arrowIndex;
- break;
+ this.arrowIndex++
+ name = "绠ご" + this.arrowIndex
+ break
case "5":
- this.polygonIndex++;
- name = "澶氳竟褰�" + this.polygonIndex;
- break;
+ this.polygonIndex++
+ name = "澶氳竟褰�" + this.polygonIndex
+ break
}
- this.ctx.fillText(name, x, y - 20); // 濉厖鏂囧瓧
- return name;
+ this.ctx.fillText(name, x, y - 20) // 濉厖鏂囧瓧
+ return name
},
// 鍥炴樉鍥惧舰澶囨敞
showRemarks(x, y, remarks, isHightlight) {
- this.ctx.moveTo(x, y - 20);
+ this.ctx.moveTo(x, y - 20)
if (isHightlight) {
- this.ctx.fillStyle = "#8ae22e"; // 璁剧疆濉厖棰滆壊涓虹豢鑹�
+ this.ctx.fillStyle = "#8ae22e" // 璁剧疆濉厖棰滆壊涓虹豢鑹�
} else {
- this.ctx.fillStyle = "green"; // 璁剧疆濉厖棰滆壊涓虹豢鑹�
+ this.ctx.fillStyle = "green" // 璁剧疆濉厖棰滆壊涓虹豢鑹�
}
- this.ctx.font = '20px "寰蒋闆呴粦"'; // 璁剧疆瀛椾綋
- this.ctx.textBaseline = "bottom"; // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
- this.ctx.textAlign = "left"; // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
- this.ctx.fillText(remarks, x, y - 20); // 濉厖鏂囧瓧
+ this.ctx.font = '20px "寰蒋闆呴粦"' // 璁剧疆瀛椾綋
+ this.ctx.textBaseline = "bottom" // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
+ this.ctx.textAlign = "left" // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
+ this.ctx.fillText(remarks, x, y - 20) // 濉厖鏂囧瓧
},
// 閲嶇幇淇濆瓨鐢婚潰
loadImage() {
if (this.step > -1) {
- let img = new Image();
- img.src = this.canvasHistory[this.step].src;
- this.ctx.drawImage(img, 0, 0, this.c.width, this.c.height);
+ let img = new Image()
+ img.src = this.canvasHistory[this.step].src
+ this.ctx.drawImage(img, 0, 0, this.c.width, this.c.height)
}
},
// 鍒囨崲鐢荤嚎绫诲瀷
changeType(num) {
if (num === "0") {
- this.c.style.cursor = "pointer";
+ this.c.style.cursor = "pointer"
} else {
- this.c.style.cursor = "crosshair";
+ this.c.style.cursor = "crosshair"
}
- this.type = num;
+ this.type = num
},
// 缁樺埗澶氳竟褰㈡柟娉�
drawPolygonUtil(points) {
- this.ctx.strokeStyle = "yellow";
- this.ctx.lineWidth = 2;
- this.ctx.beginPath();
- this.ctx.moveTo(points[0].x, points[0].y);
+ this.ctx.strokeStyle = "yellow"
+ this.ctx.lineWidth = 2
+ this.ctx.beginPath()
+ this.ctx.moveTo(points[0].x, points[0].y)
for (let i = 1; i < points.length; i++) {
- this.ctx.lineTo(points[i].x, points[i].y);
+ this.ctx.lineTo(points[i].x, points[i].y)
}
- this.ctx.closePath();
- this.ctx.stroke();
+ this.ctx.closePath()
+ this.ctx.stroke()
},
// 鐢荤洿绾跨Щ鍔ㄥ嚱鏁�
drawLine(e) {
if (this.flag) {
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- this.loadImage();
- this.ctx.beginPath();
- this.ctx.strokeStyle = "yellow";
- this.c.style.cursor = "default";
- this.ctx.lineWidth = 2;
- this.ctx.moveTo(this.originX, this.originY);
- this.ctx.lineTo(e.offsetX, e.offsetY);
- this.ctx.stroke(); // 缁樺埗
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ this.loadImage()
+ this.ctx.beginPath()
+ this.ctx.strokeStyle = "yellow"
+ this.c.style.cursor = "default"
+ this.ctx.lineWidth = 2
+ this.ctx.moveTo(this.originX, this.originY)
+ this.ctx.lineTo(e.offsetX, e.offsetY)
+ this.ctx.stroke() // 缁樺埗
}
},
// 鐢荤煩褰㈢Щ鍔ㄥ嚱鏁�
drawRect(e) {
if (this.flag) {
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- this.loadImage();
- this.ctx.beginPath();
- this.ctx.strokeStyle = "yellow";
- this.ctx.lineWidth = 2;
- this.ctx.strokeRect(
- this.originX,
- this.originY,
- e.offsetX - this.originX,
- e.offsetY - this.originY
- ); // 缁樺埗鏂规硶
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ this.loadImage()
+ this.ctx.beginPath()
+ this.ctx.strokeStyle = "yellow"
+ this.ctx.lineWidth = 2
+ this.ctx.strokeRect(this.originX, this.originY, e.offsetX - this.originX, e.offsetY - this.originY) // 缁樺埗鏂规硶
}
},
// 鐢荤澶寸Щ鍔ㄥ嚱鏁�
drawArrow(e) {
if (this.flag) {
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- this.loadImage();
- this.ctx.lineWidth = 2;
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ this.loadImage()
+ this.ctx.lineWidth = 2
this.drawArrowUtil(
this.ctx,
this.originX,
@@ -1056,339 +981,305 @@
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));
- return dep;
+ let dep = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2))
+ return dep
},
// 鐢诲杈瑰舰绉诲姩鍑芥暟
drawPolygon(e) {
if (this.flag) {
- this.ctx.clearRect(0, 0, this.c.width, this.c.height);
- this.loadImage();
+ this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+ 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
})
- );
+ )
}
},
// 鐢荤洿绾挎姮璧�
lineMouseUp(e) {
- if (
- Math.abs(this.originX - e.offsetX) < 5 &&
- Math.abs(this.originY - e.offsetY) < 5
- ) {
- this.flag = false;
- return;
+ if (Math.abs(this.originX - e.offsetX) < 5 && Math.abs(this.originY - e.offsetY) < 5) {
+ this.flag = false
+ return
}
- this.flag = false;
- let Id;
- let fileName;
- let coordinate = [];
+ this.flag = false
+ 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();
- fileName = this.remarks(this.originX, this.originY, "1");
+ 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,
- };
- this.url = this.c.toDataURL(); // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
- this.step++;
- this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
- this.canvasHistory.push({ type: 1, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
+ 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) {
- if (
- Math.abs(this.originX - e.offsetX) < 5 &&
- Math.abs(this.originY - e.offsetY) < 5
- ) {
- this.flag = false;
- return;
+ if (Math.abs(this.originX - e.offsetX) < 5 && Math.abs(this.originY - e.offsetY) < 5) {
+ this.flag = false
+ return
}
- this.flag = false;
- let coordinate = [];
+ this.flag = false
+ let coordinate = []
// 閫嗘椂閽堢畻鍑虹煩褰㈠洓瑙掑潗鏍�
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,
- });
- let Id;
- let fileName;
+ y: this.originY
+ })
+ let Id
+ let fileName
// console.log("rect鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid();
- fileName = this.remarks(this.originX, this.originY, "2");
+ 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 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
- this.step++;
- this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
- this.canvasHistory.push({ type: 2, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
+ this.url = this.c.toDataURL() // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
+ this.step++
+ this.canvasHistory.length = this.step // 鎴柇鏁扮粍
+ this.canvasHistory.push({ type: 2, src: this.c.toDataURL("image/png") }) // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
- this.freedEdit();
+ this.freedEdit()
},
// 鐢荤澶存椂鎶捣
arrowMouseUp(e) {
- if (
- Math.abs(this.originX - e.offsetX) < 5 &&
- Math.abs(this.originY - e.offsetY) < 5
- ) {
- this.flag = false;
- return;
+ if (Math.abs(this.originX - e.offsetX) < 5 && Math.abs(this.originY - e.offsetY) < 5) {
+ this.flag = false
+ return
}
- this.flag = false;
- let Id;
- let fileName;
- let coordinate = [];
+ this.flag = false
+ 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();
- fileName = this.remarks(this.originX, this.originY, "4");
+ 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,
- };
- this.url = this.c.toDataURL(); // 姣忔 mouseup 閮戒繚瀛樹竴娆＄敾甯冪姸鎬�
- this.step++;
- this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
- this.canvasHistory.push({ type: 4, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
+ 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 coordinate = [];
+ this.flag = false
+ this.points.pop() // 鍙屽嚮涔嬪悗澶氫竴涓偣鐨勯噸澶嶅潗鏍囷紝闇�瑕佸垹闄�
+ let Id
+ let fileName
+ let coordinate = []
this.points.map((item, index) => {
- coordinate.push(item);
- });
+ coordinate.push(item)
+ })
// console.log("polygon鐨別ditObj:",this.editObj)
if (this.editObj.id == undefined) {
- Id = this.getUuid();
- fileName = this.remarks(this.points[0].x, this.points[0].y, "5");
+ 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.c.style.cursor = "crosshair";
- this.points.length = 0;
+ this.clickSelect()
+ this.undisabled()
+ this.c.style.cursor = "crosshair"
+ this.points.length = 0
// 灏嗗綋鍓嶅垰鐢诲畬鐨勫浘褰㈠姞鍏ュ垹鏀规父鏍囷紝鍙互灏嗗垰鐢诲畬鐨勫浘褰㈠悕绉版樉绀哄湪宸︿笂瑙�
this.delCursor = {
id: this.getUuid(),
remarksName: fileName,
type: "5",
- index: this.polygonIndex - 1,
- };
- this.url = this.c.toDataURL();
- this.step++;
- this.canvasHistory.length = this.step; // 鎴柇鏁扮粍
- this.canvasHistory.push({ type: 5, src: this.c.toDataURL("image/png") }); // 灏嗗揩鐓т繚瀛樺埌鍘嗗彶璁板綍涓互渚涙挙閿�涔嬬敤
+ index: this.polygonIndex - 1
+ }
+ this.url = this.c.toDataURL()
+ this.step++
+ this.canvasHistory.length = this.step // 鎴柇鏁扮粍
+ 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.lineIndex = this.canvasData.line.length
+ this.rectIndex = this.canvasData.rect.length
+ this.arrowIndex = this.canvasData.arrow.length
//鎺掗櫎this.canvasData.polygon鍏ㄩ儴鍖哄煙(鍏ㄩ儴鍖哄煙鐨刬d灏辨槸鎽勫儚鏈虹殑id)
- let filterPolygonArr = this.canvasData.polygon.filter(
- (item) => item.id != this.TreeDataPool.selectedNode.id
- );
- this.polygonIndex = filterPolygonArr.length;
+ let filterPolygonArr = this.canvasData.polygon.filter((item) => item.id != this.TreeDataPool.selectedNode.id)
+ this.polygonIndex = filterPolygonArr.length
},
// 鐢熸垚uuid
getUuid() {
- let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
- let originChar = "0123456789abcdef";
- let len = originChar.length;
- return originStr.replace(/x/g, function (match) {
- return originChar.charAt(Math.floor(Math.random() * len));
- });
+ let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+ let originChar = "0123456789abcdef"
+ let len = originChar.length
+ return originStr.replace(/x/g, function(match) {
+ return originChar.charAt(Math.floor(Math.random() * len))
+ })
},
// 鍒ゆ柇涓�涓偣鏄惁绂讳竴涓浘褰㈢殑鏈�灏忚窛绂讳负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)
- if (cross <= 0)
- return Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1) + 0.0);
- let d2 = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1); // |AB|
- if (cross >= d2)
- return Math.sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2) + 0.0);
+ let cross = (x2 - x1) * (x - x1) + (y2 - y1) * (y - y1) // |AB| * |AC|*cos(x)
+ if (cross <= 0) return Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1) + 0.0)
+ let d2 = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) // |AB|
+ if (cross >= d2) 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 py = y1 + (y2 - y1) * r;
- return Math.sqrt((x - px) * (x - px) + (y - py) * (y - py) + 0.0); //涓ょ偣闂磋窛绂诲叕寮�
- },
+ let r = cross / d2
+ 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,
@@ -1396,7 +1287,7 @@
// },
disabled: {
default: false,
- type: Boolean,
+ type: Boolean
},
canvasDataToChild: {
default: () => {
@@ -1404,17 +1295,17 @@
line: [],
rect: [],
arrow: [],
- polygon: [],
- };
+ polygon: []
+ }
},
- type: Object,
+ type: Object
},
snapshot_url: {
type: String,
- default: "",
- },
- },
-};
+ default: ""
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.header {
diff --git a/src/views/hashrate/CameraManage/CameraRules/index.vue b/src/views/hashrate/CameraManage/CameraRules/index.vue
index e61222e..92e0f3d 100644
--- a/src/views/hashrate/CameraManage/CameraRules/index.vue
+++ b/src/views/hashrate/CameraManage/CameraRules/index.vue
@@ -64,7 +64,7 @@
:loading="Camera.loading"
:canvasWidth="canvasWidth"
:canvasHeight="canvasHeight"
- :showProportion="1042 / canvasWidth"
+ :showProportion="960 / canvasWidth"
@fromCanvas="getCanvasData"
@changeLoading="changeLoading"
@refresh="refresh"
@@ -363,8 +363,8 @@
cameraId: "",
showSysInfo: true,
showCanvas: true,
- canvasWidth: 568,
- canvasHeight: 320,
+ canvasWidth: 576,
+ canvasHeight: 324,
stackId: "",
swiperIndex: 0,
stackFilesPage: 1,
--
Gitblit v1.8.0