interactive/clickable line

[trinoo]

Hello, Pixi.js experienced developers!

I'm flash developer and I'm here to kindly ask for your help. I'm trying to port my complex project from flash to JS using Pixi, but stacked now...

I have a problem shown on image in attachment: i am playing with a few circle points, which you can move around using drag and drop (mouse), they are connected with lines, which are dynamically redrawn as you move the points around. Everything on the stage is created using PIXI.Graphics class. So far easy. But I need to make not only blue points but also the lines mouse interactive.

Is there any trick or workaround, how to force a Line shape created using Graphics class to fire mouse events (mouseOver/Click)?

It was enough in old flash to put the Line shape into MovieClip or Sprite and then assign event to that movieClip/sprite, but here - this trick does not work at all - still no mouse events fired. Setting a rectangle hitarea for the line segment works, but is not usefull, as the position, angle and also a width of the line segments are changed dynamically at runtime.

Searching in this forum brings no answers to me, so trying it this way...

thanks. 

[ivan.popelyshev]

Line shapes cant fire events in pixi graphics, that's one of wanted features, but still nobody made PR's for it.

You have to make different objects for that and redraw graphics based on their positions. As for shapes in general, they can be only added to graphics, after that you cant change them, just clear whole graphics object and re-add them again.

As for better drag&drop I've my example: http://pixijs.github.io/examples/#/projection/basic.js , try click and move red squares.

[trinoo]

Hello Ivan, haah, ok, I'll try to implement rectangles instead of lines then. Thanks for your quick answer anyway.