From 9efd4a80aae58cf36266e774d3c820cc8e115028 Mon Sep 17 00:00:00 2001
From: cuiqian2004 <cuiqian2004@163.com>
Date: 星期四, 25 九月 2025 17:33:45 +0800
Subject: [PATCH] test
---
pages/map/js/ctx.js | 966 +++++++++++++++++++++++++++++---------------------------
1 files changed, 498 insertions(+), 468 deletions(-)
diff --git a/pages/map/js/ctx.js b/pages/map/js/ctx.js
index 837925d..16814c0 100644
--- a/pages/map/js/ctx.js
+++ b/pages/map/js/ctx.js
@@ -31,7 +31,6 @@
export default {
data() {
return {
- vehicleIp: "",
canvasId: "",
canvas: null,
eleWidth: 0,
@@ -64,16 +63,17 @@
img_y: 1
},
pressObjTimer: 0,
+ selectable: true,
}
},
mounted() {
- console.log("ctx mounted")
this.init()
},
+
methods: {
async init(ip) {
try {
- this.agvObj = null
+
const _this = this
fabric.Object.prototype.setControlsVisibility({
mt: false, // 涓棿涓�@@ -107,6 +107,7 @@
canvas.setAttribute("id", this.canvasId)
canvas.setAttribute("type", "2d")
cantainerEl.appendChild(canvas)
+
this.canvas = new fabric.Canvas(this.canvasId, {
allowTouchScrolling: true, // 鍏佽瑙︽懜婊氬姩
selection: true,
@@ -120,6 +121,8 @@
renderOnAddRemove: false,
imageSmoothingEnabled: true
})
+
+
this.canvas.clear()
this.eleWidth = cantainerEl.clientWidth
this.eleHeight = cantainerEl.clientHeight
@@ -144,6 +147,28 @@
} catch (ex) {
this.showError(ex)
+ }
+ },
+ destroyCanvas() {
+ console.log("destroyCanvas")
+ if (this.canvas) {
+ // 2. 绉婚櫎鎵�湁浜嬩欢鐩戝惉鍣�+ this.removeAllEventListeners();
+
+ // 3. 娓呯┖鎵�湁瀵硅薄锛堝垎鎵瑰鐞嗛伩鍏嶉樆濉烇級
+ this.clearObjects();
+
+ // 4. 閿�瘉Fabric.js瀹炰緥
+ this.canvas.dispose();
+
+ // 6. 娓呴櫎鎵�湁鍙橀噺寮曠敤
+ this.cleanupReferences();
+ this.canvas = null
+ // 閫氱煡Vue灞傞攢姣佸畬鎴�+ this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "destroy_complete",
+ param: true
+ });
}
},
patchFabricForUniApp(canvas) {
@@ -425,177 +450,12 @@
cantainerEl.addEventListener('touchstart', function(e) {
// console.log('touchstart:', e.touches.length);
e.preventDefault(); // 闃绘榛樿琛屼负
+
_this.canvas.fire('touch:start', {
e: e
});
+ _this.canvasTouchStart(e)
// _this.canvas._onMouseDown(e);
- _this.pointerSelectObject(e)
- if (!_this.canvas.getActiveObject()) {
- // 鏍规嵁瑙︽懜鐐规暟閲忓垽鏂氦浜掔被鍨�- if (e.touches.length === 1) {
- _this.handleSingleTouch(e.touches[0]);
- } else if (e.touches.length >= 2) {
- _this.handleMultiTouch(e.touches);
- }
- } else {
- if (e.touches.length === 1) {
- const touch = e.touches[0]
- _this.lastPosX = touch.clientX;
- _this.lastPosY = touch.clientY;
-
- const list = _this.canvas.getActiveObjects()
- if (list.length === 1) {
- if (!_this.objEditing) {
- this.pressObjTimer = setTimeout(function() {
-
- const zoom = _this.canvas.getZoom();
- const vpt = _this.canvas.viewportTransform;
- if (list[0].eleType == "station") {
- _this.setAllObjectSelectable(false)
-
- list[0].set({
- selectable: true
- })
-
- let deltaX = list[0].left * zoom
- let deltaY = list[0].top * zoom
- const scale = zoom < 1 ? zoom : 1
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "edit_station",
- station: list[0].data,
- view: {
- x: vpt[4] + deltaX,
- y: vpt[5] + deltaY,
- // x: e.touches[0].clientX,
- // y: e.touches[0].clientY,
- width: list[0].width * scale,
- height: list[0].height * scale
- }
- });
- } else if (list[0].eleType == "public_teaching") {
- const pt = _this.canvas.getPointer(touch); // 鈫�鍏抽敭
- // 2. pointer 灏辨槸鐢诲竷鍧愭爣
-
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "select_teaching_path",
- data: list[0].data,
- type: "public",
- point: pt
-
-
- });
- } else if (list[0].eleType == "station_teaching") {
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "select_teaching_path",
- data: list[0].data,
- type: "station",
- point: pt
- });
- }
- }, 1000); //
- }
- let activeObj = list[0]
- if (activeObj.eleType == "region_pt_add") {
- const data = activeObj.mainObj?.data
-
- data.path.push({
- x: _this.getActualXFromImg(activeObj.left) || 0,
- y: _this.getActualYFromImg(activeObj.top) || 0
- })
- _this.updateRegion(activeObj.mainObj, data)
- } else if (activeObj.eleType == "cmd") {
- let data = activeObj.mainObj.data
- const objCmdMain = activeObj.mainObj
- if (objCmdMain.eleType == "edit_teaching") {
-
- const left = _this.getActualXFromImg(objCmdMain.left)
- const top = _this.getActualYFromImg(objCmdMain.top)
- const right = _this.getActualXFromImg(objCmdMain.left + objCmdMain.width)
- const bottom = _this.getActualYFromImg(objCmdMain.top + objCmdMain.height)
- data = []
- if (Number.isNaN(left) || Number.isNaN(top) || Number.isNaN(right) || Number
- .isNaN(bottom)) {
- const now = new Date()
- const date = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "show_log",
- data: {
- date,
- method: `POST`,
- url: "app/log/edit_teaching",
- param: objCmdMain,
- statusCode: 100,
- data: _this.mapInfo
- },
- });
- }
- data.push([left, top])
- data.push([left, bottom])
- data.push([right, bottom])
- data.push([right, top])
- console.log(data)
- }
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "edit_finish",
- cmd: activeObj.id,
- type: objCmdMain.eleType,
- data: data,
- });
- if (activeObj.id == "ok") {
- if (objCmdMain.eleType == "region") {
- _this.addRegionFinish(activeObj.mainObj)
- } else if (activeObj.mainObj.eleType == "virtual_wall") {
- _this.addVirtualWallFinish(activeObj.mainObj)
- }
-
- }
- if (objCmdMain.eleType == "edit_teaching") {
- let list = _this.canvas.getObjects() || []
- for (let i2 in list) {
- const obj = list[i2]
- obj.set({
- opacity: 1
- })
- }
- if (objCmdMain?.mainObj) {
- objCmdMain.mainObj.set({
- selectable: true
- })
- }
- const ptObjs = objCmdMain.ptObjs || []
- _this.canvas.remove(objCmdMain)
- for (let i2 in ptObjs) {
- const obj = ptObjs[i2]
- _this.canvas.remove(obj)
- }
- }
- if (objCmdMain.eleType == "station") {
-
- _this.setAllObjectSelectable(true)
- objCmdMain.tipObj.set({
- left: objCmdMain.left,
- top: objCmdMain.top - objCmdMain.height / 2 -
- objCmdMain.tipObj.height / 2,
- visible: true
- })
- objCmdMain.tipObj.setCoords()
- }
- _this.closeOkCancelControl()
-
- _this.canvas.requestRenderAll()
- }
- // else if (activeObj.eleType == "station") {
- // _this.$ownerInstance.callMethod('receiveRenderData', {
- // method: "select_station",
- // data: activeObj.data,
- // select: activeObj.mark ? false : true
- // });
- // }
- }
- } else if (e.touches.length >= 2) {
- _this.handleMultiTouch(e.touches);
- }
- }
});
cantainerEl.addEventListener('touchmove', function(e) {
@@ -603,33 +463,7 @@
// console.log('touchmove:', e.touches.length);
e.preventDefault(); // 闃绘榛樿琛屼负
// 澶勭悊绉诲姩
- const list = _this.canvas.getActiveObjects()
- if (list.length == 0) {
- if (e.touches.length === 1) {
- _this.handleSingleTouchMove(e.touches[0]);
- } else if (e.touches.length >= 2) {
- _this.handleMultiTouchMove(e.touches);
- }
- } else {
- if (e.touches.length === 1) {
- if (list.length > 1 || list[0].lockMovementX) {
- if (list[0].lockMovementX) {
- _this.canvas.discardActiveObject();
- }
- _this.handleSingleTouchMove(e.touches[0]);
- } else {
- const touch = e.touches[0]
- const deltaX = touch.clientX - this.lastPosX;
- const deltaY = touch.clientY - this.lastPosY;
- if (Math.abs(deltaX) > 20)
- clearTimeout(this.pressObjTimer);
- }
-
- } else if (e.touches.length >= 2) {
- _this.canvas.discardActiveObject();
- _this.handleMultiTouchMove(e.touches);
- }
- }
+ _this.canvasTouchMove(e)
});
cantainerEl.addEventListener('touchend', function(e) {
@@ -665,13 +499,210 @@
clearTimeout(this.pressObjTimer);
this.pressObjTimer = null
}
- // const activeObj = _this.canvas.getActiveObject()
- // if (activeObj) {
- // if (activeObj.lockMovementX) {
- // _this.canvas.discardActiveObject();
- // }
- // }
+
})
+
+ },
+ canvasTouchStart(e) {
+ const _this = this
+ _this.pointerSelectObject(e)
+ if (!_this.canvas.getActiveObject()) {
+ // 鏍规嵁瑙︽懜鐐规暟閲忓垽鏂氦浜掔被鍨�+ if (e.touches.length === 1) {
+ _this.handleSingleTouch(e.touches[0]);
+ } else if (e.touches.length >= 2) {
+ _this.handleMultiTouch(e.touches);
+ }
+ } else {
+ if (e.touches.length === 1) {
+ const touch = e.touches[0]
+ _this.lastPosX = touch.clientX;
+ _this.lastPosY = touch.clientY;
+
+ const list = _this.canvas.getActiveObjects()
+ if (list.length === 1) {
+ if (!_this.objEditing) {
+ this.pressObjTimer = setTimeout(function() {
+
+ const zoom = _this.canvas.getZoom();
+ const vpt = _this.canvas.viewportTransform;
+ if (list[0].eleType == "station") {
+ _this.setAllObjectSelectable(false)
+
+ list[0].set({
+ selectable: true
+ })
+
+ let deltaX = list[0].left * zoom
+ let deltaY = list[0].top * zoom
+ const scale = zoom < 1 ? zoom : 1
+ _this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "edit_station",
+ station: list[0].data,
+ view: {
+ x: vpt[4] + deltaX,
+ y: vpt[5] + deltaY,
+ // x: e.touches[0].clientX,
+ // y: e.touches[0].clientY,
+ width: list[0].width * scale,
+ height: list[0].height * scale
+ }
+ });
+ } else if (list[0].eleType == "public_teaching") {
+ const pt = _this.canvas.getPointer(touch); // 鈫�鍏抽敭
+ // 2. pointer 灏辨槸鐢诲竷鍧愭爣
+
+ _this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "select_teaching_path",
+ data: list[0].data,
+ type: "public",
+ point: pt
+
+
+ });
+ } else if (list[0].eleType == "station_teaching") {
+ _this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "select_teaching_path",
+ data: list[0].data,
+ type: "station",
+ point: pt
+ });
+ }
+ }, 1000); //
+ }
+ let activeObj = list[0]
+ if (activeObj.eleType == "region_pt_add") {
+ const data = activeObj.mainObj?.data
+
+ data.path.push({
+ x: _this.getActualXFromImg(activeObj.left) || 0,
+ y: _this.getActualYFromImg(activeObj.top) || 0
+ })
+ _this.updateRegion(activeObj.mainObj, data)
+ } else if (activeObj.eleType == "cmd") {
+ let data = activeObj.mainObj.data
+ const objCmdMain = activeObj.mainObj
+ if (objCmdMain.eleType == "edit_teaching") {
+
+ const left = _this.getActualXFromImg(objCmdMain.left)
+ const top = _this.getActualYFromImg(objCmdMain.top)
+ const right = _this.getActualXFromImg(objCmdMain.left + objCmdMain.width)
+ const bottom = _this.getActualYFromImg(objCmdMain.top + objCmdMain.height)
+ data = []
+ if (Number.isNaN(left) || Number.isNaN(top) || Number.isNaN(right) || Number
+ .isNaN(bottom)) {
+ const now = new Date()
+ const date = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
+ _this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "show_log",
+ data: {
+ date,
+ method: `POST`,
+ url: "app/log/edit_teaching",
+ param: objCmdMain,
+ statusCode: 100,
+ data: _this.mapInfo
+ },
+ });
+ }
+ data.push([left, top])
+ data.push([left, bottom])
+ data.push([right, bottom])
+ data.push([right, top])
+ console.log(data)
+ }
+ _this.$ownerInstance.callMethod('receiveRenderData', {
+ method: "edit_finish",
+ cmd: activeObj.id,
+ type: objCmdMain.eleType,
+ data: data,
+ });
+ if (activeObj.id == "ok") {
+ if (objCmdMain.eleType == "region") {
+ _this.addRegionFinish(activeObj.mainObj)
+ } else if (activeObj.mainObj.eleType == "virtual_wall") {
+ _this.addVirtualWallFinish(activeObj.mainObj)
+ }
+
+ }
+ if (objCmdMain.eleType == "edit_teaching") {
+ let list = _this.canvas.getObjects() || []
+ for (let i2 in list) {
+ const obj = list[i2]
+ obj.set({
+ opacity: 1
+ })
+ }
+ if (objCmdMain?.mainObj) {
+ objCmdMain.mainObj.set({
+ selectable: true
+ })
+ }
+ const ptObjs = objCmdMain.ptObjs || []
+ _this.canvas.remove(objCmdMain)
+ for (let i2 in ptObjs) {
+ const obj = ptObjs[i2]
+ _this.canvas.remove(obj)
+ }
+ }
+ if (objCmdMain.eleType == "station") {
+
+ _this.setAllObjectSelectable(true)
+ objCmdMain.tipObj.set({
+ left: objCmdMain.left,
+ top: objCmdMain.top - objCmdMain.height / 2 -
+ objCmdMain.tipObj.height / 2,
+ visible: true
+ })
+ objCmdMain.tipObj.setCoords()
+ }
+ _this.closeOkCancelControl()
+
+ _this.canvas.requestRenderAll()
+ }
+ // else if (activeObj.eleType == "station") {
+ // _this.$ownerInstance.callMethod('receiveRenderData', {
+ // method: "select_station",
+ // data: activeObj.data,
+ // select: activeObj.mark ? false : true
+ // });
+ // }
+ }
+ } else if (e.touches.length >= 2) {
+ _this.handleMultiTouch(e.touches);
+ }
+ }
+
+ },
+ canvasTouchMove(e) {
+ const _this = this
+ const list = _this.canvas.getActiveObjects()
+ if (list.length == 0) {
+ if (e.touches.length === 1) {
+ _this.handleSingleTouchMove(e.touches[0]);
+ } else if (e.touches.length >= 2) {
+ _this.handleMultiTouchMove(e.touches);
+ }
+ } else {
+ if (e.touches.length === 1) {
+ if (list.length > 1 || list[0].lockMovementX) {
+ if (list[0].lockMovementX) {
+ _this.canvas.discardActiveObject();
+ }
+ _this.handleSingleTouchMove(e.touches[0]);
+ } else {
+ const touch = e.touches[0]
+ const deltaX = touch.clientX - this.lastPosX;
+ const deltaY = touch.clientY - this.lastPosY;
+ if (Math.abs(deltaX) > 20)
+ clearTimeout(this.pressObjTimer);
+ }
+
+ } else if (e.touches.length >= 2) {
+ _this.canvas.discardActiveObject();
+ _this.handleMultiTouchMove(e.touches);
+ }
+ }
},
// 璁＄畻鐐瑰埌绾挎鐨勮窛绂�@@ -753,7 +784,6 @@
objects.splice(0, 1);
const objActive = this.canvas.getActiveObject()
-
let pointerList = []
let pointerList2 = []
for (let i = objects.length - 1; i >= 0; i--) {
@@ -893,44 +923,6 @@
}
return
}
- // objects.forEach(obj => {
- // if (obj instanceof fabric.Path || obj instanceof fabric.Line) {
- // // 璁剧疆涓�釜鈥滅偣鍑诲蹇嶅害鈥濓紝姣斿 5 鍍忕礌
- // const tolerance = 5;
- // // 涓存椂鎵╁ぇ璺緞鐨勭偣鍑诲尯鍩�- // const originalStrokeWidth = obj.strokeWidth;
- // obj.strokeWidth = originalStrokeWidth + tolerance * 2;
-
- // const isHit = obj.intersectsWithPointer(pointer);
- // // 鎭㈠鍘熷瀹藉害
- // obj.strokeWidth = originalStrokeWidth;
- // if (isHit) {
- // pointerList.push(obj)
- // }
- // } else if (obj instanceof fabric.Rect || obj instanceof fabric.Ellipse) {
- // const isHit = obj.containsPoint(pointer);
- // if (isHit) {
- // pointerList.push(obj)
- // }
- // }
- // // else if (obj instanceof fabric.Group )
- // // {
- // // const objects2 = obj.getObjects();
- // // const isHit = obj.containsPoint(pointer);
- // // if (isHit) {
- // // pointerList.push(obj)
- // // }
- // // }
- // });
-
- // if (pointerList.length === 0) {
- // return
- // }
- // const obj = pointerList.pop()
- // this.canvas.discardActiveObject()
- // this.canvas.setActiveObject(obj)
-
-
},
objectMoving(target) {
const _this = this
@@ -955,7 +947,7 @@
});
_this.createOkCancelControl(obj)
- _this.canvas.renderAll()
+ _this.canvas.requestRenderAll()
} else if (target?.eleType == "edit_teaching") {
_this.updateEditTeachingPath(target)
@@ -977,7 +969,7 @@
else
_this.updateRegion(target, data)
- _this.canvas.renderAll()
+ _this.canvas.requestRenderAll()
} else if (target?.eleType == "wall_pt") {
const data = target.mainObj?.data
@@ -1007,7 +999,7 @@
_this.updateVirtualWall(target.mainObj, data)
- _this.canvas.renderAll()
+ _this.canvas.requestRenderAll()
} else if (target?.eleType == "region_pt") {
const data = target.mainObj?.data
if (!data)
@@ -1039,10 +1031,8 @@
}
_this.updateRegion(target.mainObj, data)
-
-
}
- _this.canvas.renderAll()
+ _this.canvas.requestRenderAll()
}
} else if (target?.eleType == "edit_teaching_pt") {
@@ -1126,28 +1116,6 @@
onSelectionChanage() {
- },
- safeLoadImage(url, maxSize = 2048) {
- console.log(url)
- return new Promise((resolve) => {
- const img = new Image();
- img.onload = () => {
- // 妫�煡灏哄鏄惁瓒呭嚭闄愬埗
- const scale = Math.min(
- maxSize / Math.max(img.width, img.height),
- 1
- );
- resolve(new fabric.Image(img, {
- scaleX: scale,
- scaleY: scale
- }));
- };
- img.onerror = () => {
- console.error('鍥剧墖鍔犺浇澶辫触');
- resolve(null);
- };
- img.src = url;
- });
},
// 灏�Base64 杞负 Blob锛屽啀鐢熸垚 URL
base64ToBlob(base64, mime) {
@@ -1234,6 +1202,7 @@
_this.$ownerInstance.callMethod('receiveRenderData', {
method: "set_backgroud_progress",
type: "error",
+ msg:err
});
console.error("鍥剧墖鍔犺浇澶辫触", err)
reject(new Error('鍥剧墖鍔犺浇澶辫触'));
@@ -1253,14 +1222,66 @@
}
return null;
},
- clearObjects() {
- const list = this.canvas.getObjects()
- list.splice(0, 1)
- for (let i in list) {
- const obj = list[i]
- this.canvas.remove(obj)
+ // 绉婚櫎鎵�湁浜嬩欢鐩戝惉鍣�+ removeAllEventListeners() {
+ if (!this.canvas) return;
+
+ // 绉婚櫎Fabric.js鍐呯疆浜嬩欢
+ this.canvas.off();
+
+ // 绉婚櫎鑷畾涔変簨浠剁洃鍚櫒
+ const cantainerEl = document.getElementById("canvasMap");
+ if (cantainerEl) {
+ cantainerEl.replaceWith(cantainerEl.cloneNode(true));
}
},
+ clearObjects() {
+ if (!this.canvas) return;
+ this.canvas.discardActiveObject()
+ const objects = this.canvas.getObjects()
+ const batchSize = 50; // 姣忔壒鍒犻櫎50涓璞�+ for (let i = 0; i < objects.length; i += batchSize) {
+ const batch = objects.slice(i, i + batchSize);
+ this.canvas.remove(...batch);
+ }
+ this.canvas.clear();
+ this.workSpace = null;
+ this.agvObj = null;
+ this.curTeachingObj = null;
+ this.objEditing = null;
+ this.editObject = null;
+ this.drawingObj = null;
+ if (this.pressObjTimer) {
+ clearTimeout(this.pressObjTimer);
+ this.pressObjTimer = null;
+ }
+ },
+ // 娓呯悊鎵�湁寮曠敤
+ cleanupReferences() {
+ this.canvas = null;
+ this.workSpace = null;
+ this.agvObj = null;
+ this.curTeachingObj = null;
+ this.objEditing = null;
+ this.editObject = null;
+ this.drawingObj = null;
+ this.mapInfo = {
+ proportion: 1,
+ img_proportion: 1,
+ max_x: 1,
+ max_y: 1,
+ min_x: 0,
+ min_y: 0,
+ img_x: 1,
+ img_y: 1
+ };
+ // 娓呴櫎鎵�湁瀹氭椂鍣�+ if (this.pressObjTimer) {
+ clearTimeout(this.pressObjTimer);
+ this.pressObjTimer = null;
+ }
+ },
+
setBackground(info) {
const _this = this
@@ -1277,7 +1298,7 @@
// this.canvas.selectionColor = 'rgba(100, 200, 255, 0.3)'; // 閫変腑鑳屾櫙鑹� // this.canvas.selectionBorderColor = '#1890ff'; // 杈规棰滆壊
// this.canvas.selectionLineWidth = 3; // 杈规瀹藉害
- this.agvObj = null
+
const cantainerEl = document.getElementById("canvasMap")
this.eleWidth = cantainerEl.clientWidth
this.eleHeight = cantainerEl.clientHeight
@@ -1314,25 +1335,8 @@
left: 0,
top: 0,
});
- // if (_this.workSpace instanceof fabric.Group) {
- // const objs = _this.workSpace.getObjects()
- // const rect = objs[1]
- // _this.workSpace.remove(objs[0])
- // _this.workSpace.insertAt(0,img)
-
- // rect.set({
- // width: _this.mapInfo.img_x,
- // height: _this.mapInfo.img_y,
- // })
- // _this.workSpace.set({
- // width: _this.mapInfo.img_x,
- // height: _this.mapInfo.img_y,
- // })
- // resolve()
- // return
- // }
- _this.clearObjects()
+ //
const rect = new fabric.Rect({
left: 0,
top: 0,
@@ -1359,21 +1363,48 @@
height: _this.mapInfo.img_y,
});
- _this.canvas.add(wsGroup)
- if (_this.workSpace) {
- _this.canvas.remove(_this.workSpace)
- }
- _this.workSpace = wsGroup
+ _this.clearObjects()
+
+ _this.canvas.add(wsGroup)
+ // _this.canvas.renderAll()
+
+ _this.workSpace = wsGroup
}
//_this.checkMemoryUsage()
resolve()
}).catch((err) => {
- _this.$ownerInstance.callMethod('receiveRenderData', {
- method: "set_backgroud_progress",
- type: "error",
+ // _this.$ownerInstance.callMethod('receiveRenderData', {
+ // method: "set_backgroud_progress",
+ // type: "error",
+ // msg:err
+ // });
+ const rect = new fabric.Rect({
+ left: 0,
+ top: 0,
+ width: _this.mapInfo.img_x,
+ height: _this.mapInfo.img_y,
+ stroke: "#333",
+ strokeWidth: 1,
+ strokeDashArray: [5, 5],
+ strokeLineCap: 'butt',
+ fill: "rgba(255,255,255,0)",
+ })
+ let wsGroup = new fabric.Group([ rect], {
+ id: "workspace",
+ eleType: "workspace",
+ selectable: false,
+ hasControls: false,
+ left: 0,
+ top: 0,
+ width: _this.mapInfo.img_x,
+ height: _this.mapInfo.img_y,
+
});
+ _this.clearObjects()
+ _this.canvas.add(wsGroup)
+ _this.workSpace = wsGroup
resolve()
})
@@ -1425,12 +1456,7 @@
scale: scale
});
if (!this.workSpace) return;
- // this.setCenterFromObject(this.workSpace);
- // 瓒呭嚭鐢诲竷涓嶅睍绀�- // _this.workSpace.clone().then((cloned) => {
- // _this.canvas.clipPath = cloned;
- // _this.canvas.requestRenderAll();
- // });
+
},
setDrawingType(type, svg) {
if (svg) {
@@ -1474,7 +1500,6 @@
y: touch.clientY
};
// console.log('鍗曠偣瑙︽懜寮�');
-
let activeObj = this.canvas.getActiveObject();
if (!activeObj) {
if (!this.drawType) {
@@ -1520,7 +1545,6 @@
}
// 绉诲姩瑙嗗彛
- // console.log('relativePan', deltaX, deltaY);
const vpt = this.canvas.viewportTransform;
this.canvas.relativePan(new fabric.Point(deltaX, deltaY));
if (this.objEditing) {
@@ -1543,7 +1567,7 @@
this.lastPosX = touch.clientX;
this.lastPosY = touch.clientY;
- this.canvas.renderAll()
+ this.canvas.requestRenderAll()
} else if (this.isDrawing) {
const vpt = this.canvas.viewportTransform;
// console.log("viewportTransform", vpt[4], vpt[5])
@@ -1849,7 +1873,7 @@
if (this.objEditing) {
this.createOkCancelControl(this.objEditing)
}
- this.canvas.renderAll()
+ this.canvas.requestRenderAll()
},
@@ -2186,7 +2210,7 @@
}
-
+
// console.log("addTeachingPath",path2)
// path2 += " Z"
let strokeWidth = 1
@@ -2222,8 +2246,7 @@
lockScalingY: true,
lockMovementX: true,
lockMovementY: true,
- selectable: false,
- opacity: 1,
+
mainRoad: main_road,
data: teachingData
})
@@ -2271,8 +2294,8 @@
const obj = list[i2]
obj.set({
opacity: show ? 1 : 0,
- strokeDashArray: [],
- strokeLineCap: '',
+ // strokeDashArray: [],
+ // strokeLineCap: '',
hasControls: show,
selectable: show,
})
@@ -2432,23 +2455,23 @@
this.createOkCancelControl(obj)
this.canvas.requestRenderAll();
},
- updateAgv(info) {
+ updateAgv(info, obj) {
const _this = this
return new Promise((resolve) => {
// const scale = this.getAutoScale()
const left = _this.getXOnImg(info.x) // * scale
const top = _this.getYOnImg(info.y) //* scale
const angle = info.angle * 180 / Math.PI
- if (this.agvObj) {
- this.agvObj.set({
+ if (obj) {
+ obj.set({
left,
top,
angle,
data: info
});
- this.agvObj.setCoords()
- _this.canvas.requestRenderAll();
- resolve()
+ obj.setCoords()
+ this.canvas.requestRenderAll();
+ resolve(obj)
} else {
const zoom = _this.canvas.getZoom();
fabric.loadSVGFromURL("static/images/van.svg").then(
@@ -2489,16 +2512,13 @@
console.log("agv", JSON.stringify(info))
_this.canvas.add(obj)
// _this.canvas.bringObjectToFront(obj);
- _this.agvObj = obj
- resolve()
+ resolve(obj)
}
)
}
})
},
-
-
addVirtualWallShow(info) {
const path = info.path || []
if (path.length != 2)
@@ -2526,7 +2546,6 @@
});
return line
},
-
addVirtualWall(info) {
const path = info.path || []
if (path.length != 2)
@@ -2705,18 +2724,7 @@
y: this.getYOnImg(pt.y)
}
- // if (pt.x < 10) {
- // pt.x = 10
- // }
- // if (pt.y < 10) {
- // pt.y = 10
- // }
- // if (pt.x > this.workSpace.width - 10) {
- // pt.x = 10
- // }
- // if (pt.y > this.workSpace.height - 10) {
- // pt.y = 10
- // }
+
if (index > 0) {
path2 += ` L${pt2} ${pt2.y}`
} else {
@@ -2754,18 +2762,6 @@
const path = info.path || []
let path2 = ""
path.forEach((pt, index) => {
- // if (pt.x < 10) {
- // pt.x = 10
- // }
- // if (pt.y < 10) {
- // pt.y = 10
- // }
- // if (pt.x > this.workSpace.width - 10) {
- // pt.x = this.workSpace.width - 10
- // }
- // if (pt.y > this.workSpace.height - 10) {
- // pt.y = this.workSpace.height - 10
- // }
let pt2 = {
x: this.getXOnImg(pt.x),
y: this.getYOnImg(pt.y)
@@ -3060,7 +3056,7 @@
this.canvas.add(ellipse)
const offX = 20 * Math.cos(angle)
const offY = 20 * Math.sin(angle)
-
+
if (this.objAgvLaser) {
this.canvas.remove(this.objAgvLaser)
}
@@ -3083,14 +3079,30 @@
updateLaserPoint(param) {
let list2 = this.canvas.getObjects() || []
- list2 = list2.filter((a) => a.eleType == "laser_point")
+ list2 = list2.filter((a) => a.eleType == "laser_point_cur_group")
for (let i in list2) {
- const obj = list2[i]
- obj.set({
- fill: "#000",
+ const objGroup = list2[i]
+ objGroup.set({
+ eleType: "laser_point_group",
})
+ const list3 = objGroup.getObjects()
+
+ for (let i3 in list3) {
+ const obj = list3[i3]
+ obj.set({
+ fill: "#0000FF",
+
+ })
+ }
}
- const list = param.xy || []
+ const list = param?.xy || []
+
+ const objs = []
+
+ let right = 0
+ let bottom = 0
+ let left = this.mapInfo.img_x
+ let top = this.mapInfo.img_y
for (let i in list) {
const pt = list[i]
const pt2 = {
@@ -3098,82 +3110,80 @@
y: this.getYOnImg(pt[1])
}
const point = new fabric.Rect({
- id: "laser_point",
- eleType: "laser_point",
+ // id: "laser_point",
+ // eleType: "laser_point",
left: pt2.x,
top: pt2.y,
width: 1,
height: 1,
fill: "#F5222D",
- originX: "center",
- originY: "center",
- selectable: false,
- hasControls: true,
- lockRotation: true,
- lockScalingX: true,
- lockScalingY: true,
- lockMovementX: true,
- lockMovementY: true,
+ originX: "left",
+ originY: "top",
+ // selectable: false,
+ // hasControls: true,
+ // lockRotation: true,
+ // lockScalingX: true,
+ // lockScalingY: true,
+ // lockMovementX: true,
+ // lockMovementY: true,
});
- // let point = new fabric.Ellipse({
- // id: "laser_point",
- // eleType: "laser_point",
- // left: pt[0],
- // top: pt[1],
- // rx: 2,
- // ry: 1,
- // strokeWidth: 1,
- // stroke: "#F5222D",
- // fill: "#F5222D",
- // originX: "center",
- // originY: "center",
- // selectable: false,
- // hasControls: true,
- // lockRotation: true,
- // lockScalingX: true,
- // lockScalingY: true,
- // lockMovementX: true,
- // lockMovementY: true,
- // });
- this.canvas.add(point)
+ objs.push(point)
+ if (left > pt2.x) {
+ left = pt2.x
+ }
+ if (top > pt2.y) {
+ top = pt2.y
+ }
+ if (right < pt2.x + 1) {
+ right = pt2.x + 1
+ }
+ if (bottom < pt2.y + 1) {
+ bottom = pt2.y + 1
+ }
}
+ //console.log("updateLaserPoint", list.length, left, right,top,bottom)
+ const groupObj = new fabric.Group(objs, {
+ id: `laser_point_group`,
+ eleType: "laser_point_cur_group",
+ left,
+ top,
+ width: right - left,
+ height: bottom - top,
+ // originX: "left",
+ // originY: "top",
+ selectable: false,
+ hasControls: true,
+
+ })
+ this.canvas.add(groupObj)
},
ensurePointVisible(pt) {
var zoom = this.canvas.getZoom();
var vpt = this.canvas.viewportTransform; // 褰撳墠鍙樻崲鐭╅樀
-
+
var newPanX = -vpt[4];
var newPanY = -vpt[5];
- const offWidth = pt.width || 20
- const offHeight = pt.height || 20
- // console.log("ensurePointVisible",pt.x,pt.y,newPanX,newPanY, this.eleWidth,this.eleHeight)
+ const offWidth = pt.width || 20
+ const offHeight = pt.height || 20
+ // console.log("ensurePointVisible",pt.x,pt.y,newPanX,newPanY, this.eleWidth,this.eleHeight)
if (pt.x * zoom < -vpt[4] + offWidth || pt.x * zoom > -vpt[4] + this.eleWidth - offWidth) {
- if (pt.x * zoom - this.eleWidth / 2 <offWidth) {
+ if (pt.x * zoom - this.eleWidth / 2 < offWidth) {
newPanX = -offWidth
- }
- // else if (pt.x * zoom > this.mapInfo.img_x * zoom - 20) {
- // newPanX = this.mapInfo.img_x * zoom - this.eleWidth + 20
- // }
- else {
+ } else {
newPanX = pt.x * zoom - this.eleWidth / 2
}
}
- if (pt.y * zoom < -vpt[5] +offHeight || pt.y * zoom > -vpt[5] + this.eleHeight - (120+offHeight)) {
+ if (pt.y * zoom < -vpt[5] + offHeight || pt.y * zoom > -vpt[5] + this.eleHeight - (120 +
+ offHeight)) {
- if (pt.y * zoom - this.eleHeight / 2 <offHeight) {
+ if (pt.y * zoom - this.eleHeight / 2 < offHeight) {
newPanY = -offHeight
- }
- // else if (pt.y * zoom > this.mapInfo.img_y * zoom - 180) {
- // newPanY = this.mapInfo.img_y * zoom - this.eleHeight + 180
- // }
- else {
- newPanY = pt.y * zoom -(this.eleHeight - 120) / 2
+ } else {
+ newPanY = pt.y * zoom - (this.eleHeight - 120) / 2
}
}
-
- // console.log("ensurePointVisible2",newPanX,newPanY)
// 鍙湁鍦ㄩ渶瑕佹椂鎵嶅钩绉� if (newPanX !== -vpt[4] || newPanY !== -vpt[5]) {
this.canvas.absolutePan({
@@ -3182,10 +3192,10 @@
});
}
},
- ensurePointCenter(pt){
+ ensurePointCenter(pt) {
var zoom = this.canvas.getZoom();
var newPanX = newPanX = pt.x * zoom - this.eleWidth / 2
- var newPanY = pt.y * zoom -(this.eleHeight - 150) / 2
+ var newPanY = pt.y * zoom - (this.eleHeight - 150) / 2
this.canvas.absolutePan({
x: newPanX,
y: newPanY
@@ -3193,44 +3203,58 @@
},
setAllObjectSelectable(selectable) {
let flag = false
+
this.canvas.forEachObject(function(obj) {
if (obj.canSelect) {
- if (!obj.flag) {
+ if (obj.selectable != selectable) {
flag = true
+ obj.set({
+ selectable: selectable,
+ lockEdit: true
+ })
}
- obj.set({
- selectable: selectable,
- lockEdit: true
- })
-
}
-
});
- if (flag) {
+ if (flag)
this.canvas.requestRenderAll()
- }
+
+
},
receiveMsg(newValue, oldValue) {
if (typeof newValue == "undefined")
return;
const _this = this
- //console.log("receiveMsg",_this.initFlag)
- setTimeout(() => {
- if (_this.initFlag) {
- _this.handleMsg(newValue, oldValue)
- } else {
+ if (!this.canvas) {
+ return
+ }
+ if (_this.initFlag) {
+ _this.handleMsg(newValue, oldValue)
+
+ } else {
+ setTimeout(() => {
_this.receiveMsg(newValue, oldValue)
- }
- }, 100)
+ }, 100)
+ }
},
async handleMsg(newValue, oldValue) {
const _this = this
+ if (!this.canvas) {
+ return
+ }
try {
- //console.log("handleMsg", newValue)
+
var data = JSON.parse(newValue);
+ // console.log("handleMsg", data.length)
+ const destroyCommand = data.find(item => item.method === "destroy");
+ if (destroyCommand) {
+ this.destroyCanvas();
+ return;
+ }
+
for (var i = 0; i < data.length; i++) {
const item = data[i]
+
if (item.method == "init") {
if (item.param?.editMode) {
@@ -3243,7 +3267,20 @@
await _this.setBackground(item.param)
} else if (item.method == "update_agv_state") {
const info = item.param || {}
- await _this.updateAgv(info)
+ const obj = _this.agvObj
+ const obj2 = await _this.updateAgv(info, obj)
+ let obj3 = _this.agvObj
+ _this.agvObj = obj2
+ if (obj && obj2 != obj) {
+
+ _this.canvas.remove(obj)
+ if (obj3 == obj)
+ obj3 = undefined
+ }
+ if (obj3 && obj2 != obj3) {
+ _this.canvas.remove(obj3)
+ }
+
} else if (item.method == "update_current_teaching") {
const info = item.param || []
await _this.updateCurrentTeaching(info)
@@ -3257,17 +3294,14 @@
height: 20
}
this.ensurePointVisible(pt)
-
- }
- else if (item.method == "move_pt_center") {
+ } else if (item.method == "move_pt_center") {
const info2 = item.param || {}
const pt = {
x: this.getXOnImg(info2.x),
y: this.getYOnImg(info2.y)
}
this.ensurePointCenter(pt)
- }
- else if (item.method == "add_station") {
+ } else if (item.method == "add_station") {
const stationList = item.param || []
let list = _this.canvas.getObjects() || []
for (let i2 in stationList) {
@@ -3322,7 +3356,6 @@
}
}
-
}
} else if (item.method == "remove_station") {
@@ -3341,9 +3374,7 @@
_this.canvas.remove(list[curIndex])
if (tipObj) {
_this.canvas.remove(tipObj)
-
}
-
}
}
@@ -3475,14 +3506,11 @@
_this.setAllObjectSelectable(false)
let list = _this.canvas.getObjects() || []
list.forEach((obj) => {
- if (obj.eleType == "public_teaching" || obj.eleType == "station_teaching") {
+ if (obj.eleType == "public_teaching" || obj.eleType ==
+ "station_teaching") {
obj.set({
opacity: 1
})
- // obj.set({
- // hasControls: false,
- // selectable: false,
- // })
} else if (obj.eleType == "agv")
obj.set({
opacity: 1
@@ -3501,38 +3529,46 @@
for (let i2 in list) {
const obj = list[i2]
obj.set({
- selectable: obj?.canSelect ?true:false,
+ selectable: obj?.canSelect ? true : false,
opacity: 1
})
}
_this.showTeachingPath(_this.showTeachPathFlag ? true : false)
- }
- else if (item.method == "clear_teaching_path") {
+ } else if (item.method == "clear_teaching_path") {
let list = _this.canvas.getObjects() || []
- list = list.filter((a) => a.eleType == "public_teaching" || a.eleType == "station_teaching")
+ list = list.filter((a) => a.eleType == "public_teaching" || a.eleType ==
+ "station_teaching")
for (let i2 in list) {
this.canvas.remove(list[i2])
}
- }
- else if (item.method == "public_teaching_path") {
-
- const teachingPathList = item.param || []
-
+ } else if (item.method == "public_teaching_path") {
+
+ const teachingPathList = item.param?.list || []
+ const show = item.param?.show || false
for (let i2 in teachingPathList) {
const teachingPath = teachingPathList[i2]
const id = `public_teaching_${teachingPath.name}`
- await this.addTeachingPath(teachingPath, id, "public_teaching")
+ const obj = await this.addTeachingPath(teachingPath, id, "public_teaching",
+ show)
+ obj.set({
+ selectable: show ? true : false,
+ opacity: show ? 1 : 0,
+ })
+
}
} else if (item.method == "station_teaching_path") {
-
- const teachingPathList = item.param || []
+ const show = item.param?.show || false
+ const teachingPathList = item.param?.list || []
for (let i2 in teachingPathList) {
const teachingPath = teachingPathList[i2]
-
const id = `station_teaching_${teachingPath.src_dst}`
-
- await this.addTeachingPath(teachingPath, id, "station_teaching")
+ const obj = await this.addTeachingPath(teachingPath, id, "station_teaching",
+ show)
+ obj.set({
+ selectable: show ? true : false,
+ opacity: show ? 1 : 0,
+ })
}
} else if (item.method == "show_teaching_path") {
_this.showTeachPathFlag = item.param.show
@@ -3559,9 +3595,7 @@
const obj = list[curIndex]
this.canvas.remove(obj)
}
-
}
-
} else if (item.method == "edit_teaching") {
const teachingMode = item.param
_this.showEditTeachingPath(teachingMode)
@@ -3583,7 +3617,6 @@
for (let i2 in wallList) {
const wall = wallList[i2]
const obj = await _this.addVirtualWall(wall)
-
}
} else if (item.method == "wall_list") {
const wallList = item.param || []
@@ -3601,8 +3634,6 @@
for (let i2 in regionList) {
const region = regionList[i2]
const obj = await _this.addRegion(region)
-
-
}
} else if (item.method == "region_list") {
const regionList = item.param || []
@@ -3615,7 +3646,6 @@
await _this.addRegionShow(region)
}
}
-
} else if (item.method == "remove_wall") {
const wallList = item.param || []
let list = _this.canvas.getObjects() || []
@@ -3644,7 +3674,8 @@
this.updateLaserPoint(item.param || {})
}
}
- _this.canvas.renderAll()
+ if (_this.canvas)
+ _this.canvas.renderAll()
} catch (ex) {
console.log(ex)
this.showError(ex)
@@ -3685,6 +3716,5 @@
verticalAlign: "center"
}); // undefined, "閿欒"
},
-
- },
+ }
}
\ No newline at end of file
--
Gitblit v1.9.1