Trying to create clickable lines between nodes using Pixi has been a bit of a challenge for me. To ensure the line is clickable, I've extended it in an object that incorporates Container.
The process involves finding the angle of the line given two points (x0,y0) and (x1,y1), then drawing a straight line at (0,0), angling it correctly, and setting its transformed coordinate to (x0,y0).
This can be achieved with code similar to the following:
rot = Math.atan((y1-y0)/(x1-x0));
len = Math.hypot(x0-x1, y0-y1);
this.graphics.lineTo(len,0);
// this.transform.position.set(x0,y0);
this.hitArea = this.getBounds();
this.rotation = rot;
The Container class serves as a simple wrapper, containing a Graphics object and a mousedown event.
Initially, everything works as expected when line 4 is commented out. The line is clickable without any boundary issues. However, all lines originate from the same point until moved.
After moving the line, it appears in the correct position but stops responding to events entirely. This unexpected behavior raises questions about potential bugs or alternative methods to achieve the desired outcome.
Edit: As a newcomer on SO, here are some attempts I have made so far:
- Drawing the line at x0,y0 initially: clicking works! However, this disrupts rotation as the object's origin shifts to (0,0).
- Avoiding the use of a wrapper - events seem ineffective on lines unless wrapped.
- Simplifying by omitting rotation and drawing lines straight out - this solution functions, but inaccuracies arise in the bounding box for angled lines.