2

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?

elco45
  • 220
  • 1
  • 11
  • 2
    Did you check this demo https://konvajs.org/docs/select_and_transform/Basic_demo.html? It shows selecting by a box. – lavrton Jul 15 '20 at 12:45
  • Hi @lavrton, in that example they also had to get all the shapes in the stage when he calls **var shapes = stage.find('.rect').toArray()**. Is checking every shape in the stage the only way to check for intersections/collisions with the select box? – elco45 Jul 15 '20 at 16:24
  • You may just try to do it once on mousedown. But I don't see any issues on doing that every mousemove. Do you have perf issues? – lavrton Jul 15 '20 at 16:39
  • Not at the moment because I just have a few amounts of shapes. However, if I created a bunch more I wanted to know the best practice to tackle this problem. If I were to have a lot of shapes, wouldn't checking my entire list of shapes per mousemove greatly affect my performance? – elco45 Jul 15 '20 at 21:23
  • If you are considering a custom method to find intersections keep in mind that you could have non-rectangular shapes, and even your rectangular shapes could be rotated. Hit testing with those challenges can be an 'interesting' and high time-cost job. I believe Konvajs has some optimisation strategies that cover those points. – Vanquished Wombat Jul 16 '20 at 14:46

1 Answers1

2

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.

lavrton
  • 18,973
  • 4
  • 30
  • 63