fabricjs - Zoom canvas in viewport (possible?)

Question

at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework.

I've looked around but got more and more confused as I recognized that the development of this feature/function was a long and rocky road for the community and developers.

Because of that, many solutions seems to be already outdated.

But at the moment I found fabric-viewport developed by the RTSGroup on Github.

The implementation was easy, but it only can zoom/control the objects in (inner of) the canvas. Not the canvas too. But I would like to zoom the canvas, too. (inner of the viewport)

For better understanding what I'm looking for I made a simple explanation-image:

Is there a way to do this with the fabricjs-viewport plugin or another not outdated solution?

I saw already some pages who using such viewport like zoom feature with scroll support, too. But there I wasn't sure if they belong to the fabricjs-framework.

Thanks already for every hint and tipp which could lead me to the right direction.

Greetings, Sascha

Answer 1

you can create zoomIn & zoomOut functionality with the feabricjs either on the objects that they are on the canvas and ,also, on the canvas itself

in order to zoomIn and zoomOut the canvas itself , you should change its height and width parametes, into the zoomIn/zoomOut functions, so when it goes to change the objects, it will also change the canvas size:

for zoomIn:

   canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
   canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

for zoomOut:

canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

please take a look on the live fiddle example that i made , which it zoomsIn and Out objects and canvas, the .

live fiddle example: http://jsfiddle.net/tornado1979/39up3jcm/

hope helps, good luck

Answer 2

@Theo solution is great, but one thing: Instead of using object.scaleX and object.scaleY to scale each object in the canvas, you can just call once to canvas.setZoom(ZOOM_INDEX). (only from version 1.4.13 of fabricjs)

An example I made is Here