Fabricjs - Enlarge the canvas in the viewport (maybe?)

Question

I'm currently trying to implement the zoom function for a visual editor based on fabricjs-framework .

I looked around, but became more and more confused since I realized that the development of this function / function was a long and rocky road for the community and developers.

Because of this, many solutions seem to be out of date.

But for now, I found a fabric-viewport developed by RTSGroup on Github .

The implementation was simple, but it could only scale / manipulate objects inside (inside) the canvas. Not a canvas either. But I would also like to enlarge the canvas. (inside of the viewport)

To better understand what I'm looking for, I made a simple image explanation:

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

I have already seen some pages that use a viewfinder such as a zoom function with scroll support. But I was not sure if they belong to fabricjs-framework .

Thanks already for every hint and tipp that can lead me in the right direction.

Hi Sasha

Answer 1

you can create zoomIn and zoomOut functions using feabricjs or on objects that they are on the canvas, as well as on the canvas itself

to zoom in and zoom out on the canvas itself, you must change the height and width parameters in the zoomIn / zoomOut function, so when it changes 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 at the live violin example I made, which it scales objects and canvases IN and Out.

Live violin example: http://jsfiddle.net/tornado1979/39up3jcm/

Hope helps, good luck

Answer 2

@Theo's 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 canvas.setZoom(ZOOM_INDEX) . (only from version 1.4.13 for fabricjs)

The example I did is here