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?

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

add a comment |

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?

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

add a comment |

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?

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

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?

javascript svg svg.js svgpanzoom

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

asked Feb 13 '15 at 0:58

AlfaTeK

3,965103876

add a comment |

3 Answers
3

active

oldest

votes

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.

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

add a comment |

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.

answered Feb 13 '15 at 16:23

bumbu

1,045927

add a comment |

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

answered Nov 24 '18 at 22:36

Santiago

327

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f28490814%2fusing-svg-js-and-svg-pan-zoom-how-can-i-get-current-viewport-center-point%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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.

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

add a comment |

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.

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

add a comment |

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.

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

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.

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

answered Feb 13 '15 at 6:18

Gilsha

12.5k32542

add a comment |

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.

answered Feb 13 '15 at 16:23

bumbu

1,045927

add a comment |

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.

answered Feb 13 '15 at 16:23

bumbu

1,045927

add a comment |

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.

answered Feb 13 '15 at 16:23

bumbu

1,045927

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.

answered Feb 13 '15 at 16:23

bumbu

1,045927

answered Feb 13 '15 at 16:23

bumbu

1,045927

answered Feb 13 '15 at 16:23

bumbu

1,045927

answered Feb 13 '15 at 16:23

bumbu

1,045927

add a comment |

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

answered Nov 24 '18 at 22:36

Santiago

327

add a comment |

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

answered Nov 24 '18 at 22:36

Santiago

327

add a comment |

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

answered Nov 24 '18 at 22:36

Santiago

327

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

answered Nov 24 '18 at 22:36

Santiago

327

answered Nov 24 '18 at 22:36

Santiago

327

answered Nov 24 '18 at 22:36

Santiago

327

answered Nov 24 '18 at 22:36

Santiago

327

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl