FabricJS не имеет явного свойства z-index, похожего на CSS z-index
.Способ рендеринга вещей: получить массив видимых объектов и нарисовать их один за другим, начиная с первого.Первый объект оказывается под всеми остальными, а последний - сверху.
Однако следует помнить, что при canvas.preserveObjectStacking
установлено значение false
(также false
по умолчанию),активные объекты всегда отображаются сверху, независимо от их положения в массиве.
Если вам не нужны активные объекты, вы можете просто сравнить индексы объектов:
const canvas = new fabric.Canvas('c')
const rectR = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
})
const rectG = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'green'
})
canvas.add(rectR, rectG)
console.log('red rect index:', canvas.getObjects().indexOf(rectR))
console.log('green rect index:', canvas.getObjects().indexOf(rectG))
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>