1

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

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

我在这里设置了一个快速示例，在指定位置静态绘制圆。

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

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);

那么我怎样才能得到当前的中心点呢？

4

3 回答 3

3

使用下面的代码找到初始 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将是 centerXpt.y并将是 centerY 位置。

希望这可以帮助。

于 2015-02-13T06:18:55.477 回答
1

svg-pan-zoom 有 2 个 API 方法可以帮助你：

  • getSizes
  • getPan

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

于 2015-02-13T16:23:38.960 回答
1

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

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

希望能帮助到你

于 2018-11-24T22:36:09.447 回答