| | |
| | | } |
| | | }, |
| | | clearObjects() { |
| | | |
| | | if (!this.canvas) return; |
| | | this.canvas.discardActiveObject() |
| | | const objects = this.canvas.getObjects() |
| | |
| | | this.objEditing = null; |
| | | this.editObject = null; |
| | | this.drawingObj = null; |
| | | this.objAgvLaser = null |
| | | this.objAgvLaserLine = null |
| | | if (this.pressObjTimer) { |
| | | clearTimeout(this.pressObjTimer); |
| | | this.pressObjTimer = null; |
| | |
| | | } |
| | | }) |
| | | let path2 = "" |
| | | const theta = 20; |
| | | let headlen = 10; |
| | | var main_road = teachingData.main_road || 0 |
| | | |
| | | const len = pos_list.length |
| | | let fromX = 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}` |
| | | |
| | | // // 计算各角度和对应的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}` |
| | |
| | | fromY = pt2.y |
| | | } |
| | | let strokeWidth = 5 |
| | | let stroke = "#95DE64" |
| | | let stroke = "#69C0FF" |
| | | |
| | | if (main_road == 1) { |
| | | stroke = "#69C0FF" |
| | | } |
| | | |
| | | const objPath = new fabric.Path( |
| | | path2, { |
| | | id: "current_teaching", |
| | |
| | | |
| | | const theta = 20; |
| | | let headlen = 10; |
| | | var main_road = 1 |
| | | var main_road = teachingData.main_road |
| | | |
| | | const len = pos_list.length |
| | | let fromX = 0, |
| | |
| | | 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; |
| | | |
| | | // 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}` |
| | | // } |
| | | |
| | | path2 += ` L${pt2.x} ${pt2.y}` |
| | | } else { |
| | | main_road = pt.main_road |
| | | if (main_road == 1) { |
| | | headlen = 15 |
| | | } |
| | | if (main_road === undefined) |
| | | main_road = pt.main_road |
| | | |
| | | path2 = `M${pt2.x} ${pt2.y}` |
| | | } |
| | | fromX = pt2.x |
| | |
| | | |
| | | // console.log("addTeachingPath",path2) |
| | | // path2 += " Z" |
| | | let strokeWidth = 2 |
| | | let stroke = "#95DE64" |
| | | let strokeWidth = 1.5 |
| | | let stroke = "#69C0FF" |
| | | if (type == "station_teaching") { |
| | | stroke = "#69C0FF" |
| | | } else { |
| | | if (main_road == 1) { |
| | | stroke = "#69C0FF" |
| | | if (teachingData.bidirection == 1) { |
| | | stroke = "#FF00FF" |
| | | } |
| | | } else { |
| | | //stroke = "#69C0FF" |
| | | if (teachingData.bidirection == 1) { |
| | | stroke = "#ffaa00" |
| | | } |
| | | strokeWidth = 3 |
| | | |
| | | } else { |
| | | if (teachingData.bidirection == 1) { |
| | | stroke = "#FF00FF" |
| | | } |
| | | } |
| | | } |
| | | teachingData.main_road = main_road |
| | | let list = this.canvas.getObjects() || [] |
| | | list = list.filter((a) => a.eleType == "station_teaching" || a.eleType == "public_teaching") |
| | | let lenTeaching = list.length |
| | |
| | | |
| | | return objPath |
| | | }, |
| | | |
| | | isObjectFullyContained(outerObj, innerObj) { |
| | | const outer = outerObj.getBoundingRect(true, true); |
| | | const inner = innerObj.getBoundingRect(true, true); |
| | |
| | | let id = "" |
| | | if (teachingMode.mode == "Public") { |
| | | eleType = "public_teaching" |
| | | id = `public_teaching_${teachingMode.name}` |
| | | id = `public_teaching_${teachingMode.name}_${teachingMode.edge_name}` |
| | | } else if (teachingMode.mode == "Stations") { |
| | | eleType = "station_teaching" |
| | | id = `station_teaching_${teachingMode.src_dst}` |
| | |
| | | x: this.getXOnImg(param.x), |
| | | y: this.getYOnImg(param.y) |
| | | } |
| | | if (this.objAgvLaser) { |
| | | this.objAgvLaser.set({stroke: "#00ff00", rx: 2, |
| | | ry:2}) |
| | | } |
| | | let ellipse = new fabric.Ellipse({ |
| | | id: "agv_laser", |
| | | eleType: "agv_laser", |
| | | left: pt.x, |
| | | top: pt.y, |
| | | rx: 2, |
| | | ry: 2, |
| | | stroke: "#00aa00", |
| | | rx: 3, |
| | | ry: 3, |
| | | stroke: "#ff0000", |
| | | strokeWidth: 1, |
| | | fill: "#00aa00", |
| | | fill: "#00ff00", |
| | | originX: "center", |
| | | originY: "center", |
| | | selectable: false, |
| | | hasControls: true, |
| | | lockRotation: true, |
| | | lockScalingX: true, |
| | | lockScalingY: true, |
| | | lockMovementX: true, |
| | | lockMovementY: true, |
| | | hasControls: false, |
| | | |
| | | }); |
| | | this.canvas.add(ellipse) |
| | | const offX = 20 * Math.cos(angle) |
| | | const offY = 20 * Math.sin(angle) |
| | | |
| | | if (this.objAgvLaser) { |
| | | this.canvas.remove(this.objAgvLaser) |
| | | this.objAgvLaser = ellipse |
| | | if (this.objAgvLaserLine) { |
| | | this.canvas.remove(this.objAgvLaserLine) |
| | | } |
| | | const line = new fabric.Line([pt.x, pt.y, pt.x + offX, |
| | | pt.y + offY |
| | | ], { |
| | | id: "agv_laser_angle", |
| | | eleType: "agv_laser_angle", |
| | | stroke: "#00aa00", |
| | | stroke: "#00ff00", |
| | | strokeWidth: 1, |
| | | lockRotation: true, |
| | | lockScalingX: true, |
| | | lockScalingY: true, |
| | | lockMovementX: true, |
| | | lockMovementY: true, |
| | | selectable: false, |
| | | hasControls: false, |
| | | }); |
| | | this.objAgvLaser = line |
| | | |
| | | this.objAgvLaserLine = line |
| | | this.canvas.add(line) |
| | | }, |
| | | addTrajectoryPoint(list) { |
| | | 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 = { |
| | | x: this.getXOnImg(pt[0]), |
| | | y: this.getYOnImg(pt[1]) |
| | | } |
| | | let ellipse = new fabric.Ellipse({ |
| | | left: pt2.x, |
| | | top: pt2.y, |
| | | rx: 2, |
| | | ry: 2, |
| | | stroke: "#00ff00", |
| | | strokeWidth: 1, |
| | | fill: "#00ff00", |
| | | originX: "center", |
| | | originY: "center", |
| | | }); |
| | | |
| | | objs.push(ellipse) |
| | | if (left > pt2.x-2) { |
| | | left = pt2.x-2 |
| | | } |
| | | if (top > pt2.y-2) { |
| | | top = pt2.y-2 |
| | | } |
| | | if (right < pt2.x + 2) { |
| | | right = pt2.x + 2 |
| | | } |
| | | if (bottom < pt2.y + 2) { |
| | | bottom = pt2.y + 2 |
| | | } |
| | | } |
| | | const groupObj = new fabric.Group(objs, { |
| | | id: `trajectory_point_group`, |
| | | eleType: "trajectory_point_group", |
| | | left, |
| | | top, |
| | | width: right - left, |
| | | height: bottom - top, |
| | | selectable: false, |
| | | hasControls: true, |
| | | }) |
| | | this.canvas.add(groupObj) |
| | | }, |
| | | updateLaserPoint(param) { |
| | | |
| | |
| | | top: pt2.y, |
| | | width: 1, |
| | | height: 1, |
| | | fill: "#F5222D", |
| | | fill: "#ff00ff", |
| | | originX: "left", |
| | | originY: "top", |
| | | // selectable: false, |
| | |
| | | const show = item.param?.show || false |
| | | for (let i2 in teachingPathList) { |
| | | const teachingPath = teachingPathList[i2] |
| | | const id = `public_teaching_${teachingPath.name}` |
| | | const id = `public_teaching_${teachingPath.name}_${teachingPath.edge_name}` |
| | | const obj = await this.addTeachingPath(teachingPath, id, "public_teaching", |
| | | show) |
| | | obj.set({ |
| | |
| | | let list = _this.canvas.getObjects() || [] |
| | | if (item.param.mode == "Public") { |
| | | list = list.filter((a) => a.eleType == "public_teaching") |
| | | const id = `public_teaching_${item.param.name}` |
| | | const id = `public_teaching_${item.param.name}_${item.param.edge_name}` |
| | | const curIndex = list.findIndex((a) => a.id == id) |
| | | |
| | | if (curIndex > -1) { |
| | |
| | | const teachingMode = item.param |
| | | _this.showEditTeachingPath(teachingMode) |
| | | |
| | | } else if (item.method == "update_teaching") { |
| | | let list = _this.canvas.getObjects() || [] |
| | | list = list.filter((a) => a.eleType == "public_teaching") |
| | | const id = `public_teaching_${item.param.name}_${item.param.edge_name}` |
| | | const curIndex = list.findIndex((a) => a.id == id) |
| | | if (curIndex > -1) { |
| | | const obj = list[curIndex] |
| | | |
| | | |
| | | |
| | | let strokeWidth = 1.5 |
| | | let stroke = "#69C0FF" |
| | | |
| | | if (item.param.main_road == 1) { |
| | | //stroke = "#69C0FF" |
| | | if (item.param.bidirection == 1) { |
| | | stroke = "#ffaa00" |
| | | } |
| | | strokeWidth = 3 |
| | | |
| | | } else { |
| | | if (item.param.bidirection == 1) { |
| | | stroke = "#FF00FF" |
| | | } |
| | | } |
| | | |
| | | obj.set({ |
| | | strokeWidth, |
| | | stroke |
| | | }) |
| | | |
| | | } |
| | | } else if (item.method == "set_selectable") { |
| | | if (item.param) |
| | | _this.setAllObjectSelectable(true) |
| | |
| | | this.updateAgvLaser(item.param || {}) |
| | | } else if (item.method == "point_cloud") { |
| | | this.updateLaserPoint(item.param || {}) |
| | | } else if (item.method == "point_trajectory") { |
| | | this.addTrajectoryPoint(item.param || []) |
| | | } |
| | | |
| | | } |
| | | if (_this.canvas) |
| | | _this.canvas.renderAll() |