CODEWITHSUNDEEP
canvaszoomingpan
user1476079
user1476079

Reputation: 39

how to implement a single canvas zoom/pan

I have a single canvas element(filled with manually crafted pixel values, not a existing image), I want to implement a zoom/pan control on that canvas, is there any existing library for doing that ?

Thanks a lot!

Upvotes: 1

Views: 3380

Answers (1)

Strille
Strille

Reputation: 5781

You probably won't find a library that will only solve zoom and pan specifically, but if you use a general canvas library such as EaselJS or KineticJS it's easy to implement.

In this case you could have a canvas that represents the "viewport" (the canvas you add to the DOM), and another canvas representing the "drawing" (which could be larger than the viewport). Then you draw the "drawing" canvas in the viewport canvas using a scaling factor and a translation. The scaling and translation values could then be changed with mouse interactions such as mouse wheel (or pinch for touch devices) and click and drag respectively.

If you use a library you will end up writing less code and more readable code. The libraries make it easier to keep track of and manipulate "objects" in a canvas. They also simplify mouse interactions, so I definitely recommend checking them out.

Upvotes: 4

Related Questions