Kinetic js how to scale layer in a stage?

Question

I want to add zoom feature my app . I use Kinetic js and somewhere I found solutions for this feature but I can't apply these solution for some reason . I tried to adapt the solutions but unsuccesful . I have many Kinetic.Layer , some of them will scale when zooming apply. my challenge is that : zoom will happen on mouse position . solution that I found gives me : layer.setPosition() after scaling . As I mentioned before , I must not use "layer.setPosition" I will do this as using stage.setPosition() but I couldn't calculate new x and y of position 100% accurately. Could anyone suggest me any solution way ?

Answer 1

What you really want to do when zooming is to set the scale.

You can set the scale for any layer, node, or the entire stage. Just do:

   layer1.setScale(2,2); // this doubles the layer size from the original

This doesn't affect any other layer, so your overlay will stay in place.

In addition, you should also do:

   layer1.setPosition(x,y); // this will move the layer to the fixed point you want.

All together you could do:

   function zoom(){
       var position = stage.getUserPosition();
       layer1.setScale(2,2);
       layer1.setPosition(position.x - layer2.getX(), position.y - layer2.getY()); //move the layer by an offset based on the second layer. This isn't exactly correct so it's something you have to experiment with.
   }

Answer 2

Check out this: http://jsfiddle.net/TFU7Z/1/ Maybe is what you are looking for, I did not quite understand the question.

        var zoom = function(e) {
          var zoomAmount = 1;
          layer.setScale(layer.getScale().x+zoomAmount)
          layer.draw();
        }

        document.addEventListener("click", zoom, false)

Just click anywhere to zoom. You can attach the "click" event listener to whatever part of the stage / document you want.

Answer 3

These answers seems not to work awith 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/