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是边缘数据的数组{源：编号，目标：编号}。如果我理解正确，则所有行都是PIXI.Graphics对象的一部分。但是我需要什么：

每行都应具有自己的不透明度
每行都应有一个鼠标悬停事件

任何想法如何修改我的代码？

谢谢。

Answer 1

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

linksGraphics.interactive = true;

，然后附加一个在鼠标悬停事件上执行的功能，如下所示，

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

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

1 个答案: