javascript - HTML5 混合模式 - 绘画程序中的图层

Question

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

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

我正在使用第二种方法，但我不确定它是最好的(尤其是对于更多层)。我想知道您是否知道任何其他方法，也许您会建议实现混合操作以使其像在 Gimp/Adobe Photoshop 中一样工作会更好

Answer 1

我的实现方式是拥有多个 Canvas ，每个 Canvas 都存储自己的混合模式。但它只是虚拟 Canvas (用户不可绘制)。然后是每秒 33 次的计时器(由 RequestAnimationFrame 制作)抓取所有这些 Canvas ，将它们展平并将其绘制到视口(viewport)。对于每一层，我在视口(viewport) Canvas 上执行混合模式更改。它工作完美，因为 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();
    }

不要害怕这个代码。它维护底层 Canvas ，纯 CanvasRenderingContext2D。

我将执行这样的优化:我不会重绘 canvasViewPort，直到任何虚拟 Canvas 上发生变化。

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

所以它看起来像:

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 次迭代。 super 快。