svgpanzoom

Pan to specific X and Y coordinates and center image svg-pan-zoom

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

Solution

  • 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.