Question

我有两个对象（2个形状对象/ 1个形状对象和1个文本对象），它们在画布上对齐。我想知道有什么方法可以从中找出哪个对象在顶部。

canvas.getObjects（）; 这将为我提供画布上所有对象的列表，但我想在顶部显示哪个？

Answer 1

FabricJS没有类似于CSS z-index的显式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>

在重叠时找到哪个对象在顶部？

1 个答案: