Question

在Fabric JS中，我制作了一个画布应用程序，允许其他用户上传自己的图像并尝试使用Sun Glasses Glasses。

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

有没有办法让太阳玻璃图像始终位于顶部（如Z-Index in 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

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

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

要直接选择对象，您可以使用此代码（它需要一个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()
}

使用您要定位此项目的对象属性调用此函数设置 propertyName 。名字可能是个不错的选择。 propertyValue 是您要定位的 propertyName 的值。

将返回Fabricjs画布中该图层元素的对象

注意：我将画布传递给了这个函数，因为在我使用它的地方，我一次在页面上有多个画布。如果你只有一个画布，你可以稍微修改一下，以免将其传递给函数。

使用此功能选择对象后，您就可以将其移至前面。

canvas.bringToFront(myObject)

要将此作为完整示例，假设您的太阳镜叠加图像对象具有 glasses_overlay 的名称，您的代码将如下所示：

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

只需在上传新图像并在渲染画布之前运行此图像。用户永远不会看到它们堆叠在一起。

即使在上传其他图像

1 个答案: