1

我正在使用 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)不是正确的。

4

2 回答 2

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);
于 2020-03-07T11:34:37.783 回答
0

在不详细介绍的情况下,我会尝试两种方法:

更轻松:

  • 初始化 svg-pan-zoom 库
  • 适合并居中 SVG
  • 计算您感兴趣的元素的位置(左上角和右下角,或中心和大小)
  • 现在根据视口大小,您应该能够计算每个元素的缩放级别和中心点

更难:

  • 找出原始对象相对于原始视口的相对位置
  • 根据当前视口大小,您应该能够计算每个元素的缩放级别和中心点
于 2020-03-07T05:56:45.267 回答