search

retyui / react-quick-pinch-zoom

A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
https://react-quick-pinch-zoom.netlify.app/
312 stars 47 forks source link

Quickest way to zoom into element? #87

Closed cerahmed closed 6 months ago

cerahmed commented 6 months ago

Hi there,

Thanks for sharing and maintaining this awesome lib! Been using it for a while now, and it works perfectly.

One thing I'd like to know how to do is zoom into a child element. I know I can use scaleTo and alignCenter to achieve this, but having difficulty calculating the required numbers for the child divs.

Any help would be appreciated.

retyui commented 6 months ago

scaleTo ought to take care of all your needs; if not, open a question on StackOverflow rather than opening an issue

cerahmed commented 6 months ago

@retyui thanks for that.

~~Been expirementing with scaleTo with no luck getting the child div ceneterd on the zoom container. My logic in calculating the center (x, y) that I passed to the scaleTo method was calculating the child's offsetWidth, offsetHeight, offsetLeft and offsetTop, with x = Left + (offsetWidth / 2) and y = Top + (offsetHeight / 2).~~

However scaleTo couldn't seem to center the container on the child div for some reason.

As I'm writing, figured that I should use alignCenter instead of scaleTo, closing the comment and strikingthrough the methodology in case someone finds it useful.

P.S. appreciate opening the Discussion seciton in the repo, as it help share implementation ideas instead of opening issues, or seeking help on Stackoverflow which rarely gets answered. Thanks again for this great component!