Question

我正在使用svg.js和伟大的svg-pan-zoom插件（https://github.com/ariutta/svg-pan-zoom）。

现在我想要一个按钮，当我点击它时，它会在我看到的视口的当前中心点上绘制一个圆圈（所以位置是动态的，具体取决于我已经完成的平移/缩放）。 / p>

我设置了一个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将成为中心位置。

希望这有帮助。

Answer 2

svg-pan-zoom有两种API方法可以帮助您：

getSizes
getPan

您可能对getSizes最感兴趣，因为它会返回当前大小的边界框，实际缩放和视口大小以及位置。

Answer 3

我有一个类似的问题：我想在实际的缩放画布（可缩放的svg）的左上角添加一个矩形，所以我这样做是这样的：

var positionX = -1*svgPanZoom.getPan.x/svgPanZoom.getSizes.realZoom;
var positionY = -1*svgPanZoom.getPan.y/svgPanZoom.getSizes.realZoom;

希望有帮助

使用svg.js和svg-pan-zoom如何获得当前的＆＃34; viewport＆＃34;中心点？

3 个答案: