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

Question

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

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

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

请注意，我有一些特殊需求：我正在展示一张 "background" 图片，其缩放比例如下：

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 位置。

希望对您有所帮助。

Answer 2

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

getSizes
getPan

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

Answer 3

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

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

希望对您有所帮助

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

Using svg.js and svg-pan-zoom how can I get current "viewport" center point?

javascript

svg

svg.js

svgpanzoom