Pixi绘制带箭头的线

最近在用pixi绘制地图的时候需要做带箭头的线，用来从一个点执行另一个点，表示此段路线可行，但是发现pixie是没有自带的绘制带箭头线段的，那就只能自己绘制了，在此记录一下，pixi底层是用的canvas，所以绘图和方法和canvas很像，先通过PIXI创建Graphics对象。，绘制一条线段，这里绘制从（50，50）到（350，350）的线段颜色设置为黑色

 let graphics = new PIXI.Graphics();
 this.app.stage.addChild(graphics);

// 绘制线段
graphics.lineStyle(2, 0x000000); // 设置线条样式（宽度和颜色）
graphics.moveTo(50, 50); // 起点
graphics.lineTo(350, 350); // 终点

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后开始给这个线段绘制箭头，绘制箭头的功能可以封装为一个方法，箭头的位置，朝向等，由于线段的朝向不确定性，箭头也需要根据线段的方向来算，通过两个点的夹角方向获取到箭头的朝向，

drawArrow(graphics, x, y, dx, dy, size) {
      let angle = Math.atan2(dy, dx); // 计算角度
      // 计算箭头两侧的顶点位置
      let arrowX1 = x - size * Math.cos(angle + Math.PI / 6);
      let arrowY1 = y - size * Math.sin(angle + Math.PI / 6);
      let arrowX2 = x - size * Math.cos(angle - Math.PI / 6);
      let arrowY2 = y - size * Math.sin(angle - Math.PI / 6);
      // 绘制箭头
      graphics.beginFill(0x000000); // 设置填充颜色
      graphics.moveTo(x, y); // 从当前点开始
      graphics.lineTo(arrowX1, arrowY1); // 绘制箭头的一侧
      graphics.lineTo(arrowX2, arrowY2); // 绘制箭头的另一侧
      graphics.lineTo(x, y); // 闭合箭头
      graphics.endFill(); // 结束填充
    }

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后就可以根据需要来给线段绘制箭头，其中dx的值是startX-endX,dy的值是startY-endY获取到，

      graphics.lineStyle(2, 0x000000); // 设置线条样式（宽度和颜色）
      graphics.moveTo(50, 50); // 起点
      graphics.lineTo(350, 350); // 终点
      this.drawArrow(graphics, 50, 50, -300,-300, this.size);
      this.drawArrow(graphics, 350, 350,  300,300, this.size);

        

          
        
        
        

          

          AI 代码解读
        
      
      

最终结果如下：