javascriptsvgsvg.jssvgpanzoom

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

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?

Solution

  • 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.