织物.js插入在未按预期工作

Question

我想用织物将两组对象作为图层.js。但是，尽管我把第二个的z指数放了下来，但它仍然在顶部。请参阅下面的代码示例。怎么了？

var canvas = new fabric.StaticCanvas('canvas');
var render_items = function() {
var rect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 25,
top: 10,
width: 50,
height: 50,
fill: 'red'
});
var layerA = new fabric.Group([rect1], {
originX: 'left',
originY: 'top'
});
canvas.insertAt(layerA, 100);
var rect2 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 30,
top: 20,
width: 50,
height: 50,
fill: 'blue'
});
var layerB = new fabric.Group([rect2], {
originX: 'left',
originY: 'top'
});
canvas.insertAt(layerB, 50);
}();

#canvas {
	border:1px solid #000000;	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

Answer 1

Fabric.JS并没有真正的z索引功能，就像你在css中看到的那样。相反，画布上的对象的工作方式类似于一个数组，其中每个对象的索引确定它在堆叠顺序中的位置。使用canvas.insertAt()可以指定特定索引以在数组中插入对象，数组的长度始终由画布中的对象数决定。

因此，在索引为 0 处插入对象将移动数组中的其他对象，以便新对象呈现在堆叠顺序的底部。

var canvas = new fabric.StaticCanvas('canvas');
var render_items = function() {
var rect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 25,
top: 10,
width: 50,
height: 50,
fill: 'red'
});
var layerA = new fabric.Group([rect1], {
originX: 'left',
originY: 'top'
});
canvas.insertAt(layerA, 0);
var rect2 = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 30,
top: 20,
width: 50,
height: 50,
fill: 'blue'
});
var layerB = new fabric.Group([rect2], {
originX: 'left',
originY: 'top'
});
canvas.insertAt(layerB, 0);
}();

#canvas {
	border:1px solid #000000;	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>