如何使用 SvgPanZoom 平移和縮放以適合元素

Question

我正在使用 svg-pan-zoom 庫，我需要平移/縮放視圖以適合特定元素。 我可以使用 fit 方法，但它適合整個內容，在這種情況下我只需要適合一個特定元素。 另一種選擇是計算所需的平移和縮放並使用自定義控件，但如何讓元素的平移/縮放適合窗口？

更新

我試圖遵循@bumbu“更簡單”的解決方案。 這是我的第一個想法，但我遇到了縮放點位置的問題。

這是顯示預期行為和計算嘗試的小提琴。

http://jsfiddle.net/mgv5fuyw/2/

這是計算：

var bb=$("#target")[0].getBBox();
var x=bb.x+bb.width/2;
var y=bb.y+bb.height/2;

但不知何故，預期的縮放中心 (225,225) 不是正確的。

Answer 1

我在縮放之前找到了一個解決方案平移，我找不到使用 zoomAtPoint() 方法的正確方法。

http://jsfiddle.net/mgv5fuyw/3/

var bb=$("#target")[0].getBBox();
var vbb=panZoomInstance.getSizes().viewBox;
var x=vbb.width/2-bb.x-bb.width/2;
var y=vbb.height/2-bb.y-bb.height/2;
var rz=panZoomInstance.getSizes().realZoom;
var zoom=vbb.width/bb.width;
panZoomInstance.panBy({x:x*rz,y:y*rz});
panZoomInstance.zoom(zoom);

Answer 2

沒有詳細說明，我會嘗試兩種方法：

更輕松：

• 初始化 svg-pan-zoom 庫
• 適合並居中 SVG
• 計算您感興趣的元素的位置（左上角和右下角，或中心和大小）
• 現在根據視口大小，您應該能夠計算每個元素的縮放級別和中心點

更難：

• 找出原始對象相對於原始視口的相對位置
• 根據當前視口大小，您應該能夠計算每個元素的縮放級別和中心點