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/

谁能帮我解决我的问题？

谢谢

score 13 · Accepted Answer

我设法回答了我的问题：我首先使用以下方法平移到点 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 坐标，以确保图像居中。

随时询问有关我的答案的任何其他问题。

1 回答 1