| | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | vehicleIp: "", |
|---|
| | | canvasId: "", |
|---|
| | | canvas: null, |
|---|
| | | eleWidth: 0, |
|---|
| | |
|---|
| | | 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, // 中间上 |
|---|
| | |
|---|
| | | canvas.setAttribute("id", this.canvasId) |
|---|
| | | canvas.setAttribute("type", "2d") |
|---|
| | | cantainerEl.appendChild(canvas) |
|---|
| | | |
|---|
| | | this.canvas = new fabric.Canvas(this.canvasId, { |
|---|
| | | allowTouchScrolling: true, // 允许触摸滚动 |
|---|
| | | selection: true, |
|---|
| | |
|---|
| | | renderOnAddRemove: false, |
|---|
| | | imageSmoothingEnabled: true |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | this.canvas.clear() |
|---|
| | | this.eleWidth = cantainerEl.clientWidth |
|---|
| | | this.eleHeight = cantainerEl.clientHeight |
|---|
| | |
|---|
| | | |
|---|
| | | } 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) { |
|---|
| | |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | // 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) { |
|---|
| | |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // 计算点到线段的距离 |
|---|
| | |
|---|
| | | |
|---|
| | | objects.splice(0, 1); |
|---|
| | | const objActive = this.canvas.getActiveObject() |
|---|
| | | |
|---|
| | | let pointerList = [] |
|---|
| | | let pointerList2 = [] |
|---|
| | | for (let i = objects.length - 1; i >= 0; i--) { |
|---|
| | |
|---|
| | | } |
|---|
| | | 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 |
|---|
| | |
|---|
| | | |
|---|
| | | }); |
|---|
| | | _this.createOkCancelControl(obj) |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | _this.canvas.requestRenderAll() |
|---|
| | | } else if (target?.eleType == "edit_teaching") { |
|---|
| | | |
|---|
| | | _this.updateEditTeachingPath(target) |
|---|
| | |
|---|
| | | else |
|---|
| | | _this.updateRegion(target, data) |
|---|
| | | |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | _this.canvas.requestRenderAll() |
|---|
| | | |
|---|
| | | } else if (target?.eleType == "wall_pt") { |
|---|
| | | const data = target.mainObj?.data |
|---|
| | |
|---|
| | | |
|---|
| | | _this.updateVirtualWall(target.mainObj, data) |
|---|
| | | |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | _this.canvas.requestRenderAll() |
|---|
| | | } else if (target?.eleType == "region_pt") { |
|---|
| | | const data = target.mainObj?.data |
|---|
| | | if (!data) |
|---|
| | |
|---|
| | | } |
|---|
| | | _this.updateRegion(target.mainObj, data) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | _this.canvas.requestRenderAll() |
|---|
| | | } |
|---|
| | | } else if (target?.eleType == "edit_teaching_pt") { |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | _this.$ownerInstance.callMethod('receiveRenderData', { |
|---|
| | | method: "set_backgroud_progress", |
|---|
| | | type: "error", |
|---|
| | | msg:err |
|---|
| | | }); |
|---|
| | | console.error("图片加载失败", err) |
|---|
| | | reject(new Error('图片加载失败')); |
|---|
| | |
|---|
| | | } |
|---|
| | | 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 |
|---|
| | | |
|---|
| | |
|---|
| | | // 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 |
|---|
| | |
|---|
| | | 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, |
|---|
| | |
|---|
| | | 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() |
|---|
| | | }) |
|---|
| | | |
|---|
| | |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | y: touch.clientY |
|---|
| | | }; |
|---|
| | | // console.log('单点触摸开始'); |
|---|
| | | |
|---|
| | | let activeObj = this.canvas.getActiveObject(); |
|---|
| | | if (!activeObj) { |
|---|
| | | if (!this.drawType) { |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 移动视口 |
|---|
| | | // console.log('relativePan', deltaX, deltaY); |
|---|
| | | const vpt = this.canvas.viewportTransform; |
|---|
| | | this.canvas.relativePan(new fabric.Point(deltaX, deltaY)); |
|---|
| | | if (this.objEditing) { |
|---|
| | |
|---|
| | | |
|---|
| | | 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]) |
|---|
| | |
|---|
| | | if (this.objEditing) { |
|---|
| | | this.createOkCancelControl(this.objEditing) |
|---|
| | | } |
|---|
| | | this.canvas.renderAll() |
|---|
| | | this.canvas.requestRenderAll() |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | // console.log("addTeachingPath",path2) |
|---|
| | | // path2 += " Z" |
|---|
| | | let strokeWidth = 1 |
|---|
| | |
|---|
| | | lockScalingY: true, |
|---|
| | | lockMovementX: true, |
|---|
| | | lockMovementY: true, |
|---|
| | | selectable: false, |
|---|
| | | opacity: 1, |
|---|
| | | |
|---|
| | | mainRoad: main_road, |
|---|
| | | data: teachingData |
|---|
| | | }) |
|---|
| | |
|---|
| | | const obj = list[i2] |
|---|
| | | obj.set({ |
|---|
| | | opacity: show ? 1 : 0, |
|---|
| | | strokeDashArray: [], |
|---|
| | | strokeLineCap: '', |
|---|
| | | // strokeDashArray: [], |
|---|
| | | // strokeLineCap: '', |
|---|
| | | hasControls: show, |
|---|
| | | selectable: show, |
|---|
| | | }) |
|---|
| | |
|---|
| | | 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( |
|---|
| | |
|---|
| | | 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) |
|---|
| | |
|---|
| | | }); |
|---|
| | | return line |
|---|
| | | }, |
|---|
| | | |
|---|
| | | addVirtualWall(info) { |
|---|
| | | const path = info.path || [] |
|---|
| | | if (path.length != 2) |
|---|
| | |
|---|
| | | 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 { |
|---|
| | |
|---|
| | | 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) |
|---|
| | |
|---|
| | | this.canvas.add(ellipse) |
|---|
| | | const offX = 20 * Math.cos(angle) |
|---|
| | | const offY = 20 * Math.sin(angle) |
|---|
| | | |
|---|
| | | |
|---|
| | | if (this.objAgvLaser) { |
|---|
| | | this.canvas.remove(this.objAgvLaser) |
|---|
| | | } |
|---|
| | |
|---|
| | | 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 = { |
|---|
| | |
|---|
| | | 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({ |
|---|
| | |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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 |
|---|
| | |
|---|
| | | }, |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | 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) |
|---|
| | |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } else if (item.method == "remove_station") { |
|---|
| | |
|---|
| | | _this.canvas.remove(list[curIndex]) |
|---|
| | | if (tipObj) { |
|---|
| | | _this.canvas.remove(tipObj) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | _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 |
|---|
| | |
|---|
| | | 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 |
|---|
| | |
|---|
| | | const obj = list[curIndex] |
|---|
| | | this.canvas.remove(obj) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } else if (item.method == "edit_teaching") { |
|---|
| | | const teachingMode = item.param |
|---|
| | | _this.showEditTeachingPath(teachingMode) |
|---|
| | |
|---|
| | | 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 || [] |
|---|
| | |
|---|
| | | 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 || [] |
|---|
| | |
|---|
| | | await _this.addRegionShow(region) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } else if (item.method == "remove_wall") { |
|---|
| | | const wallList = item.param || [] |
|---|
| | | let list = _this.canvas.getObjects() || [] |
|---|
| | |
|---|
| | | this.updateLaserPoint(item.param || {}) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | if (_this.canvas) |
|---|
| | | _this.canvas.renderAll() |
|---|
| | | } catch (ex) { |
|---|
| | | console.log(ex) |
|---|
| | | this.showError(ex) |
|---|
| | |
|---|
| | | verticalAlign: "center" |
|---|
| | | }); // undefined, "错误" |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
