Konva Transformer不支持两个手指缩放，并且在移动设备中缩放非常困难

Question

我使用下面的代码来启动Transformer

const tr = new Konva.Transformer();

但是两指缩放不支持，在移动设备中很难缩放。

任何人都知道如何解决此问题吗？

Answer 1

使用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

相关演示：

• https://konvajs.org/docs/sandbox/Multi-touch_Scale_Shape.html
• https://konvajs.org/docs/sandbox/Gestures.html