Konva js: перетащите сцену с некоторым импульсом, как Google Maps - PullRequest
Новая
       20

Konva js: перетащите сцену с некоторым импульсом, как Google Maps

1 голос
/ 31 марта 2020

Как лучше всего перетащить сцену с некоторым импульсом, как у вас на Картах Google, где после отпускания мыши сцена все еще движется, пока не остановится?

У меня уже есть перетаскиваемая сцена и У меня есть некоторые ограничения движения: 

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

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

Могу ли я добавить какую-нибудь анимацию / анимацию движения на сцене?

1 Ответ

1 голос
/ 02 апреля 2020

Вам необходимо знать скорость движения узла, чтобы применить дополнительную анимацию.

Самая простая реализация может быть такой: 

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, вывод

Возможно, вам понадобится найти лучший способ рассчитать скорость для лучшего UX. Например, вы можете использовать библиотеку https://hammerjs.github.io/ в контейнере Stage.

...