在画布上绘制单个位图与多个位图的质量（Android）

Question

我有一组小图片。如果我在画布上单独绘制这些图像，与我在屏幕尺寸大的位图上绘制它们并在画布上绘制该位图的情况相比，绘制质量非常低。特别是线条变形了。见下文（右侧）。

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

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

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

 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允许您在渲染过程中使用着色器绘制轮廓，轮廓将是平滑的。

实际上，您的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着色器，以及上面列出的工具。