Konvajs - relative zoom in to pointer, but non-relative zoom out

Question

I am using Konva canvas framework and I want to implement zoom in and zoom out with mouse wheel. The zoom in should be relative to my cursor pointer, but zoom out should always zoom out to the initial state.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Zoom Relative to Stage Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 50,
        fill: 'green',
      });
      layer.add(circle);

      layer.draw();

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

        var pointer = stage.getPointerPosition();

        var mousePointTo = {
          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 - mousePointTo.x * newScale,
          y: pointer.y - mousePointTo.y * newScale,
        };
        stage.position(newPos);
        stage.batchDraw();
      });
    </script>
  </body>
</html>

So, in the example you can see there is circle green in the center. When client zoom in, I want the zoom to be relative to pointer. But, when zooming out, the zoom won't be relative to pointer, but simply goes back to the initial state (green circle in the center).

@ŁukaszKarczewski Simply no. – Tester Temp Jan 19 '21 at 07:21 — Tester Temp, Jan 19 '21 at 07:21

score 0 · Answer 1 · answered Jan 19 '21 at 07:53

So I changed some things, only for demo purpose - but the concept is the same:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Zoom Relative to Stage Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var circle = new Konva.Rect({
x: stage.width()/2,
        y:stage.height()/2,
        width: 50,
        height: 50,
        fill: 'green',
      });
      layer.add(circle);

      layer.draw();

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

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

        var newScale =
          e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;
        newScale = Math.max( newScale, 1 );
        stage.scale({ x: newScale, y: newScale });

        var newPos = {
          x:
            -(mousePointTo.x - stage.getPointerPosition().x / newScale) *
            newScale,
          y:
            -(mousePointTo.y - stage.getPointerPosition().y / newScale) *
            newScale
        };
        newPos.x = Math.min( newPos.x, 0 );
        newPos.x = Math.max( newPos.x, width * ( 1 - newScale ) );
        newPos.y = Math.min( newPos.y, 0 );
        newPos.y = Math.max( newPos.y, height * ( 1 - newScale ) );
        stage.position(newPos);
        stage.batchDraw();
      });
    </script>
  </body>
</html>

Konvajs - relative zoom in to pointer, but non-relative zoom out

1 Answers1