HTML5混合模式-油漆程序中的图层

Question

我正在创建html5绘画应用程序，目前正在处理混合层。我想知道在这样的程序中，哪种方法是最好的（最快的和类似gimp/photoshop的）。我的层（画布）是堆叠的。

1. 通过CSS3属性更改混合模式（可能非常快-直接在显卡上混合）
2. 具有隐藏的画布（图层）和一个画布来向用户显示平坦的图像。所以我们画在这些隐藏的画布上，有一些机制将每个隐藏的画布绘制到用户可见的画布上（可能较慢，但每个context.draw图像（...）在显卡上优化和计算）
3. 隐藏的画布（层）是真正的虚拟。根本没有隐藏的画布元素。相反，记忆中有一些模仿画布的结构。这些结构只是保存用户在此虚拟层上执行的动作。然后，当需要重新绘制时，通过从每个虚拟层中获取每个操作并绘制它（真正的油漆）来重建用户画布。操作必须正确排序是这样的虚拟层结构（这可能很慢，但可能比第二种方法更快（我们不浪费时间在层上绘制任何东西，只是存储选项我们将如何在真实层上绘制）？）
4. 通过WebGL混合（可能很快）
5. 手动计算每个像素并向用户显示分数（超慢？）

我使用第二种方法，但我不确定它是否是最好的（尤其是对于更多层）。我想知道你是否知道其他的方法，也许你会建议什么更好的方法来实现混合操作，使它像Gimp/Adobe Photoshop一样工作

Answer 1

我实现这一点的方法是有多个画布，每个画布存储自己的混合模式。但它只是虚拟画布（用户无法绘制）。然后每秒有33次计时器（由RequestAnimationFrame制作），它抓取所有这些画布，展平它们并将其绘制到视口。对于每个层，我在视口画布上执行混合模式更改。自drawImage（…）以来，它工作得非常完美在GPU上计算，速度非常快。

我认为代码是相当容易理解和应用在自己的解决方案：

   Process(lm: dl.LayerManager) {
        var canvasViewPort = lm.GetWorkspaceViewPort();
        var virtualLayers = lm.GetAllNonTemporary();

        canvasViewPort.Save();
        canvasViewPort.Clear();
        canvasViewPort.SetBlendMode(virtualLayers[0].GetBlendMode());
        canvasViewPort.ApplyBlendMode();
        canvasViewPort.DrawImage(virtualLayers[0], 0, 0, canvasViewPort.Width(), canvasViewPort.Height(), 0, 0, canvasViewPort.Width(), canvasViewPort.Height());
        for (var i = 1; i < virtualLayers.length; ++i) {
            var layer = virtualLayers[i];
            var shift = other.GetShift();
            canvasViewPort.SetBlendMode(virtualLayers[i].GetBlendMode());
            canvasViewPort.ApplyBlendMode();
            canvasViewPort.DrawImage(layer, 0, 0, layer.Width(), layer.Height(), shift.x, shift.y, layer.Width(), layer.Height());
        }
        canvasViewPort.Restore();
    }

不要害怕这个代码。它保持底层画布，纯CanvasRenderingContext2D。

我将执行这样的优化：在任何虚拟画布上发生更改之前，我不会重新绘制画布视口。

我将执行的下一个优化：获取选定的层，缓存当前层之前和之后的所有内容。

所以它看起来像：

CurrentLayer:3（可能受某些工具的影响）

[1]:L1
[2]:L2
[3]:L3
[4]:L4
[5]:L5
[6]:L6

使用适当的混合模式[1,2]绘制到临时tmp1，并将[4,5,6]绘制到tmp2。当第三层发生变化时，我只需要重新绘制tmp1[3]tmp2。所以它只是2次迭代。超快。