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

Javascript FabricJS:始终在画布上居中放置对象,javascript,html,html5-canvas,fabricjs,Javascript,Html,Html5 Canvas,Fabricjs,是否可以始终将对象置于fabricjs画布的中心 背景:我正在构建一个webtool,它可以轻松地使用fabricjs创建复杂的动画。我想能够设置画布大小为100%的宽度和高度。因此,我希望将所有对象放置在中心,并向其添加X/Y偏移。稍后调整画布大小时,我可以使用x/y偏移从中心重新调整对象 有这样的内置功能吗?或者我应该简单地向对象添加一个属性,如果画布正在调整大小-检查所有对象的该属性,并从新画布的中心重新调整对象的位置 问候和感谢 Robert织物对象具有以下居中方法: obj.cente

是否可以始终将对象置于fabricjs画布的中心

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

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

问候和感谢
Robert

织物对象具有以下居中方法:

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

});

或者你可以像这样将物体居中

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

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

中心操作后不要忘记.setCoords()!将图像居中后,需要调用
oImg.setCoords()
,以便将其坐标移动到正确的位置。当您忽略调用时,图像将被移动,但您需要单击其旧位置以与之交互。