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

Posted 2023-03-25

【中文标题】Fabric.js Canvas - 使一种对象始终位于另一种对象下方

【英文标题】：Fabric.js Canvas - Make one type of object always stay below the other

【发布时间】：2021-12-05 04:58:14

【问题描述】：

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

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);
        

问题是，无论何时选择矩形，它都会出现在所有添加的三角形之上，并且只有在我单击以取消选择矩形后，三角形才会从下方出现。

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

未选中

选定的矩形位于三角形顶部

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

【问题讨论】：

您能否创建一个工作示例（例如stackblitz.com、codesandbox.io）？ （我不能保证有答案，但我会尽力弄清楚）

【参考方案1】：

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

指示对象在选择时是否应保留在当前堆栈位置。当虚假对象被置于顶部并作为选择组的一部分呈现时

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

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