面料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