我得到了以下代码:
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是一个edge数据数组{source:数量,目标:number}。如果我理解正确的话,所有行都是PIXI.Graphics对象的一部分。但我需要的是:
1.每一行都应该有自己的不透明度
1.每一行都应该有一个鼠标经过的事件
如何修改我的代码?
谢谢.
3条答案
按热度按时间2vuwiymt1#
已经有一段时间了,但我可以给你一个建议。行不会对pixijs中的鼠标/指针事件做出React。
相反,你可能想用alpha值0伴随一个转换的矩形,并用这个矩形监听鼠标/指针。
例如,当鼠标/指针悬停在相应的矩形上时,可以更改线条的alpha值。
To the PEN, Hover a line in pixijs
例如,我们可以将此逻辑扩展到矩形。但是这次你需要两个伴随的矩形(alpha=0),其中一个比未填充的矩形宽,另一个比未填充的矩形窄。比如说,
To the PEN, Hover a rectangle in pixijs
l7wslrjt2#
您可以在图形上定义hitArea。使用getBounds()可以使一行可单击。完成此操作后,您还可以将pointerEvents分配给图形。
kwvwclae3#
对于第一个要求,尝试为绘制每一条线创建单独的图形对象,并为每条线设置alpha。对于您的第二个要求,您需要将图形(linksGraphics)对象的交互式属性设置为true,如下所示,
然后像下面这样附加一个要在mouseover事件上执行的函数,