найти какой объект сверху при наложении? - PullRequest
0 голосов
/ 27 декабря 2018

У меня есть два объекта (2 объекта формы / 1 объект формы и 1 текстовый объект), которые находятся на одном и том же выравнивании на холсте.Я хотел бы знать, есть ли способ узнать, какой объект находится сверху от них.

canvas.getObjects ();это даст мне список всех объектов, которые находятся на холсте, но я хочу, какой из них находится на вершине?

1 Ответ

0 голосов
/ 30 декабря 2018

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