Drag and zoom with canvas kineticjs

Question

I've made a draggable stage with kineticjs and also made a zoom function by means of scaling the canvas.

When using the zoom factor, the canvas is zooming to the center of the screen. But after dragging the canvas and using the zoom function, the canvas is still zooming to the point that was on the center at the beginning but now is dragged aside.

What I want is to zoom to the new point that is on the center of the screen after dragging.

Can anyone please explain how to handle this?

Thanks in advance!

score 2 · Accepted Answer · edited May 23 '17 at 12:20

You need to set the offset to a fixed point (the centre of the screen) so that the canvas knows where to zoom. If not, it will always zoom towards that original point.

var stage = new Kinetic.Stage({
  container: 'container',
  width: 400,
  height: 300,
  offset: [200, 150] //Zoom towards Point (200,150)
};

Also, see answers here Scaling to a fixed point in KineticJS by juan.facorro and Eric Rowell (KineticJS Developer) for more information.

Drag and zoom with canvas kineticjs

1 Answers1