Konvajs 滚动到图层的中心

Question

我有点卡在这个问题上。我想根据图层的中心而不是鼠标指针进行缩放。 这是我从https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html 得到的 Konva 演示 表格

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();
    });

我也想有办法让它回到原来的位置。

Answer 1

您只需要通过认为“鼠标指针”位于画布的中心来更新该示例。可以是这样的：

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