Fabric.js Canvas - 使一种类型的对象始终位于另一种对象的下方

Question

我正在开发一个项目，其中我必须添加矩形并将三角形添加到这些矩形中。我用这个得到当前选择的矩形

const rect = canvas.getActiveObject().aCoords

然后我检查鼠标单击是否在矩形内，如果是，我添加一个三角形。

const x = event.pointer.x
const y = event.pointer.y
if (rect.tl.x + 20 < x < rect.br.x - 20 && rect.tl.y + 20 < y < rect.br.y - 20) {
            var points = regularPolygonPoints(3, 10);
            var myPoly = new fabric.Polygon(points, {
                stroke: 'red',
                left: x,
                top: y,
                strokeWidth: 2,
                strokeLineJoin: 'bevil'
            }, false);
            canvas.add(myPoly);
        }

问题是，每当选择矩形时，它就会出现在所有添加的三角形之上，只有在我单击取消选择矩形后，三角形才会从下面出现。

请参阅下面的图片以更好地理解

未选择

选定的矩形位于三角形之上

我想要的是，即使选择了矩形，它也始终保持在三角形下方。

Answer 1

http://fabricjs.com/docs/fabric.Canvas.html#preserveObjectStacking

指示对象在选择时是否应保留在当前堆栈位置。当错误对象被置于顶部并渲染为选择组的一部分时

将您的设置canvas.preserveObjectStacking为true（false默认情况下）。

它将阻止选择将对象置于前面，但请记住，这将取决于您添加对象的顺序。