Adding zoom and panning to your react-konva stage

Apologies for the motions but I wanted to demo the zooming and panning ability

Rendering content larger than the stage size

Panning

The draggable prop allows the user to drag the stage in order to pan around it

Zooming

I’m not a massive fan of having the lastCenter and lastDist as mutable values but as they get reset at the end of the touch event there should be minimal side effects

Keeping things performant

With perfectDraw is enabled it takes a long time to process one frame, let alone 60
With perfectDraw disabled the responsiveness of panning and zooming the Stage improves massively

Summary

Technical Lead at BJSS. Interested in Automated Testing, Dev practises, Metal, Chiptune. All views my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store