cuiqian2004
2025-10-17 68ce9382090846dc3a03a057a18a7d09f30e45e5
pages/map/js/ctx.js
@@ -1268,6 +1268,7 @@
         }
      },
      clearObjects() {
         if (!this.canvas) return;
         this.canvas.discardActiveObject()
         const objects = this.canvas.getObjects()
@@ -1283,6 +1284,8 @@
         this.objEditing = null;
         this.editObject = null;
         this.drawingObj = null;
         this.objAgvLaser = null
         this.objAgvLaserLine = null
         if (this.pressObjTimer) {
            clearTimeout(this.pressObjTimer);
            this.pressObjTimer = null;
@@ -2063,9 +2066,6 @@
            }
         })
         let path2 = ""
         const theta = 20;
         let headlen = 10;
         var main_road = teachingData.main_road || 0
         const len = pos_list.length
         let fromX = 0,
@@ -2079,33 +2079,7 @@
               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}`
@@ -2116,9 +2090,7 @@
         let strokeWidth = 5
         let stroke = "#69C0FF"
         // if (main_road == 1) {
         //    stroke = "#69C0FF"
         // }
         const objPath = new fabric.Path(
            path2, {
               id: "current_teaching",
@@ -2154,7 +2126,7 @@
         const theta = 20;
         let headlen = 10;
         var main_road = teachingData.main_road || 0
         var main_road = teachingData.main_road
         const len = pos_list.length
         let fromX = 0,
@@ -2170,79 +2142,12 @@
               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 {
               if (pt.main_road)
               if (main_road === undefined)
                  main_road = pt.main_road
               // if (main_road == 1) {
               //    headlen = 15
               // }
               path2 = `M${pt2.x} ${pt2.y}`
            }
            fromX = pt2.x
@@ -2271,6 +2176,7 @@
               }
            }
         }
         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
@@ -2360,7 +2266,7 @@
         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}`
@@ -3083,48 +2989,97 @@
            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) {
@@ -3166,7 +3121,7 @@
               top: pt2.y,
               width: 1,
               height: 1,
               fill: "#F5222D",
               fill: "#ff00ff",
               originX: "left",
               originY: "top",
               // selectable: false,
@@ -3600,7 +3555,7 @@
                  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({
@@ -3631,7 +3586,7 @@
                  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) {
@@ -3656,7 +3611,7 @@
               } 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}`
                  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]
@@ -3679,7 +3634,10 @@
                        }
                     }
                     obj.set({strokeWidth,stroke})
                     obj.set({
                        strokeWidth,
                        stroke
                     })
                  }
               } else if (item.method == "set_selectable") {
@@ -3756,7 +3714,10 @@
                  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()