CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
puk
puk

Reputation: 16782

Zoom in on mouse position in KineticJS

Question:

How do I zoom in on the mouse position on mouse wheel scrolls?

Details:

I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.

Upvotes: 1

Views: 1781

Answers (2)

Razan Paul
Razan Paul

Reputation: 13848

When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.

JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

Upvotes: 0

SigInTheHead
SigInTheHead

Reputation: 91

Just a guess, but you are using the mouse position relative to the page not the canvas

Upvotes: 1

Related Questions