面料JS親子對象

Question

我正在嘗試使用面料圖JS應用程序的面料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(); 
    }); 
}