Zoom and Pan in KineticJS

Question

Is there a way one could zoom and pan on a canvas using KineticJS? I found this library kineticjs-viewport, but just wondering if there is any other way of achieving this because this library seems to be using so many extra libraries and am not sure which ones are absolutely necessary to get the job done.

Alternatively, I am even open to the idea of drawing a rectangle around the region of interest and zooming into that one particular area. Any ideas on how to achieve this? A JSFiddle example would be awesome!

Answer 1

These answers seems not to work with the KineticJS 5.1.0. These do not work mainly for the signature change of the scale function:

 stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});

However, the following solution seems to work with the KineticJS 5.1.0:

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