Konvajs scroll to the center of layer

Question

I'm a little stuck on this problem. I would like to scale based on the center of the layer rather than a mouse pointer. Heres the Konva demo I got this from https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html form

state.stage.on('wheel', (e) => {
      e.evt.preventDefault();
      var oldScale = state.layer.scaleX();

      var pointer = state.layer.getPointerPosition();

      var mousePointTo = {
        x: 0,
        y: 0
      };

      var newScale =
        e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

      stage.scale({ x: newScale, y: newScale });

      var newPos = {
        x:  newScale,
        y:  newScale,
      };
      state.layer.position(newPos);
      state.layer.batchDraw();
    });

Also I want to have a way to have it go back to its original position.

score 1 · Accepted Answer · answered May 18 '20 at 17:33

1

You just need to update that example by thinking that "mouse pointer" is at the center of the canvas. It can be something like this:

var scaleBy = 1.01;
stage.on('wheel', (e) => {
  e.evt.preventDefault();
  var oldScale = stage.scaleX();

  var pointer = {
    x: stage.width() / 2,
    y: stage.height() / 2
  };

  var origin = {
    x: (pointer.x - stage.x()) / oldScale,
    y: (pointer.y - stage.y()) / oldScale,
  };

  var newScale =
      e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;

  stage.scale({ x: newScale, y: newScale });

  var newPos = {
    x: pointer.x - origin.x * newScale,
    y: pointer.y - origin.y * newScale,
  };
  stage.position(newPos);
  stage.batchDraw();
});

https://jsbin.com/jikuzutuse/2/edit?html,js,output

answered May 18 '20 at 17:33

lavrton

18,973
4
30
63

this is good. How do I scale it back up to its original size though? For example, I've zoomed out/in a lot and would like the sage and all its elements to go back to its original size. – codernoob8 May 18 '20 at 19:06
use `var newScale = 1`; – lavrton May 19 '20 at 12:49
that did not do what I expect. state.stage.scale(1, 1); state.stage.position(1, 1); state.stage.batchDraw(); it just went to the uper left hand corner but did not go back to how it looked before zooming can you send me a fiddle – codernoob8 May 19 '20 at 14:39
Demo? Also, it should be `stage.scale({x: 1, y: 1})`; – lavrton May 19 '20 at 16:34
that did it! Thanks @lavrton. – codernoob8 May 21 '20 at 16:51

Konvajs scroll to the center of layer

1 Answers1