曲线

src/pages/modules/map.vue

@@ -292,14 +292,32 @@ export default {
     }, 30),
     drawPath () {
       if (!this.pathData.length) return
-      this.pathData.forEach(point => {
+      this.pathData.forEach((point, index) => {
         const startX = (point.start_x - this.mapData.x) / this.mapData.resolution
         const startY = this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution
         const endX = (point.end_x - this.mapData.x) / this.mapData.resolution
         const endY = this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution
+
+        const nextPoint = this.pathData[index + 1];
+        let controlX, controlY;
+        
+        if (nextPoint) {
+          // 有下一个点时，使用当前终点和下一个起点的中点作为控制点
+          const nextStartX = (nextPoint.start_x - this.mapData.x) / this.mapData.resolution;
+          const nextStartY = this.mapData.height - (nextPoint.start_y - this.mapData.y) / this.mapData.resolution;
+          controlX = (endX + nextStartX) / 2;
+          controlY = (endY + nextStartY) / 2;
+        } else {
+          // 最后一个点，使用当前终点作为控制点
+          controlX = endX;
+          controlY = endY;
+        }
+
         this.ctx.beginPath()
         this.ctx.moveTo(startX, startY)
-        this.ctx.lineTo(endX, endY)
+
+        this.ctx.quadraticCurveTo(controlX, controlY, endX, endY);
+
         if (this.selectedPath.route_id === point.route_id) {
           this.ctx.strokeStyle = '#ff5722' // 橙色高亮
           this.ctx.lineWidth = 4