Question

我遇到在画布上分组多个对象的问题。当我使用按住shift键选择对象然后如果我创建一组这些对象时，新添加的组具有不正确的z-index它的项目。请快速运行下面的片段以了解问题。请先选择绿色框，然后在按下shift键时选择蓝色然后选择红色。然后单击“组”按钮以查看问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Fabric从未自动保留组中的对象顺序。我看到你正在使用preserveObjectStacking = true，我认为这可能会引起你的困惑。此属性不会影响对象的实际顺序，以“保留”它们在画布上的方式。相反，它会更改对象在选中时的显示顺序，以及单击这些对象时的单击目标查找。

活动选择中的对象按照单击顺序添加，并使用preserveObjectStacking添加，它们以画布顺序呈现。无论如何，前两个对象按堆栈顺序排序。

在您的具体情况下，请单击

绿色 - ＆gt; activeObject
蓝色 - ＆gt;蓝色是绿色，所以你得到蓝色，绿色的activeGroup。
红色 - ＆gt;在对象数组的末尾，红色被推入活动组。

克隆时获得的顺序是蓝色，绿色，红色。

要保留对象在画布上的顺序，您可以轻松编写一个排序函数，并在克隆它之前针对您的组对象运行它。

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

fabric js：对象分组无法正常工作

1 个答案: