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/
308 stars 46 forks source link

Bug Report: alignCenter not working the same way on different container size #58

Closed Blindman139 closed 11 months ago

Blindman139 commented 1 year ago

Thanks for such a good library!!! I completely solved my problem until I faced this...

It seems that alignCenter method doesn't work the same way with all different sizes of container div. Suppose you have an image with size = 5000 x 5000, container div with size = 1000 x 1000 Now if I call alignCenter({x: 2000, y: 2000, scale: 5}) it should center image so that container div's center snaps on image's (2000, 2000) point in px. Now if I change container div size to 900 x 400, still result should be the same. But it isn't !!!

To reproduce the issue try changing container div's size by using developer mode and Dimension: Responsive for google chrome browser. No need to set container size and image size as above. Those are just numbers. Key is to change container !!!

retyui commented 1 year ago

@Blindman139 could you please create a demo ? https://codesandbox.io/s/new

Blindman139 commented 1 year ago

@retyui Find demo below https://codesandbox.io/s/react-quick-pinch-zoom-problem-3omjtb?file=/src/App.js Zooming will initiate after 2 sec so we can see effects, I have implemented same setup and css that I am using. I try changing container size using developer tools of google chrome.

Blindman139 commented 1 year ago

Hi, It seems to be issue due to _initialZoomFactor. Need to adjust target co-ordinates before scaling. Is PR allowed?

retyui commented 1 year ago

Is PR allowed?

yes, your welcome

Blindman139 commented 12 months ago

Hi @retyui,

Please visit PR - https://github.com/retyui/react-quick-pinch-zoom/pull/82 for improved demo and explanation.

retyui commented 11 months ago

good job! thanks you