| | |
| | | |
| | | cantainerEl.addEventListener('touchend', function(e) { |
| | | // _this.canvas._onMouseUp(e); |
| | | // console.log('touchend:'); |
| | | |
| | | e.preventDefault(); // 阻止默认行为 |
| | | _this.touchPoint = { |
| | | x: 0, |
| | | y: 0 |
| | | }; |
| | | if (_this.pressObjTimer) { |
| | | |
| | | clearTimeout(_this.pressObjTimer); |
| | | _this.pressObjTimer = null |
| | | |
| | | } |
| | | const activeObj = _this.canvas.getActiveObject() |
| | | if (!activeObj) { |
| | | // 处理结束事件 |
| | |
| | | // _this.canvas.discardActiveObject(); |
| | | // } |
| | | } |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | |
| | | }); |
| | | cantainerEl.addEventListener('touchcancel', function(e) { |
| | | // console.log('touchcancel:'); |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | if (_this.pressObjTimer) { |
| | | clearTimeout(_this.pressObjTimer); |
| | | _this.pressObjTimer = null |
| | | } |
| | | |
| | | }) |
| | |
| | | const list = _this.canvas.getActiveObjects() |
| | | if (list.length === 1) { |
| | | if (!_this.objEditing) { |
| | | |
| | | this.pressObjTimer = setTimeout(function() { |
| | | |
| | | const zoom = _this.canvas.getZoom(); |
| | |
| | | }); |
| | | } |
| | | }, 1000); // |
| | | |
| | | } |
| | | let activeObj = list[0] |
| | | if (activeObj.eleType == "region_pt_add") { |
| | |
| | | if (obj instanceof fabric.Path || obj instanceof fabric.Line) { |
| | | if (this.isPointOnStroke(obj, pointer, 1)) { |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | pointerList2.unshift(obj) |
| | | } else { |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | if (pointerList2.length == 1) { |
| | | const obj = pointerList2[0]; |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | const obj = pointerList[i]; |
| | | if (this.isPointOnStroke(obj, pointer, 2)) { |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | if (pointerList2.length == 1) { |
| | | const obj = pointerList2[0]; |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | const obj = pointerList[i]; |
| | | if (this.isPointOnStroke(obj, pointer, 3)) { |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | if (pointerList2.length == 1) { |
| | | const obj = pointerList2[0]; |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | const obj = pointerList[i]; |
| | | if (this.isPointOnStroke(obj, pointer, 4)) { |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | |
| | | const obj = pointerList2[pointerList2.length - 1]; |
| | | if (objActive != obj) { |
| | | |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | this.canvas.discardActiveObject() |
| | | this.canvas.setActiveObject(obj); |
| | | this.canvas.requestRenderAll(); |
| | |
| | | _this.$ownerInstance.callMethod('receiveRenderData', { |
| | | method: "set_backgroud_progress", |
| | | type: "error", |
| | | msg:err |
| | | msg: err |
| | | }); |
| | | console.error("图片加载失败", err) |
| | | reject(new Error('图片加载失败')); |
| | |
| | | // _this.canvas.renderAll() |
| | | |
| | | _this.workSpace = wsGroup |
| | | const scale = _this.eleWidth / (4 * 84) |
| | | _this.setZoomAuto(scale); // |
| | | } |
| | | //_this.checkMemoryUsage() |
| | | resolve() |
| | |
| | | strokeLineCap: 'butt', |
| | | fill: "rgba(255,255,255,0)", |
| | | }) |
| | | let wsGroup = new fabric.Group([ rect], { |
| | | let wsGroup = new fabric.Group([rect], { |
| | | id: "workspace", |
| | | eleType: "workspace", |
| | | selectable: false, |
| | |
| | | top: 0, |
| | | width: _this.mapInfo.img_x, |
| | | height: _this.mapInfo.img_y, |
| | | |
| | | |
| | | }); |
| | | _this.clearObjects() |
| | | _this.canvas.add(wsGroup) |
| | | _this.workSpace = wsGroup |
| | | const scale = _this.eleWidth / (4 * 84) |
| | | _this.setZoomAuto(scale); // |
| | | resolve() |
| | | }) |
| | | |
| | |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null |
| | | } |
| | | |
| | | } |
| | | if (Math.abs(deltaX) > 20 || Math.abs(deltaY) > 20) { |
| | | this.$ownerInstance.callMethod('receiveRenderData', { |
| | | method: "cancel_positioning_agv", |
| | | }); |
| | | } |
| | | |
| | | // 移动视口 |
| | | const vpt = this.canvas.viewportTransform; |
| | | this.canvas.relativePan(new fabric.Point(deltaX, deltaY)); |
| | |
| | | } |
| | | //console.log(scale, scaleAuto) |
| | | this.setZoomAuto(scale, center) |
| | | this.$ownerInstance.callMethod('receiveRenderData', { |
| | | method: "cancel_positioning_agv", |
| | | }); |
| | | |
| | | // console.log('多点移动 - 距离:', distance, '角度:', angle); |
| | | // 多点移动逻辑 |
| | | }, |
| | |
| | | |
| | | const left = _this.getXOnImg(info.x) // * scale |
| | | const top = _this.getYOnImg(info.y) //* scale |
| | | const angle = info.angle * 180 / Math.PI |
| | | const angle = -(info.angle * 180 / Math.PI) |
| | | fabric.loadSVGFromURL(svg).then( |
| | | ({ |
| | | objects, |
| | |
| | | this.canvas.remove(this.curTeachingObj) |
| | | this.curTeachingObj = null |
| | | } |
| | | |
| | | if (teachingData.lenght === 0) |
| | | return |
| | | posArr.forEach((item) => { |
| | | const curIndex = pos_list.findIndex((item2) => item2.x === item.x && item2.y === item.y) |
| | | if (curIndex < 0) { |
| | |
| | | y: this.getYOnImg(pt.y) |
| | | } |
| | | if (index > 0) { |
| | | if ((index % 50 == 0 || index == len - 1 || index % 50 == 1)) { |
| | | if (index % 50 == 0 || index == len - 1) { |
| | | toX = pt2.x |
| | | toY = pt2.y |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | // if ((index % 50 == 0 || index == len - 1 || index % 50 == 1)) { |
| | | // if (index % 50 == 0 || index == len - 1) { |
| | | // toX = pt2.x |
| | | // toY = pt2.y |
| | | // path2 += ` L${pt2.x} ${pt2.y}` |
| | | |
| | | // 计算各角度和对应的P2,P3坐标 |
| | | let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | angle1 = ((angle + theta) * Math.PI) / 180, |
| | | angle2 = ((angle - theta) * Math.PI) / 180, |
| | | topX = headlen * Math.cos(angle1), |
| | | topY = headlen * Math.sin(angle1), |
| | | botX = headlen * Math.cos(angle2), |
| | | botY = headlen * Math.sin(angle2); |
| | | let arrowX = fromX - topX, |
| | | arrowY = fromY - topY; |
| | | arrowX = toX + topX; |
| | | arrowY = toY + topY; |
| | | path2 += " L " + arrowX + " " + arrowY; |
| | | arrowX = toX + botX; |
| | | arrowY = toY + botY; |
| | | path2 += " M " + arrowX + " " + arrowY; |
| | | path2 += " L " + toX + " " + toY; |
| | | } |
| | | } else { |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | } |
| | | // // 计算各角度和对应的P2,P3坐标 |
| | | // let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | // angle1 = ((angle + theta) * Math.PI) / 180, |
| | | // angle2 = ((angle - theta) * Math.PI) / 180, |
| | | // topX = headlen * Math.cos(angle1), |
| | | // topY = headlen * Math.sin(angle1), |
| | | // botX = headlen * Math.cos(angle2), |
| | | // botY = headlen * Math.sin(angle2); |
| | | // let arrowX = fromX - topX, |
| | | // arrowY = fromY - topY; |
| | | // arrowX = toX + topX; |
| | | // arrowY = toY + topY; |
| | | // path2 += " L " + arrowX + " " + arrowY; |
| | | // arrowX = toX + botX; |
| | | // arrowY = toY + botY; |
| | | // path2 += " M " + arrowX + " " + arrowY; |
| | | // path2 += " L " + toX + " " + toY; |
| | | // } |
| | | // } else { |
| | | // path2 += ` L${pt2.x} ${pt2.y}` |
| | | // } |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | } else { |
| | | path2 = `M${pt2.x} ${pt2.y}` |
| | | } |
| | | fromX = pt2.x |
| | | fromY = pt2.y |
| | | } |
| | | let strokeWidth = 1 |
| | | let strokeWidth = 5 |
| | | let stroke = "#95DE64" |
| | | |
| | | if (main_road == 1) { |
| | |
| | | y: this.getYOnImg(pt.y) |
| | | } |
| | | if (index > 0) { |
| | | if ((type == "public_teaching") && (index % 50 == 0 || index == len - 1 || index % 50 == 1)) { |
| | | if (index % 50 == 1 || index == len - 1) { |
| | | if (teachingData.bidirection == 1 && index < len - 1) { //- 1 |
| | | toY = fromY |
| | | toX = fromX |
| | | fromX = pt2.x |
| | | fromY = pt2.y |
| | | let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | angle1 = ((angle + theta) * Math.PI) / 180, |
| | | angle2 = ((angle - theta) * Math.PI) / 180, |
| | | topX = headlen * Math.cos(angle1), |
| | | topY = headlen * Math.sin(angle1), |
| | | botX = headlen * Math.cos(angle2), |
| | | botY = headlen * Math.sin(angle2); |
| | | let arrowX = fromX - topX, |
| | | arrowY = fromY - topY; |
| | | arrowX = toX + topX; |
| | | arrowY = toY + topY; |
| | | let path3 = " L " + arrowX + " " + arrowY; |
| | | arrowX = toX + botX; |
| | | arrowY = toY + botY; |
| | | path3 += " M " + arrowX + " " + arrowY; |
| | | path3 += " L " + toX + " " + toY; |
| | | // if ((type == "public_teaching") && (index % 50 == 0 || index == len - 1 || index % 50 == 1)) { |
| | | // if (index % 50 == 1 || index == len - 1) { |
| | | // if (teachingData.bidirection == 1 && index < len - 1) { //- 1 |
| | | // toY = fromY |
| | | // toX = fromX |
| | | // fromX = pt2.x |
| | | // fromY = pt2.y |
| | | // let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | // angle1 = ((angle + theta) * Math.PI) / 180, |
| | | // angle2 = ((angle - theta) * Math.PI) / 180, |
| | | // topX = headlen * Math.cos(angle1), |
| | | // topY = headlen * Math.sin(angle1), |
| | | // botX = headlen * Math.cos(angle2), |
| | | // botY = headlen * Math.sin(angle2); |
| | | // let arrowX = fromX - topX, |
| | | // arrowY = fromY - topY; |
| | | // arrowX = toX + topX; |
| | | // arrowY = toY + topY; |
| | | // let path3 = " L " + arrowX + " " + arrowY; |
| | | // arrowX = toX + botX; |
| | | // arrowY = toY + botY; |
| | | // path3 += " M " + arrowX + " " + arrowY; |
| | | // path3 += " L " + toX + " " + toY; |
| | | |
| | | path2 += path3 |
| | | fromY = toY |
| | | fromX = toX |
| | | } |
| | | } |
| | | if (index % 50 == 0 || index == len - 1) { |
| | | toX = pt2.x |
| | | toY = pt2.y |
| | | // if (fromX == toX && fromY == toY) { |
| | | // if (index - 2 >= 0) { |
| | | // const pt3 = pos_list[index - 2] |
| | | // fromX = this.getXOnImg(pt3.x), |
| | | // fromY = this.getYOnImg(pt3.y) |
| | | // } else { |
| | | // continue; |
| | | // } |
| | | // } |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | // path2 += path3 |
| | | // fromY = toY |
| | | // fromX = toX |
| | | // } |
| | | // } |
| | | // if (index % 50 == 0 || index == len - 1) { |
| | | // toX = pt2.x |
| | | // toY = pt2.y |
| | | // // if (fromX == toX && fromY == toY) { |
| | | // // if (index - 2 >= 0) { |
| | | // // const pt3 = pos_list[index - 2] |
| | | // // fromX = this.getXOnImg(pt3.x), |
| | | // // fromY = this.getYOnImg(pt3.y) |
| | | // // } else { |
| | | // // continue; |
| | | // // } |
| | | // // } |
| | | // path2 += ` L${pt2.x} ${pt2.y}` |
| | | |
| | | // 计算各角度和对应的P2,P3坐标 |
| | | let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | angle1 = ((angle + theta) * Math.PI) / 180, |
| | | angle2 = ((angle - theta) * Math.PI) / 180, |
| | | topX = headlen * Math.cos(angle1), |
| | | topY = headlen * Math.sin(angle1), |
| | | botX = headlen * Math.cos(angle2), |
| | | botY = headlen * Math.sin(angle2); |
| | | let arrowX = fromX - topX, |
| | | arrowY = fromY - topY; |
| | | arrowX = toX + topX; |
| | | arrowY = toY + topY; |
| | | path2 += " L " + arrowX + " " + arrowY; |
| | | arrowX = toX + botX; |
| | | arrowY = toY + botY; |
| | | path2 += " M " + arrowX + " " + arrowY; |
| | | path2 += " L " + toX + " " + toY; |
| | | } |
| | | // console.log(`箭头 L${pt2.x} ${pt2.y}`) |
| | | } else { |
| | | // console.log(`点 L${pt2.x} ${pt2.y} ${index} == ${len-1}`) |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | } |
| | | // // 计算各角度和对应的P2,P3坐标 |
| | | // let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI, |
| | | // angle1 = ((angle + theta) * Math.PI) / 180, |
| | | // angle2 = ((angle - theta) * Math.PI) / 180, |
| | | // topX = headlen * Math.cos(angle1), |
| | | // topY = headlen * Math.sin(angle1), |
| | | // botX = headlen * Math.cos(angle2), |
| | | // botY = headlen * Math.sin(angle2); |
| | | // let arrowX = fromX - topX, |
| | | // arrowY = fromY - topY; |
| | | // arrowX = toX + topX; |
| | | // arrowY = toY + topY; |
| | | // path2 += " L " + arrowX + " " + arrowY; |
| | | // arrowX = toX + botX; |
| | | // arrowY = toY + botY; |
| | | // path2 += " M " + arrowX + " " + arrowY; |
| | | // path2 += " L " + toX + " " + toY; |
| | | // } |
| | | // // console.log(`箭头 L${pt2.x} ${pt2.y}`) |
| | | // } else { |
| | | // // console.log(`点 L${pt2.x} ${pt2.y} ${index} == ${len-1}`) |
| | | // path2 += ` L${pt2.x} ${pt2.y}` |
| | | // } |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | } else { |
| | | main_road = pt.main_road |
| | | if (main_road == 1) { |
| | |
| | | |
| | | // console.log("addTeachingPath",path2) |
| | | // path2 += " Z" |
| | | let strokeWidth = 1 |
| | | let strokeWidth = 2 |
| | | let stroke = "#95DE64" |
| | | if (type == "station_teaching") { |
| | | stroke = "#69C0FF" |
| | | } else { |
| | | if (main_road == 1) { |
| | | stroke = "#69C0FF" |
| | | if (teachingData.bidirection == 1) { |
| | | stroke = "#FF00FF" |
| | | } |
| | | } else { |
| | | if (teachingData.bidirection == 1) { |
| | | stroke = "#ffaa00" |
| | | } |
| | | } |
| | | } |
| | | let list = this.canvas.getObjects() || [] |
| | |
| | | // 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 |
| | | const angle = -(info.angle * 180 / Math.PI) + 90 |
| | | if (obj) { |
| | | obj.set({ |
| | | left, |
| | |
| | | this.canvas.remove(obj) |
| | | }, |
| | | updateAgvLaser(param) { |
| | | const angle = param.angle - Math.PI / 2 // * 180 / Math.PI |
| | | const angle = -param.angle //- Math.PI / 2 // * 180 / Math.PI |
| | | const pt = { |
| | | x: this.getXOnImg(param.x), |
| | | y: this.getYOnImg(param.y) |
| | |
| | | id: "agv_laser_angle", |
| | | eleType: "agv_laser_angle", |
| | | stroke: "#00aa00", |
| | | strokeWidth: 2, |
| | | strokeWidth: 1, |
| | | lockRotation: true, |
| | | lockScalingX: true, |
| | | lockScalingY: true, |
| | |
| | | } else { |
| | | // _this.canvas.remove(list[curIndex]) |
| | | const curStationObj = list[curIndex] |
| | | const angle = station.angle * 180 / Math.PI |
| | | const angle = -station.angle * 180 / Math.PI |
| | | //const scale = this.getAutoScale() |
| | | const left = this.getXOnImg(station.x) //* scale |
| | | const top = this.getYOnImg(station.y) //* scale |
| | |
| | | |
| | | } else if (item.method == "remove_station") { |
| | | const stationList = item.param || [] |
| | | this.canvas.discardActiveObject() |
| | | let list = _this.canvas.getObjects() || [] |
| | | |
| | | list = list.filter((a) => a.eleType == "station") |
| | |
| | | _this.showTeachingPath(_this.showTeachPathFlag ? true : false) |
| | | |
| | | } else if (item.method == "clear_teaching_path") { |
| | | this.canvas.discardActiveObject() |
| | | let list = _this.canvas.getObjects() || [] |
| | | list = list.filter((a) => a.eleType == "public_teaching" || a.eleType == |
| | | "station_teaching") |
| | |
| | | _this.showTeachingPath(item.param.show) |
| | | |
| | | } else if (item.method == "remove_teaching_path") { |
| | | this.canvas.discardActiveObject() |
| | | let list = _this.canvas.getObjects() || [] |
| | | if (item.param.mode == "Public") { |
| | | list = list.filter((a) => a.eleType == "public_teaching") |
| | |
| | | } |
| | | } else if (item.method == "remove_wall") { |
| | | const wallList = item.param || [] |
| | | this.canvas.discardActiveObject() |
| | | let list = _this.canvas.getObjects() || [] |
| | | list = list.filter((a) => a.eleType == "virtual_wall") |
| | | for (let i2 in wallList) { |
| | |
| | | } |
| | | } else if (item.method == "remove_region") { |
| | | const regionList = item.param || [] |
| | | this.canvas.discardActiveObject() |
| | | let list = _this.canvas.getObjects() || [] |
| | | list = list.filter((a) => a.eleType == "region") |
| | | for (let i2 in regionList) { |