Jump to content

interactive/clickable line


Recommended Posts

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...



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...