search

Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.97k stars 450 forks source link

Adding zooming capabilities to Skia #2587

Closed sakarzac000 closed 2 months ago

sakarzac000 commented 2 months ago

Description

I've looked around pretty heavily for a zooming capability, and I've found the video @wcandillon posted on YouTube (great video btw) which included some zooming gestures. It's kind of a pain we have to use gestureHandlers and our own hooks to handle zoom information ourselves like a LT position and a Scale.

Here's the video for those who haven't seen it: https://www.youtube.com/watch?v=5yM4NPcTwY4

I'm wondering if there's a possibility we can add this capability inside of the library instead and expose a few props to enable such a feature? That way if we're interacting with gestures inside the Canvas while it's zoomed, Skia can do the calculations automatically to resize said gestures to the x and y positions as if the Canvas wasn't zoomed. If you need an example let me know and I can include one. I'm not super skilled in cpp so I wish I could try and clone and implement this myself. Could we maybe discuss a timeline/sponsorship for this request?

Thank you!

sakarzac000 commented 2 months ago

As additional information, here's something I tried and maybe it would be easier to support another library's zooming capabilities instead of creating our own:

https://www.npmjs.com/package/@openspacelabs/react-native-zoomable-view#basic-usage

This is something I tried to use and wrap the canvas in, but nothing was showing up inside the canvas and I could imagine gestures inside would break as well. I didn't get to test it. It's worth mentioning I'm using the New Architecture, as the project I'm using this for will be released in beginning of Q4 in 2025.

wcandillon commented 2 months ago

@sakarzac000 as you are working on this, you will get more and more familiar with the current paradigm and I have no doubt you will build something very elegant.

Build you gestures without Skia, make sure everything works and "simply" draw whatever you need to draw being the gesture handlers. This is the mindset we used when making the video you are referencing. Another video showing an advanced gesture would be https://www.youtube.com/watch?v=PzKWpwmmRqM

We are making changes to the core of Skia that will allow things like gesture handler to have deeper integration with Skia but this is month away.

I am closing this issue as there is no clear action item for us here. But please stay in touch and feel free to ask any questions.

sakarzac000 commented 2 months ago

@wcandillon Thank you for the very quick response. I'm excited to see the major changes in this project, is there somewhere I can subscribe to see when the new version will be out? I noticed the onTouch handler is being deprecated and removed. I'll just have to get used to the gesture handler more as I've always just passed anonymous functions or handlers. Research is afoot.

Thank you!

wcandillon commented 2 months ago

This seems to fit. Gesture Handler is really great, build something great with it. Gesture Handler will add all the info into Reanimated values. Then use these values to make your drawing (we have deep integration with Reanimated). Happy Hacking!