在 Canvas (Android) 上绘制单个位图与多个位图的质量

Question

我有一组小图像。如果我在画布上单独绘制这些图像，与我在屏幕大小的大位图上绘制它们并在画布上绘制该位图的情况相比，绘制质量显着降低。特别是线条会失真。见下图（右侧）。

从下面的代码来看，画布也支持缩放（scaling）。此问题发生在小规模因素上。

问题是如何将多张小图的绘制量提高到大图的标准。

这是在画布上绘制的多个位图的代码

 canvas.scale(game.mScaleFactor, game.mScaleFactor);
 canvas.translate(game.mPosX, game.mPosY);

 for (int i = 0; i < game.clusters.size(); i++) {

                Cluster cluster = game.clusters.get(i);
                canvas.drawBitmap(cluster.Picture, cluster.left,
                            cluster.top, canvasPaint);

            }

这是单个位图的代码，game.board 是一个屏幕大小的图像，上面绘制了所有的小位图。

 canvas.scale(game.mScaleFactor, game.mScaleFactor);
 canvas.translate(game.mPosX, game.mPosY);

 canvas.drawBitmap(game.board, matrix, canvasPaint)

画笔设置了以下属性。`所有位图都是Bitmap.Config.ARGB_8888。

    canvasPaint.setAntiAlias(true);
    canvasPaint.setFilterBitmap(true);
    canvasPaint.setDither(true);`

Answer 1

我能想到一对，取决于你画拼图的边界。

您遇到的问题是，当缩放单个图像时，线条会与图像的其余部分一起过滤，并且看起来很平滑（混合正确）。当拼图逐块绘制时，过滤器会读取拼图上的相邻像素并将它们与拼图混合。

方法 1

第一种方法（很容易做到）是以游戏的逻辑大小渲染到 FBO (RTT)，然后使用全屏四边形将整个纹理缩放到画布上。这将得到与single 相同的结果，因为像素混合涉及相邻的部分。

方法 B

使用出血来解决问题。当您切割拼图时，包括相邻拼图的重叠部分。不要将丢弃的像素设置为零，只需将 alpha 设置为零。这将导致您的混合函数拾取与放置在单个图像上相同的值。此外，将边框线加倍，但将外部边框 alpha 设置为零。

接近决赛

最后一个是最复杂的，但对于任何缩放都将是平滑的 (AF)。

将拼图的 Alpha 通道转换为有符号距离场，并使用专用着色器进行渲染，该着色器可在任何距离处平滑输出。另外，SDF可以让你在渲染的时候用shader来绘制轮廓，轮廓会很平滑。

事实上，您的 SDF 可以是一个单独的纹理，您可以将其加载到第二个纹理阶段。将源图像绑定为 tex 单元 0，将 tex 单元 1 上的 sdf 拼图切口绑定，并使用 SDF 着色器确定来自 SDF 的 alpha 和来自 tex0 的颜色，然后混合根据 SDF 计算的轮廓。

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

https://github.com/Chlumsky/msdfgen

http://catlikecoding.com/sdf-toolkit/docs/texture-generator/

SDF 是从布尔映射生成的。您的拼图剪裁需要从单色剪裁开始，然后使用上面列出的工具或类似工具转换为 SDF（离线）。 Valve 和 LibGDX 有示例 SDF 着色器，以及上面列出的工具。