平移到特定的X和Y坐标以及中心图像svg-pan-zoom [英] Pan to specific X and Y coordinates and center image svg-pan-zoom

问题描述

我正在使用ariutta svg-pan-zoom库( https://github.com/ariutta/svg-pan-zoom ).

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

当用户单击按钮时，我试图平移为(x:1000，y:20)的特定形状.我也希望图像在这一点上居中.

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.

我当前正在使用:

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

但这不起作用.

有关更多信息，请参见jsFiddle: http://jsfiddle.net/arjSharma/n6r55dp1/2/

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

有人可以帮助解决我的问题吗?

Can anyone help with my problem?

谢谢

推荐答案

我设法回答了我的问题: 我首先使用以下方法平移至0,0:

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;

要在特定的x和y上平移和居中，请使用pan()方法并传递x和y坐标，如下例所示:

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)
}); 

'+(panZoom.getSizes().width/2)'和'+(panZoom.getSizes().height/2)'负责将偏移量添加到x和y坐标，以确保图像是居中.

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.

这篇关于平移到特定的X和Y坐标以及中心图像svg-pan-zoom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！