Fabric JS父子對象

Question

我正在嘗試將Fabric JS用於座位表應用程序。 我為平面圖和每個用戶都有單獨的對象。 我可以彼此獨立地移動它們。 我希望用戶成為平面圖的父母，以便在移動平面圖對象時，所有用戶都將隨之移動。 有什么辦法可以用面料做到這一點？

Answer 1

找到了一種方法 盡管我仍然想知道結構框架是否有一種方法可以自動處理此問題，而不是為所有父子關系自己創建它。

// Create canvas
canvas = new fabric.Canvas('c');
img = document.getElementById("cur_image");

// Create parent object
background = new fabric.Image(img, {
    left: 0,
    top: 0,
    angle: 0,
    opacity: 1.0
});
canvas.add(background);

// Connect move handler that will move the children
background.on('moving', backgroundMoveHandler);

children = [];
function addItem() {
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 50,
        height: 50
    });
    canvas.add(rect);
    children.push(rect);
}

// Add some children
addItem();
addItem();

// Whenever the parent is moved, move the children as well.
function backgroundMoveHandler(options) {
    var x = options.e.movementX;
    var y = options.e.movementY;
    $.each(children, function(i, obj) {
        obj.set('left', obj.left + x);
        obj.set('top', obj.top + y);
        obj.setCoords();
    });
}