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

FabricJS: Always Center Object on Canvas

本文关键字：对象 FabricJS      更新时间：2023-09-26

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

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

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

问候和感谢Robert

或者您可以像一样将对象居中

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

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.3.6，您可以使用viewportCenterObject

fabric_canvas.setZoom(10)
fabric_canvas.viewportCenterObject(obj)
fabric_canvas.renderAll()

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

相关文章：