使用svg.js和svg-pan-zoom如何获取当前的“视口”中心点？

Question

I'm using svg.js and the great svg-pan-zoom plugin ( https://github.com/ariutta/svg-pan-zoom ).

Now I want to have a button that when I click on it it draws a circle on the current center point of the viewport am I seeing (so the position is dynamic depending on the pan/zoom I've done).

I setup a quick example here that draws the circle statically on a specified position.

Please note I have some specific needs: I'm showing a "background" image with a scaling factor like this:

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

So how can I get the current center point?

Answer 1

Find the initial centerX and centerY positions(Before zoom) using the code below.

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

You can calculate the center point, after zoom using the code written below.

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

pt.x will be the centerX and pt.y will be the centerY positions.

Hope this helps.

Answer 2

svg-pan-zoom has 2 API methods that may help you:

• getSizes
• getPan

You may be mostly interested in getSizes as it will return current size of bounding box, real zoom and viewport sizes and positinos.

Answer 3

I had a similar problem: I wanted to add a rect on the top-left corner of the actual zoomed canvas (the zoomable svg), so I made it this way:

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

Hope it helps