Konvajs：像 Google 地图那样具有一些动量的拖动阶段

Question

像在 Google 地图上那样以某种动量拖动舞台的最佳方法是什么，在这种情况下，释放鼠标后，舞台仍会移动直到停止？

我已经有一个可拖动的舞台，但我有一些移动限制：

stage.on("dragmove", function(evt) {
  // read absolute position
  const oldAbs = xaxis.absolutePosition();

  xaxis.absolutePosition({
   x: oldAbs.x,
   y: 0
  });
});

我可以在舞台上添加某种 animation/tween 吗？

Answer 1

您需要知道节点的移动速度才能应用附加动画。

最简单的实现可以这样：

let lastPos;
let speed = {};
stage.on('dragstart', () => {
  lastPos = stage.position();
});

stage.on('dragmove', () => {
  const pos = stage.position();
  speed.x = pos.x - lastPos.x;
  speed.y = pos.y - lastPos.y;
  lastPos = pos;
})

stage.on('dragend', () => {
  stage.to({
    x: stage.x() + speed.x * 5,
    y: stage.y() + speed.y * 5
  })
})

演示：https://jsbin.com/kibidomuge/edit?html,js,output

您可能需要找到一种更好的方法来计算速度以获得更好的用户体验。例如，您可以在 Stage 容器上使用 https://hammerjs.github.io/ 库。

Konvajs：像 Google 地图那样具有一些动量的拖动阶段

Konvajs: drag stage with some momentum like Google Maps

konvajs