Ravindu89

How to bind mouse click action on drawn line

Recommended Posts

Is there a way to bind mouse action on PIXI.Graphics line?. 

line.png.6933d0c1c53697ae3e1c64199061a73e.png

I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. 

this.strategyGraphic.interactive = true;
this.strategyGraphic.hitArea = this.strategyGraphic.getBounds();

this.strategyGraphic.click = function (data) {
     alert('hit rect');
}

Would like to hear any advice on the subject.

Thanks in advance!

Share this post


Link to post
Share on other sites

Thank you all for quick replies.

Hi PsichiX, 

I have to achieve two goals,

  1.  When clicking on a particular line,
    1. Double left click - open property window of that line (Need to pass some unique id with that action to identify that line)
    2. Single Right click - remove the added line (Need to pass some unique id with that action to identify that line)
  2. When hovering on a particular line, Value tooltip should be popped up. 

Examples how the chart looks on in that above status are shown in below.

 tooltip.png.611b500ee76a9b63a979ada9652eee6c.png

property.png.04c08a606ceb32f609051f9ad602047f.png

 

 

Share this post


Link to post
Share on other sites

ok, so the working solution (actually only reasonable solution) will be:
add listeners on lines parent, then on events for each line convert mouse coords into line local space, then based on x pos sample line data (not visuals, just source data that describe line y) and if distance between mouse y pos to sampled line y is less than some treshold, fire desired action.

Share this post


Link to post
Share on other sites

best way to do tooltips: Make a tooltip manager plugged to the mouse move/position (bunch of ways to do it) then objects that should get tooltips need to implement an Itooltip protocol/interface with at minimum 2 methods: hasTooltip, getTooltip. The manager works that way: is there a IToolTip under the mouse? yes > is object.hasTooltip() true? yes > display tooltip using object.getTooltip(). Very simple, very efficient.

Share this post


Link to post
Share on other sites

Thank you all for this lot of advice.  I have used Ivan posted method and but still down part of the line chart is sensitive to mouse action.

Attached figures are shown my implementation. (I have colored hit area polygon' outline to easy read)

polygon.thumb.png.937e8c2f98eaef1be0610f586c5e090a.png

Hit Area polygon point array

data.png.58a8c37f514ec6e4f8f2f4dd8933ea77.png  

I need only outlined polygon area is sensitive to mouse action. Please support me. 

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.