Pixi绘制带箭头的线

简介: 这篇文章讲解了如何使用Pixi.js来绘制带有箭头的线条,并提供了绘制箭头的具体实现方法和技术细节。

最近在用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 代码解读

最终结果如下:

目录
打赏
0
4
4
0
74
分享
相关文章
|
4月前
ThreeJs绘制线
这篇文章详细说明了如何使用Three.js来绘制线条,包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
74 1
|
4月前
ThreeJs绘制圆柱体
这篇文章介绍了在Three.js中绘制圆柱体的方法,包括创建圆柱体几何体、设置材质以及将其正确放置在三维场景中的技巧。
86 0
ThreeJs绘制圆柱体
|
4月前
ThreeJs创建圆环
这篇文章介绍了如何在Three.js中创建一个圆环(torus),包括设置圆环的几何形状、材质以及将其添加到场景中的具体步骤。
93 0
ThreeJs创建圆环
|
7月前
|
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
canvas系列教程02——圆、弧线、圆角矩形、曲线(气泡、心形、N叶草)、扇形
110 0
|
9月前
|
绘制箭头
【5月更文挑战第11天】绘制箭头。
50 1
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
308 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
158 0
用Canvas实现简单画图(线、三角形、矩形、圆)
👋因为在B站看到一个小demo是基于canvas写的,非常喜欢,然后上掘金大数据又给我推了 《Canvas 从入门到劝朋友放弃(图解版)》,就像上手一下canvas,本来不想写笔记的,因为《Canvas 从入门到劝朋友放弃(图解版)》自己看了一下挺全的,但本着输入要有输出,所以就有了这篇文章
259 0
用canvas 实现矩形的移动(点、线、面)
前言 在canvas中实现图片移动、实现矩形移动,大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢,因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下,读完本篇文章你可以学到,通过移动矩形的一个点, 一个条边线,以及整个面的移动。本篇文章从浅到深,希望你耐心读下去。
用canvas 实现矩形的移动(点、线、面)