javascript - 使用 svg.js 和 svg-pan-zoom 如何获取当前 "viewport"中心点？

Question

我正在使用 svg.js 和出色的 svg-pan-zoom 插件 ( https://github.com/ariutta/svg-pan-zoom )。

现在我想要一个按钮，当我单击它时，它会在我看到的视口(viewport)的当前中心点上绘制一个圆圈(因此位置是动态的，具体取决于我所做的平移/缩放)。

我设置了 quick example here在指定位置静态绘制圆。

请注意，我有一些特定的需求:我正在显示一个具有如下缩放因子的“背景”图像:

var map = mainWindow.group();
map.addClass('seatMap');
map.image('http://upload.wikimedia.org/wikipedia/commons/b/b3/World-map-2004-cia-factbook-large-1.7m-whitespace-removed.jpg').loaded(function () {
    map.cx(viewboxW / 2);
    map.cy(viewboxH / 2);
}).scale(0.70);

那么如何获取当前的中心点呢？

Answer 1

使用下面的代码找到初始的 centerX 和 centerY 位置(缩放之前)。

var viewPort = document.getElementsByClassName("viewport")[0];
var bbox = viewPort.getBBox();
var initX = (bbox.x+bbox.width)/2,
    initY = (bbox.y+bbox.height)/2;

您可以使用下面编写的代码在缩放后计算中心点。

var pt =  draw.node.createSVGPoint();
pt.x = initX;
pt.y = initY;
pt = pt.matrixTransform(viewPort.getCTM());

pt.x 将是 centerX 位置，pt.y 将是 centerY 位置。

希望这有帮助。