Touch Handling on each path/group inside a canvas ?

[BubbleTrouble14]

What would be the best approach to handle touch events on specific paths of a canvas ? As at the moment only the full canvas listens for touch events. Would I have to use the canvas touch handler to get the x and y postion and loop through all the path bounds to get the one which it is inside ? For example a simple barchart where each bar can be clickable to receive its value or even animate it ?

[gverri]

I'm also looking into this. As I understand it is impossible right now. The only react native component is Canvas and it's the only one that has a touch hook. Would love to know if this feature is already on the roadmap. It would make RNS 2x more powerful.

[BubbleTrouble14]

Yea totally. Atm the only working solution I have is using a simple useState hook with the Touch Handler from the canvas and just loop through all the shapes. And if the the x and y postion is inside the bounds of one of the shapes update the state hook.

[chrfalch]

The drawing primitives inside the canvas are not components as we're used to in React - they are just wrappers ending up as drawing instructions resulting in Skia rendering rectangles, circles, paths etc on screen.

We've done something similar to what @BubbleTrouble14 did, enumerating our elements and checking if the current touch point is inside the element's drawing area.

We hope we'll be able to provide a good solution for this in the future that will make it easier to add touch handling to specific areas in the Canvas that you can declaratively set up.

[BubbleTrouble14]

Okay thanks for the reply. I'll just keep my current solution then.

[chrfalch]

Should we close this one, @wcandillon? Ref discussion we had?

[AlirezaHadjar]

Are there any updates? 🙂
I'm implementing multiple draggable backdropBlurs which require a single Image. and I want to attach the touch handler only to itself, not the whole parent. The result will be like Instagram tags.

[clemensmol]

Would be awesome to have touch support per "layer" (path, image, etc). Or alternatively an elementFromPoint kinda function returning the topmost [Element] at x,y.

[chrfalch]

Referring to the comment I made about above - the primitives aren't real components, just an abstract representation of a part of the drawing and hence does not contain any common information about position etc.. I think the best solution would be to create your own such functions depending on the specific use case you have :)

[KrisLau]

would be interested in this as well!

[aleksey-mukho]

+1

[chrfalch]

Maybe this one helps?

[KrisLau]

@chrfalch Are there any plans to include that as a part as a part of react-native-skia or to implement something similar? I would be worried about adding a library that isn't popular/have a community around it because of the worry that maintenance would be dropped and the incompatibility between versions. It seems like it would be a great addition to skia

EDIT: Just saw #517 but it's closed I couldn't seem to find a successor PR

[chrfalch]

As we've explained before, this is a hard topic that we've decided is out of scope for what we want to do (see previous comment here).

The main reasons being:
Elements in a Skia drawing are NOT separate component receiving mouse or touch input - the Canvas is the component that handles input.

Creating a generic function for returning the bounds of Skia elements are hard, since elements can be translated, clipped and rendered in such a way that we can't calculate where its actual positions are with accurate results..

Our recommendation
Please analyse your specific use case and use the useTouchHandler hook to implement your own logic - you are to one that knows your requirements in each of these different areas - so you are the best one to implement a system for implementing a detector for the bounds for your drawing elements.

References
You can look at the project referenced above https://github.com/enzomanuelmangano/react-native-skia-gesture to learn how this can be done for individual drawing elements and either use this library or adapt the code to your use.