3

I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom).

I am trying to pan to a specific shape at (x:1000, y:20) when the user clicks a button. I would also like the image to centre at this point.

The Problem I am facing is the point I am trying to pan and centre at goes off the screen.

I am currently using:

panZoom.pan({x:1000, y:20});

but this does not work.

Please see the jsFiddle for more info: http://jsfiddle.net/arjSharma/n6r55dp1/2/

Can anyone help with my problem?

Thanks

arjSharma
  • 181
  • 1
  • 9
  • Did you try to take into account current zoom using `getZoom` or `getSizes` API methods? – bumbu Mar 04 '15 at 16:51
  • Hi Bumbu, I'm not too sure what you mean. I am able to use this methods and get the zoom, width and height of the viewbox etc. I'm struggling using the library to centre to a particular shape. Would I need to alter the library to achieve this? Thanks – arjSharma Mar 06 '15 at 12:59
  • 1
    Panning is done top left corner of the SVG viewport (if you set `pan({x: 0, y: 0}` it means that your viewport top-left corner is in top-left corner of the SVG). If you need to pan to a specific point in viewport you have to compute where should be your top-left corner of the viewport in order to achieve this. And for that you need data from `getSizes()` such as SVG width and height (to compute its center point). Also you need zealZoom, viewbox sizes and position. Having all this data you should be able to compute your desirable pan values. – bumbu Mar 07 '15 at 06:17
  • Hi Bumbu, thanks for your reply. I am able compute the center point, and for the purpose of my application I am keeping the room level consistent. I have the viewbox sizes, but I am still struggling to understand how to pan to a specific point within the viewbox. – arjSharma Mar 31 '15 at 09:06

1 Answers1

15

I managed to answer my question: I first pan to point 0,0 using the method:

panZoom.pan({x:0,y:0});

I then get the 'real Zoom' value by:

var realZoom= panZoom.getSizes().realZoom;

To pan and centre at specific x and y, use the pan() method and pass x and y coordinates like in the example below:

panZoom.pan
({  
x: -(755*realZoom)+(panZoom.getSizes().width/2),
y: -(240*realZoom)+(panZoom.getSizes().height/2)
});

The '+(panZoom.getSizes().width/2)' and '+(panZoom.getSizes().height/2)' are responsible for adding the offset to the x and y coordinates which ensures the image is centred.

Feel free to ask any further questions regarding my answer.

arjSharma
  • 181
  • 1
  • 9
  • 1
    @arjSharma What is 750 and 240?? – Ruben Jul 08 '16 at 11:59
  • @Ruben Hi, the 755 and 240 would be the x and y values of the svg shape you would like to pan and centre to. E.g `` - Thanks for the question! – arjSharma Jul 13 '16 at 10:05
  • When trying to implement this I found that removing the realzoom value, giving `x = (panZoom.getSizes().width/2)+755` made it work when zoomed in quite far. I guess that newer versions of svg-zoom-pan take this into account? – ianbarker Mar 28 '17 at 12:38