1

Using Kinetic JS, how would I go about zooming in on the current center of the stage when the whole stage is draggable?

With the help of a previous question answer I got it to zoom from the center. However, the problem with this is that it always scales from the original centerpoint, even when the stage is dragged elsewhere. That original centerpoint is not the current centerpoint anymore, so the stage starts moving elsewhere when you zoom in.

To demonstrate I created this JSFiddle: http://jsfiddle.net/uJeyC/2/

var group = new Kinetic.Group({
    x: width / 2,
    y: height / 2,
    width: width,
    height: height
});

group.setOffset(width / 2, height / 2);

Here is an image to demonstrate the problem:

enter image description here

I tried several things like calculating the current center point, mutliply the group by zoom factor and then calculate the new centerpoint. Use that difference from that to offset the group, but that didn't work as the offset was too big.

A similiar question to this is: Adjusting offset on a dragged Kinetic.Path element in Kinetic JS to always keep the offset center to the Stage. But the answer given is not satisfactionary because it suggests a library that zooms from the top left and only works with an outdated version of KinectJS.

Community
  • 1
  • 1
TrollGate
  • 41
  • 5

0 Answers0