svgpanzoom - 平移到特定的X和Y坐标以及中心图像svg-pan-zoom

Question

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

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

我面临的问题是我试图平移和居中的点不在屏幕上。

我目前正在使用:

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

但这不起作用。

请参阅jsFiddle了解更多信息: http://jsfiddle.net/arjSharma/n6r55dp1/2/

任何人都可以帮助解决我的问题吗？

谢谢

Answer 1

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

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

然后，我通过以下方式获得“实际缩放”值:

var realZoom= panZoom.getSizes().realZoom;

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

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坐标，以确保图像居中。

随时提出关于我的答案的任何其他问题。