平移到特定的 X 和 Y 坐标并居中图像 svg-pan-zoom答案

【问题标题】：Pan to specific X and Y coordinates and center image svg-pan-zoom平移到特定的 X 和 Y 坐标并居中图像 svg-pan-zoom
【发布时间】：2015-03-04 11:15:48
【问题描述】：

我正在使用 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/

谁能帮助解决我的问题？

谢谢

【问题讨论】：

您是否尝试使用getZoom 或getSizes API 方法考虑当前缩放？
嗨，Bumbu，我不太清楚你的意思。我能够使用这种方法并获得视图框的缩放、宽度和高度等。我正在努力使用库来居中到特定的形状。我需要改变图书馆来实现这一目标吗？谢谢
平移是在 SVG 视口的左上角完成的（如果你设置 pan({x: 0, y: 0} 这意味着你的视口左上角在 SVG 的左上角）。如果您需要平移到视口中的特定点，则必须计算视口左上角的位置才能实现此目的。为此，您需要来自getSizes() 的数据，例如 SVG 宽度和高度（以计算其中心点）。您还需要 zealZoom、viewbox 大小和位置。拥有所有这些数据，您应该能够计算出您想要的平移值。
嗨，Bumbu，感谢您的回复。我能够计算中心点，并且为了我的应用程序的目的，我保持房间水平一致。我有视图框大小，但我仍然在努力理解如何平移到视图框中的特定点。

标签： svgpanzoom

【解决方案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 坐标，以确保图像是居中。

请随时就我的回答提出任何其他问题。

【讨论】：

@arjSharma 750 和 240 是什么？？
@Ruben 嗨，755 和 240 将是您想要平移和居中的 svg 形状的 x 和 y 值。例如<rect x="755" y="240" width="150" height="150" /> - 感谢您的提问！
在尝试实现这一点时，我发现删除 realzoom 值，给x = (panZoom.getSizes().width/2)+755 使它在放大很远时工作。我猜新版本的 svg-zoom-pan 会考虑到这一点？