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?
javascript svg svg.js svgpanzoom
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
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?
javascript svg svg.js svgpanzoom
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
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?
javascript svg svg.js svgpanzoom
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
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
javascript svg svg.js svgpanzoom
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
3,965103876
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
3,965103876
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
3,965103876
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
3,965103876
asked Feb 13 '15 at 0:58
AlfaTeKAlfaTeK
3,965103876
3,965103876
add a comment |
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
GilshaGilsha
12.5k32542
add a comment |
svg-pan-zoom has 2 API methods that may help you:
getSizesgetPan
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
bumbubumbu
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
SantiagoSantiago
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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
GilshaGilsha
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
GilshaGilsha
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
GilshaGilsha
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
GilshaGilsha
12.5k32542
answered Feb 13 '15 at 6:18
GilshaGilsha
12.5k32542
answered Feb 13 '15 at 6:18
GilshaGilsha
12.5k32542
answered Feb 13 '15 at 6:18
GilshaGilsha
12.5k32542
12.5k32542
add a comment |
add a comment |
svg-pan-zoom has 2 API methods that may help you:
getSizesgetPan
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
bumbubumbu
1,045927
add a comment |
svg-pan-zoom has 2 API methods that may help you:
getSizesgetPan
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
bumbubumbu
1,045927
add a comment |
svg-pan-zoom has 2 API methods that may help you:
getSizesgetPan
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
bumbubumbu
1,045927
svg-pan-zoom has 2 API methods that may help you:
getSizesgetPan
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
bumbubumbu
1,045927
answered Feb 13 '15 at 16:23
bumbubumbu
1,045927
answered Feb 13 '15 at 16:23
bumbubumbu
1,045927
answered Feb 13 '15 at 16:23
bumbubumbu
1,045927
1,045927
add a comment |
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
SantiagoSantiago
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
SantiagoSantiago
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
SantiagoSantiago
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
SantiagoSantiago
327
answered Nov 24 '18 at 22:36
SantiagoSantiago
327
answered Nov 24 '18 at 22:36
SantiagoSantiago
327
answered Nov 24 '18 at 22:36
SantiagoSantiago
327
327
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
