Search code examples
konvajskonvakonvajs-reactjs

Selecting multiple objects using the hitbox when drawing a box in konvajs


I'm currently trying to select multiple objects (specifically lines) and adding them to a Group/Transformer by drawing a box. To do this, I followed this very helpful stackoverflow question.

After implementing it, I wasn't really happy with the results because I needed to check the entire list of shapes every time I drew the box even if I didn't pass through a shape.

In an attempt to find a solution to this problem, I thought that there might be a way for a line to know it had collided with the box being drawn. However, I have not been lucky to find out something similar to what I'm trying to reproduce. Is there an example or a way for me to draw a box to select multiple objects when they collide with the box?


Solution

  • Checking every shape in the stage is the only way to check intersections.

    If you need some optimizations you can try debouncing or throttle strategies.

    E.g. check interactions every 100ms instead of every mousemove or touchmove events.