canvas - 使图像始终在 Fabric Js Canvas 的顶部，即使在上传其他图像之后

Question

在 Fabric JS 中，我制作了一个 Canvas 应用程序，它允许其他用户上传自己的图像并尝试戴上太阳眼镜。

但问题是上传的图像与太阳镜图像重叠，因此太阳镜图像不可见。

有什么方法可以让太阳镜图像始终保持在顶部(类似于 Z - Fabric JS 中的索引)

Answer 1

FabricJS 有一个覆盖图像功能——它在介绍的第 4 页中讨论过，可以在这里找到:http://fabricjs.com/fabric-intro-part-4/ .他们提供的代码示例是:

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));

文档链接:
http://fabricjs.com/docs/fabric.Canvas.html#overlayImage

根据我的个人经验，我在使叠加图像正常工作时遇到了问题......我忘记了我的问题究竟是什么。出于这个原因，我所做的是遍历 Canvas 上的对象并根据需要手动设置堆叠顺序。根据 Canvas 的大小，这当然可能会出现性能问题。

另一种手动方法是直接选择该对象，然后使用置于最前面的方法来确保它位于顶部。

要直接选择一个对象，您可以使用此代码(它确实需要一个 javascript 库 lodash，因此您还需要将其加载到页面中)。

/* Find first object in canvas that has a specific property value */
function findObjectWithPropertyValue(canvas, propertyName, propertyValue) {
        var condition = {};
        condition[propertyName] = propertyValue;
        return _(canvas.getObjects()).filter( condition ).first()
}

调用此函数设置属性(property)名称使用您希望以此为目标的对象属性。名称可能是一个不错的选择。 属性值 是 的值属性(property)名称你的目标。将返回 Fabricjs Canvas 中该层元素的对象。

注意:我将 Canvas 传递给这个函数，因为在我使用它的地方，我同时在页面上有多个 Canvas 。如果您只有一个 Canvas ，您可以稍微修改它以摆脱将其传递给函数的麻烦。

使用此功能选择对象后，您就可以简单地将其移动到前面。

canvas.bringToFront(myObject)

把它放到一个完整的例子中，假设你的太阳镜覆盖图像对象有一个 姓名 的 glass_overlay ，您的代码将如下所示:

var glassesOverlayObj = findObjectWithPropertyValue(canvas, 'name', 'glasses_overlay);
canvas.bringToFront(glassesOverlayObj);

只需在上传新图像后和渲染 Canvas 之前运行它。用户永远不会看到它们被乱序堆叠。