Skia深入分析3——skia图片绘制的实现(1)

此篇讲Skia绘制图片的流程，在下一篇讲图像采样原理、混合和抖动技术
1、API用法
（1）drawBitmap
void drawBitmap(const SkBitmap& bitmap, SkScalar left, SkScalar top, const SkPaint* paint = NULL);
将bitmap画到x,y的位置（这本身是一个平移，需要和SkCanvas中的矩阵状态叠加）。
（2）drawBitmapRect 和 drawBitmapRectToRect
void drawBitmapRect(const SkBitmap& bitmap, const SkRect& dst, const SkPaint* paint = NULL);
void drawBitmapRectToRect(const SkBitmap& bitmap, const SkRect* src, const SkRect& dst, const SkPaint* paint, DrawBitmapRectFlags flags);
将源图src矩阵部分，画到目标dst区域去。
最后一个flags是AndroidL上为了gpu绘制效果而加上去的，在CPU绘制中不需要关注。
（3）drawSprite
void drawSprite(const SkBitmap& bitmap, int x, int y, const SkPaint* paint);
无视SkCanvas的矩阵状态，将bitmap平移到x,y的位置。
（4）drawBitmapMatrix
void drawBitmapMatrix(const SkBitmap& bitmap, const SkMatrix& matrix, const SkPaint* paint);
绘制的bitmap带有matrix的矩形变换，需要和SkCanvas的矩形变换叠加。
（5）drawRect
void drawRect(const SkRect& r, const SkPaint& paint);
这个是最通用的方法，多用于需要加入额外效果的场景，比如需要绘制重复纹理。关于Tile的两个参数就是OpenGL纹理贴图中水平垂直方向上的边界处理模式。
由这种用法，大家不难类推到非矩形图像绘制的方法，比如画圆角矩形图标、把方图片裁剪成一个圆等。
下面是一个Demo程序

<span style="font-size:14px;">#include "SkBitmapProcShader.h"
#include "SkCanvas.h"
#include "SkBitmap.h"
#include "SkImageDecoder.h"
#include "SkImageEncoder.h"
#include "SkRect.h"
int main()
{
    const int w = 1080;
    const int h = 1920;
    /*准备目标图片和源图片*/
    SkBitmap dst;
    dst.allocPixels(SkImageInfo::Make(w, h, kN32_SkColorType, kPremul_SkAlphaType));
    SkCanvas c(dst);

    SkBitmap src;
    SkImageDecoder::DecodeFile("test.jpg", &src);

    /*各种绘制图片方法使用示例*/
    {
        c.drawBitmap(src, 0, 0, NULL);
    }

    {
        c.drawSprite(src, 400, 400, NULL);
    }
    {
        SkRect dstR;
        r.set(29, 29, 100, 100);
        SkRect srcR;
        r.set(0,0,40,50);
        c.drawBitmapRectToRect(src, &srcR, dstR, NULL);
    }
    {
        SkMatrix m;
        m.setScale(1.4,4.3);
        c.drawBitmapMatrix(src, m, NULL);
    }
    {
        SkRect dstRect;
        dstRect.set(100,100,480,920);
        SkPaint paint;
        SkMatrix m;
        m.setScale(3.2, 4.1);
        SkShader* shader = CreateBitmapShader(src, SkShader::kRepeat_TileMode, SkShader::kRepeat_TileMode, m, NULL);
        paint.setShader(shader);
        SkSafeUnref(shader);
        c.drawRect(dstRect, paint);
    }

    /*输出图片*/
    SkImageEncoder::EncodeFile("output.jpg", dst, SkImageEncoder::kJPEG_Type, 100);
    return 1;
}</span>

2、流程解析

（1）SkCanvas两重循环调到SkBitmapDevice，进而调到SkDraw
在SkDraw中，drawBitmap的渲染函数统一为：
void SkDraw::drawBitmap(const SkBitmap& bitmap, const SkMatrix& prematrix, const SkPaint& origPaint) const;
（2）Sprite简易模式
在满足如下条件时，走进Sprite简易模式。
代码见 external/skia/src/core/SkDraw.cpp drawBitmap 函数
a、(bitmap.colorType() != kAlpha_8_SkColorType && just_translate(matrix, bitmap))
kAlpha_8_SkColorType 的图像只有一个通道alpha，按 drawMask 方式处理，将Paint中的颜色按图像的alpha预乘，叠加到目标区域上。
just_translate表示matrix为一个平移矩阵，这时不涉及旋转缩放，bitmap的像素点和SkCanvas绑定的dstBitmap的像素点此时存在连续的一一对齐关系。
b、clipHandlesSprite(*fRC, ix, iy, bitmap))
这个条件是指当前SkCanvas的裁剪区域不需要考虑抗锯齿或者完全包含了bitmap的渲染区域。SkCanvas的任何渲染都必须在裁剪区域之内，因此如果图像跨越了裁剪区域边界而且裁剪区域需要考虑抗锯齿，在边界上需要做特殊处理。
注：裁剪区域的设置API
void SkCanvas::clipRect(const SkRect& rect, SkRegion::Op op, bool doAA)
doAA即是否在r的边界非整数时考虑抗锯齿。
满足条件，创建SkSpriteBlitter，由SkScan::FillIRect按每个裁剪区域调用SkSpriteBlitter的blitRect。
这种情况下可以直接做颜色转换和透明度合成渲染过去，不需要做抗锯齿和图像插值，也就不需要走取样——混合流程，性能是最高的。


满足条件后通过ChooseSprite去选一个SkSpriteBlitter
详细代码见 external/skia/src/core/SkBlitter_Sprite.cpp 中的 ChooseSprite 函数。
这函数实际上很多场景都没覆盖到，因此很可能是选不到的，这时就开始转回drawRect流程。
（3）创建BitmapShader
在  SkAutoBitmapShaderInstall install(bitmap, paint); 这一句代码中，为paint创建了bitmapShader：
        fPaint.setShader(CreateBitmapShader(src, SkShader::kClamp_TileMode,
                                            SkShader::kClamp_TileMode,
                                            localMatrix, &fAllocator));
然后就可以使用drawRect画图像了。


（4）drawRect
不能使用SkSpriteBlitter的场景，走drawRect通用流程。
这里有非常多的分支，只讲绘制实矩形的情形。
通过 SkAutoBlitterChoose -> SkBlitter::Choose，根据Canvas绑定的Bitmap像素模式，paint属性去选择blitter。
绘制图片时paint有Shader（SkBitmapProcShader），因此是选的是带Shader的Blitter，比如适应ARGB格式的 SkARGB32_Shader_Blitter
（5）SkScan
在SkScan中，对每一个裁剪区域，将其与绘制的rect求交，然后渲染这个相交区域。此外，在需要时做抗锯齿。
做抗锯齿的基本方法就是对浮点的坐标，按其离整数的偏离度给一个alpha权重，将颜色乘以此权重（减淡颜色）画上去。
SkScan中在绘制矩形时，先用blitV绘制左右边界，再用blitAntiH绘制上下边界，中间大块的不需要考虑抗锯齿，因而用blitRect。
（6）blitRect
这一步先通过 Shader的shadeSpan方法取对应位置的像素，再将此像素通过SkBlitRow的proc叠加上去。
如果不需要考虑混合模式，可以跳过proc。
参考代码：external/skia/src/core/SkBlitter_ARGB32.cpp 中的blitRect
（7）shadeSpan
这里只考虑 SkBitmapProcShader 的shadeSpan，这主要是图像采样的方法。详细代码见 external/skia/src/core/SkBitmapProcShader.cpp
对每一个目标点，先通过 matrixProc 取出需要参考的源图像素，然后用sampleProc将这些像素合成为一个像素值。（和OpenGL里面的texture2D函数原理很类似）。
若存在 shaderProc（做线性插值时，上面的步骤是可以优化的，完全可以取出一群像素一起做插值计算），以shaderProc代替上面的两步流程，起性能优化作用。


3、SkBlitter接口解析
（1）blitH
virtual void blitH(int x, int y, int width);
从x,y坐标开始，渲染一行width个像素
（2）blitV
virtual void blitV(int x, int y, int height, SkAlpha alpha);
从x,y开始，渲染一列height个像素，按alpha值对颜色做减淡处理
（3）blitAntiH
virtual void blitAntiH(int x, int y, const SkAlpha antialias[], const int16_t runs[]);
如流程图所标示的，这个函数的用来渲染上下边界，作抗锯齿处理。
（4）blitRect
virtual void blitRect(int x, int y, int width, int height);
绘制矩形区域，这个地方就不需要考虑任何的几何变换、抗锯齿等因素了。
（5）blitMask
virtual void blitMask(const SkMask& mask, const SkIRect& clip);
主要绘制文字时使用，以一个颜色乘上mash中的透明度，叠加。