最近在用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); // 终点
然后开始给这个线段绘制箭头，绘制箭头的功能可以封装为一个方法，箭头的位置，朝向等，由于线段的朝向不确定性，箭头也需要根据线段的方向来算，通过两个点的夹角方向获取到箭头的朝向，
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(); // 结束填充
}
然后就可以根据需要来给线段绘制箭头，其中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);
最终结果如下：
