react-konva dragBound масштабируемая сцена

Question

Я пытаюсь создать приложение с react-konva, в котором изображение покрывает весь этап, а этап можно перетаскивать и масштабировать. Поэтому я ищу способ привязать перетаскивание к краям изображения.

Я посмотрел эту демонстрацию и добавил dragBoundFun c в свой код, но с помощью этого кода я могу перетащить свою сцену только на верхний и левый края.

Демо : https://codesandbox.io/s/tender-chatterjee-ih31j

Answer 1

Это может сработать:

const { stageWidth, stageHeight, stageScale } = this.state;

const x = Math.min(0, Math.max(pos.x, stageWidth * (1 - stageScale)));
const y = Math.min(0, Math.max(pos.y, stageHeight* (1 - stageScale)));

return {
      x, y
};

Кроме того, вам может потребоваться обновить функцию масштабирования для вызова привязанного развлечения c.

Демо: https://codesandbox.io/s/react-konva-dragbound-for-stage-ne71c?file= / src / Demo.jsx