FabricJS: Всегда центр объекта на холсте

Question

Можно ли ВСЕГДА центрировать объект на холсте fabricjs?

Фон: Я создаю webtool, который позволяет легко создавать сложные анимации с использованием fabricjs. Я хочу установить размер холста на 100% как по ширине, так и по высоте. Таким образом, я хочу разместить все объекты в центре и добавить к нему смещение X/Y. Когда я изменю размер холста позже, я могу перенастроить объекты из центра, используя смещение x/y.

Есть ли такая встроенная функция? Или я должен просто добавить свойство к объекту, и если размер холста будет изменен - ​​проверьте все объекты для этого свойства и отрегулируйте позицию объекта из нового центра холста?

С уважением и спасибо Роберт

Answer 1

тканевые объекты имеют следующие методы центровки:

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

}); 

Answer 2

Или вы можете отцентрировать объект как так

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

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