react-konva dragBound a zoomable stage

2
votes

I am trying to make an application with react-konva in which an image covers the entire stage and the stage is draggable and zoomable. So I am looking for a way to bound the drag to the edges of the image.

I looked at this demo and added a dragBoundFunc in my code but using this code I am able to dragBound my stage on the top and left edges only.

Demo: https://codesandbox.io/s/tender-chatterjee-ih31j

1
reactjskonvajsreact-konva

1 Answers

3
votes

This may work:

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
};

Also, you may need to update zoom function to call bound func.

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