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/
310 stars 47 forks source link

Calling alignCenter for the second time #2

Closed motro closed 5 years ago

motro commented 5 years ago

Hi there,

First of all, thanks for the great package!

I'm trying the following:

  1. Calling alignCenter with my X and Y where I just clicked and a scale of 2 - works great.
  2. After another click, calling alignCenter again with different X and Y values but the same scale which results in a weird positioning of the center.

What would be the correct way to align the center again to a different point using the same scale?

retyui commented 5 years ago

@motro Can you create a demo on codesandbox to see your problem

motro commented 5 years ago

I will, but if it makes any sense the problem is when I use the alignCenter method after I've zoomed in.

motro commented 5 years ago

@retyui see a demo here: https://codesandbox.io/embed/ryfcx what I'm trying to do is to zoom to the point where I clicked, looks like something is lost in translation between the different coordinates systems (SVG/DOM).

motro commented 5 years ago

I had solved it :) all I needed was to set the viewBox of the SVG to the viewport size instead of the image size.