Question about coordinate system of translateTo

[zzorba]

I'm trying to use this library to perform pans, but am having the hardest time figuring out what coordinate system the translateTo method is expecting?

As far as I can tell, it is dependent on the current scale, but I can't seem to figure out what coordinates it is expecting to make logical sense.

Would it be possible to get a more concrete example, perhaps using the following variables:

  const logicalX = 0.5; // logical X coordinate, from [0,1];
  const logicalY = 0.5; // logical Y coordinate, from [0,1];
  // scale, contentWidth, contentHeight, containerWidth, containerHeight
  ref.translateTo(???,???, true);

My goal is to get the point represented by logicalX/logicalY to be 'centered' on the screen, at the current zoom level.

If it matters, my contentWidth/contentHeight are always larger than both containerWidth/containerHeight.

[fakeheal]

Hi, @zzorba,

First of all thanks for trying out the package!

Are your containerWidth/containerHeight variables representing the size of the device's screen?

Basically, to center the content inside the container, you need to set x to be: containerWidth / 2 - contentWidth / 2 and y to be: containerHeight / 2 - contentHeight / 2. Here's the source code in the example app that shows centering the content inside its container.

I looked around the source code of your app, but I just got back from vacation and will have more time during the weekend. I will try building it and if you're still having issues, I'd more than happy to help with your specific case.

[zzorba]

Thank you, this worked as expected!