Konva Transformer не поддерживает масштабирование двумя пальцами, а масштабирование очень сложно в мобильных устройствах - PullRequest
Новая
       6

Konva Transformer не поддерживает масштабирование двумя пальцами, а масштабирование очень сложно в мобильных устройствах

0 голосов
/ 08 января 2020

Я использовал приведенный ниже код для запуска Transformer 

const tr = new Konva.Transformer();

Но масштабирование двумя пальцами не поддерживается, и это очень сложное масштабирование в мобильных устройствах.

Кто-нибудь знает, как это исправить?

1 Ответ

0 голосов
/ 10 февраля 2020

С konva v4 вы должны реализовать мультитач вручную: 

const stage = new Konva.Stage({
  container: "container",
  width: window.innerWidth,
  height: window.innerHeight
});

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

const shape = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 200,
  fill: "green"
});
layer.add(shape);

const tr = new Konva.Transformer({
  node: shape
});
layer.add(tr);

function getDistance(touches) {
  const x1 = touches[0].clientX;
  const y1 = touches[0].clientY;
  const x2 = touches[1].clientX;
  const y2 = touches[1].clientY;
  return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
}

let lastDist = 0;
shape.on("touchstart", e => {
  const touches = e.evt.touches;
  if (touches.length < 2) {
    return;
  }
  lastDist = getDistance(touches);
});

// listen stage events, so we we go outside of shape we still listen to changes
stage.on("touchmove", e => {
  const touches = e.evt.touches;
  if (touches.length < 2) {
    return;
  }
  if (!lastDist) {
    return;
  }
  const newDist = getDistance(touches);
  const scaleFactor = newDist / lastDist;
  const newScale = shape.scaleX() * scaleFactor;
  shape.scaleX(newScale);
  shape.scaleY(newScale);
  lastDist = newDist;
  layer.batchDraw();
});

stage.on("touchend", () => {
  lastDist = 0;
});

layer.draw();

Демонстрация: https://codesandbox.io/s/heuristic-dirac-flvk7

Связанные демонстрации:

...