如何使用PIXI.Graphics在PIXI.js中绘制可点击的行？

Question

我有以下代码：

const linksGraphics = new PIXI.Graphics();

const update = () => {
linksGraphics.clear();
linksGraphics.alpha = 1;
if (forceLinkActive) { 
  data.links.forEach(link => {
    let { source, target } = link;
    linksGraphics.lineStyle(2, 0x000000);
    linksGraphics.moveTo(source.x, source.y);
    linksGraphics.lineTo(target.x, target.y);
  });
  linksGraphics.endFill();
}  }


app.ticker.add( () => update() );

其中data.links是边数据数组{source：number，target：number}。如果我理解正确，所有行都是PIXI.Graphics对象的一部分。但我需要的是：

1. 每一行都应该有自己的不透明度
2. 每一行都应该有鼠标悬停的事件

有什么想法修改我的代码？

谢谢。

Answer 1

对于第一个要求，尝试创建单独的图形对象以绘制每一行并为每一行设置alpha。对于您的第二个要求，您需要将graphics（linksGraphics）对象的交互属性设置为true，如下所示，

linksGraphics.interactive = true;

然后附加一个要在mouseover事件上执行的函数，如下所示，

var mouseOverAction = function () {
       //Some code
};
linksGraphics.on('mouseover', mouseOverAction);