This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @author Santiago Zapata | |
| * @description This is small gist about how to get a sticker like image to rotate over itself aswell | |
| * resizing it's dimensions as seen in Telegram. | |
| * | |
| * How does it work? | |
| * All you need is to know the angle to rotate your sticker, this achieved by getting the position of the | |
| * center of the image relative to the screen as this one will serve as the center of our calculations, | |
| * For the rings at the sides we want their position in the screen aswell, however the rings are mere | |
| * decorations to trigger the pan gesture as this one will provide us the position of your touches |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * After some thoughts on this topic, I've decided to turn this gist along with other features into a library so you can zoom | |
| * whatever you want, library you can find here https://github.com/Glazzes/react-native-zoom-toolkit. | |
| * | |
| * @author Santiago Zapata, Glazzes at Github <3 | |
| * @description This gist makes part of an article I'm writing about this topic (in spanish). This solution takes into account | |
| * the linear algebra concepts and geometrical interpretation of the transform-origin property specification, this solution | |
| * takes heavy inspiration from William's Candillon +3 year old video in this topic, however this solution brings it to the | |
| * modern day along with a huge fix that prevents the origin from being displaced by an incorrect offset calculation after | |
| * the first zoom interaction. |