Как нарисовать кликабельную линию в PIXI.js, используя PIXI.Graphics?

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

Для вашего первого требования, попробуйте создать отдельные графические объекты для рисования каждой линии и установить альфа для каждой линии.Для вашего второго требования, вам нужно установить для свойства интерактивного свойства графического объекта (linksGraphics) значение true, как показано ниже,

linksGraphics.interactive = true;

, а затем присоединить функцию, которая будет выполняться при событии наведения мыши, как показано ниже,

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