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

Posted 2023-03-24

【中文标题】FabricJS：始终在画布上居中对象

【英文标题】：FabricJS: Always Center Object on Canvas

【发布时间】：2013-06-20 15:31:05

【问题描述】：

是否可以在 fabricjs 画布上始终将对象居中？

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

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

问候和感谢 罗伯特

【参考方案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();

【讨论】：

图像居中后，需要调用oImg.setCoords()才能将其坐标移动到正确的位置。当你省略调用时，图像会被移动，但你需要点击它的旧位置才能与之交互。

【参考方案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();

);

【讨论】：

中心操作后不要忘记.setCoords()！