javascript - 两个 jcanvas 图层蒙版可以存在于同一个画布上吗？

Question

是否可以在同一画布上创建两个独立的图层蒙版？我试过了，没有太大的成功。我怀疑这是由于遮罩影响了图层索引。我通过在鼠标悬停时启用屏蔽​​来突出显示这一点（请参见此处）。如果将鼠标悬停在图层蒙版上，其他图层蒙版就会消失。如果您将图层mask:true作为属性绘制，则只会出现一个图层蒙版。您可能会想“为什么不为每个图层蒙版制作单独的画布？” 我不能，因为我打算使用$("canvas").getCanvasImage();将画布渲染为复合 jpeg（这对于两个画布来说会很困难）。

最终目标将是一个垂直分成两个窗格的画布。每个窗格都将填充一个可拖动的图像。用户将移动窗格中的图像以“裁剪”它，然后将结果呈现为合成图像。这个例子很接近，但拖动右窗格下的绿色框会在该窗格中创建一个死区。

谢谢你的帮助。

Answer 1

是的，现在可以使用 jCanvas。只要确保restoreCanvas()在您希望恢复掩码时调用该方法，如下所示：

$("canvas").restoreCanvas({
    layer: true
});

这是我制作的一个示例，它使用两个蒙版将画布分成两个窗格。