滚动到图层的中心

Question

我在这个问题上有点被卡住了，我想根据图层的中心而不是鼠标指针来缩放。我想根据图层的中心而不是鼠标指针来缩放。下面是我从Konva的演示中得到的。https:/konvajs.orgdocssandboxZooming_Relative_To_Pointer.html。形成

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.comjikuzutuse2edit?html,js,output...