pixi.js 实心多边形

pixi.js画的多边形都是用线连接在一起并用颜色填充,导致多边形中无法触发事件
有没有什么办法解决这个问题?

感谢各位提的宝贵意见,经过反复尝试,pixi.js的多边形是实心的;出这个问题的原因是我给后端存的坐标是 Number类型的数组,后端传过来的是字符数组,导致这个问题的发生

参考GPT和自己的思路:

是的,解决这个问题的方法是使用 pixi.js 的 Graphics 类来绘制实心多边形。Graphics 类可以直接绘制填充多边形,而不需要使用线条来连接多边形的各个顶点。这样就能够实现多边形的事件触发了。具体的使用方法可以参考 pixi.js 的官方文档和示例代码。

咋都是GPT呢,题主不行你自己也GPT一下吧

参考GPT和自己的思路:

对于这个问题,你可以使用 pixi.js 的 Graphics 类来创建实心多边形,并将其添加到交互容器中,这样就能触发事件了。具体实现方法如下:

  1. 创建 Graphics 类的实例,并使用 beginFill 方法设置填充颜色和透明度。
  2. 使用 drawPolygon 方法绘制多边形的顶点坐标。
  3. 使用 endFill 方法结束填充,并将 Graphics 对象添加到交互容器中。

示例代码:

// 创建 Graphics 对象
const polygon = new PIXI.Graphics();

// 设置填充颜色和透明度
polygon.beginFill(0xff0000, 1);

// 绘制多边形的顶点坐标
polygon.drawPolygon([100, 100, 150, 50, 200, 100]);

// 结束填充,并添加到交互容器中
polygon.endFill();
container.addChild(polygon);

注意:使用 Graphics 类绘制的多边形没有线条,只有填充颜色。如果需要绘制带有线条的多边形,可以先绘制一个实心多边形,再在其上面用 Graphics 类绘制线条即可。