面料js：對象分組無法正常工作

Question

我遇到了在畫布上分組多個對象的問題。當我使用按住Shift鍵選擇對象，然後如果我創建了一組這些對象，則新添加的組的z-index項目不正確。請運行下面的代碼段來理解問題。 請先選擇綠色方框，然後按住Shift鍵的同時選擇藍色，然後選擇紅色。然後點擊組按鈕查看問題。

canvas = new fabric.Canvas('canvas', { 
 
    isDrawingMode: false, 
 
    preserveObjectStacking: true 
 
}); 
 

 
    
 

 
fabric.Object.prototype.objectCaching = true; 
 
canvas.setWidth(380); 
 
canvas.setHeight(310); 
 
canvas.setBackgroundColor('#F2F2F2'); 
 
canvas.renderAll(); 
 

 

 
var topMost = new fabric.Rect({ 
 
    left: 90, 
 
    top: 90, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'green', 
 
}); 
 

 
var middle = new fabric.Rect({ 
 
    left: 70, 
 
    top: 70, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'blue', 
 
}); 
 

 
var bottom = new fabric.Rect({ 
 
    left: 50, 
 
    top: 50, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'red', 
 
}); 
 

 
canvas.add(bottom); 
 
canvas.add(middle); 
 
canvas.add(topMost); 
 

 

 
$(".group").on('click', function() { 
 
    var activegroup = canvas.getActiveGroup(); 
 
    var objectsInGroup = activegroup.getObjects(); 
 

 
    activegroup.clone(function (newgroup) { 
 
     canvas.discardActiveGroup(); 
 
     objectsInGroup.forEach(function (object) { 
 
     canvas.remove(object); 
 
     }); 
 
     canvas.add(newgroup); 
 
    }); 
 
});

h3{color: blue;}h5{color: red;}canvas{border: 2px solid black;} 
 
button{padding: 8px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 

 
<h3>Please select green box first, then select blue and then red while the shift key is pressed. Then clik on Group button to see the problem</h3> 
 
<h5>Problem: Grouping multiple objects, selected using shift key down, changes their z-index after grouped</h5> 
 
<button class="group">Group</button> 
 
<canvas id="canvas"></canvas>

Answer 1

布從來沒有自動保存在組對象的順序。我看到你正在使用preserveObjectStacking = true，我想這可能會導致你的困惑。此屬性不會影響對象的實際順序以「保留」它們在畫布上的方式。相反，它會改變對象在選中時的顯示順序，以及單擊這些對象時的點擊目標查找。

活動選擇中的對象按照點擊的順序添加，並使用preserveObjectStacking添加，它們按照畫布順序呈現。無論如何，前兩個對象都按堆棧順序排列。

在特定情況下，你點擊

1. 綠 - >的activeObject
2. 藍 - >藍是綠下讓您得到activeGroup藍色，綠色。
3. 紅色 - >紅色在對象數組結束時被推入活動組中。

克隆時得到的訂單完全是藍色，綠色，紅色。

要保留對象在畫布上的順序，可以輕鬆地編寫一個排序函數並在克隆它之前針對您的組對象運行它。

var sorter = function (a, b) { 
    var idxA = canvas._objects.indexOf(a), 
     idxB = canvas._objects.indexOf(b); 
    return idxA > idxB ? 1 : 0; 
}; 

var activegroup = canvas.getActiveGroup(); 
activegroup._objects.sort(sorter); 
var objectsInGroup = activegroup.getObjects(); //these are now in the canvas's order 
//.....continue with your original code