'FabricJS: Always Center Object on Canvas

is it possible to ALWAYS center an object on a fabricjs canvas?

Background: I am building a webtool that makes it easy to create complex animations using fabricjs. I want to be able to set the canvas size to 100% for both width and height. Thus I want to place all my objects at the center and add an X/Y offset to it. When I resize the canvas later on I can readjust the objects from center using the x/y offset.

Is there such a build in function? Or should I simply add a property to the object and if the canvas is being resized - check all objects for that property and readjust the object's position from the new canvas' center?

Regards and Thanks Robert

javascripthtmlhtml5-canvasfabricjs


Solution 1:[1]

Fabric objects have the following methods for centering:

obj.center();  // Centers object vertically and horizontally on canvas to which is was added last
obj.centerV(); // Centers object vertically on canvas to which it was added last
obj.centerH(); // Centers object horizontally on canvas to which it was added last

I don't see anything about offset in the docs.

Something like the following would probably work

var canvas = new fabric.Canvas('c');

$(window).resize(function(){

     var w = $(window).width();
     var h = $(window).height();
     var center = {x:w / 2, y:h / 2);

     canvas.setDimensions({width:w,height:h});
     canvas.forEachObject(function(obj){

        obj.set({
            left : center.x + obj.offsetLeft,
            top : center.y + + obj.offsetTop,
        });

        obj.setCoords();

    });

// need to call calcOffset whenever the canvas resizes
canvas.calcOffset();
canvas.renderAll();

});

Solution 2:[2]

Or you can center the object like so

    // add the image object 
    Canvas.add(oImg)
    // set the object to be centered to the Canvas
    Canvas.centerObject(oImg);

    Canvas.setActiveObject(oImg);
    Canvas.renderAll();

Solution 3:[3]

Since fabricjs 2.3.6 you can use viewportCenterObject

fabric_canvas.setZoom(10)

fabric_canvas.viewportCenterObject(obj)
fabric_canvas.renderAll()

https://github.com/fabricjs/fabric.js/pull/2021

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cyberpantz
Solution 2 Darryl Hebbes
Solution 3

Related Questions