教程：使用快照画布实现画笔、拖尾对象效果等

2013年11月01日

教程：使用快照画布实现画笔、拖尾对象效果等

今天，我将向您展示如何使用快照来实现一些您可能在传统的基于 CPU 的计算机图形学中经常使用的技巧。

一个老派的技巧是能够直接触摸帧缓冲区上的像素，或者直接修改图像的像素。在 GPU 世界中，你不能这样做，因为在 CPU 和 GPU 之间传递内存非常昂贵。

快照的多功能性

快照来救援！

通常，您使用快照作为一次性操作来缓存单个渲染结果。它们的工作原理是将对象添加到快照的“group”属性，然后每次要将组的子对象渲染到纹理时调用“invalidate()”。这使您可以实现像这个 Mode7 演示 这样的酷炫效果。

我们最近添加了一些 新的画布功能，让您可以以新的和有趣的方式操作快照纹理。

这是一个视频，向您展示了一个渲染到快照上的拖尾画笔效果。快照下方是世界的背景图像

实现这种效果的一种方法是跟踪我们绘制的每个画笔图像，然后随着时间的推移淡化它。编写代码来实现这一点相当复杂和笨拙。

一种更容易的方法是在每次触摸事件时将画笔图像绘制到快照上。诀窍是在每次触摸之间绘制一个黑色的半透明矩形，从而使先前绘制的图像看起来逐渐消失。这是 CPU 时代的一种常见技术，但现在您可以在 GPU 上实现它了！

在 Corona 中，实现此目的的方法是使用快照的新画布功能，并结合对 Porter-Duff 混合模式的支持

顺便说一下，如果您删除每次触摸之间的黑色矩形，您还可以构建一个简单的画笔程序 (代码)。

快照画布

新的 snapshot.canvas 允许您在快照纹理上进行绘制，而无需在每次失效之间清除。为了将这些对象渲染到快照中，您需要使用 “canvas” 参数进行失效，例如 snapshot:invalidate( "canvas" )。

我们还添加了一个 snapshot.canvasMode 属性，让您可以控制在失效之间子对象会发生什么。通常，画布组会被清空，子对象会被添加到快照的主组中。这可以确保您的快照纹理不会丢失，这种情况有时会在您的应用被暂停时发生。如果您不希望保留您的编辑，您可以通过 "discard" 模式丢弃子对象。

Porter-Duff 混合模式

我们还添加了 Porter-Duff 混合模式。我们常用的普通混合模式对应于 “srcOver”，但还有很多其他模式，例如 "clear"、"xor"、"dstIn"、"src"、"dst" 等，让您可以实现很多惊人的效果。

在上面的示例中，我们可以使用普通的混合模式。但是，如果您这样做，快照的背景将变成黑色，您将无法看到快照后面的世界图像。关键是只淡化快照中已经不透明的部分。因此，在上面的示例中，我们使用 "dstIn"，它将快照纹理与黑色矩形的 alpha 值相乘。

总结

正如您所见，快照是一个功能强大且用途广泛的工具。当然，快照还有一些明显的下一步发展方向（例如，将它们用作其他对象的纹理），因此我们已将其列入我们的路线图。我认为真正令人惊奇的是，这个示例只使用了几个功能，所以我们仅仅触及了其潜力的冰山一角！