Question

是否可以将一个对象集中在fabricjs画布上？

背景：我正在构建一个webtool，可以使用fabricjs轻松创建复杂的动画。我希望能够将画布大小设置为100％的宽度和高度。因此，我想将所有对象放在中心并为其添加X / Y偏移。当我稍后调整画布大小时，我可以使用x / y偏移从中心重新调整对象。

是否有这样的功能？或者我应该简单地向对象添加属性，如果正在调整画布大小 - 检查该属性的所有对象并从新画布中心重新调整对象的位置？

问候并谢谢罗伯特

Answer 1

或者您可以像这样居中对象

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

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

Answer 2

Fabric对象具有以下用于居中的方法：

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

我没有在文档中看到任何关于偏移的内容。

以下内容可能会起作用

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();

});

FabricJS：始终在画布上居中对象

2 个答案: