Skia深入分析4——skia路径绘制的实现

Skia路径绘制代码分析

路径绘制尽管使用频率相对于图像绘制、文本绘制低，但却是非常重要的一个基本特性。所有不规则图形（椭圆、圆角矩形、三角形、简单的文字），最后都避不开路径绘制。
而且，若自己实现一个2D引擎，这块内容是很具有参考意义的，用OpenGL的话，图像采样等都很少关注了，对对坐标就好。但菱角、圆弧、曲线等如何绘制仍然是一个难题，这时就可以参考Skia中drawPath的实现。
由于涉及较多的图形学知识，本章就不讲相关公式了，只讲讲基本的流程。
一、SkPath类
在之前的图像绘制并没有介绍SkBitmap，因为SkBitmap相对而言比较容易理解，网上文章也多。但这次的SkPath不同，研究它怎么用是需要一点精力的，因此在这里先做介绍。
1、SkPath结构
去除成员函数之后，我们看到SkPath包括这几个成员，注释中补充了说明：

class SK_API SkPath {
    //SkPath中的主要内容，SkAutoTUnref是自解引用，之所以这么设计，是为了复制SkPath时，省去份量较多的点复制（只复制引用）。
    //由一系列线段组成
    SkAutoTUnref<SkPathRef> fPathRef;


    int                 fLastMoveToIndex;
    uint8_t             fFillType;//如下四种类型之一
    /*enum FillType {
        kWinding_FillType,//绘制所有线段包围成的区域
        kEvenOdd_FillType,//绘制被所有线段包围奇数次的区域）
        kInverseWinding_FillType,//kWinding_FillType取反，即绘制不在该区域的点
        kInverseEvenOdd_FillType//第二种type取反
        }*/
    mutable uint8_t     fConvexity;//凹凸性，临时计算
    mutable uint8_t     fDirection;//方向，顺时针/逆时针，临时计算
#ifdef SK_BUILD_FOR_ANDROID
    const SkPath*       fSourcePath;//Hwui中使用，暂不关注
#endif
};

关于 fFillType中 kWinding_FillType和 kEvenOdd_FillType的区别，可看SkPath::contains。这是判断点是否在不规则几何体内的经典代码()，很有参考意义。

SkPathRef的内容如下：

class SkPathRef
{
private:
    mutable SkRect      fBounds;//边界，临时计算
    uint8_t             fSegmentMask;//表示这个Path含有哪些种类的形状
    mutable uint8_t     fBoundsIsDirty;//缓存fBounds使用，表示 fBounds是否需要重新计算
    mutable SkBool8     fIsFinite;    // only meaningful if bounds are valid
    mutable SkBool8     fIsOval;


    /*skia不使用stl库而采用的一套容器方案，具体不细说，可看下 SkPath::Iter 的实现*/
    SkPoint*            fPoints; // points to begining of the allocation
    uint8_t*            fVerbs; // points just past the end of the allocation (verbs grow backwards)
    int                 fVerbCnt;
    int                 fPointCnt;
    size_t              fFreeSpace; // redundant but saves computation




    SkTDArray<SkScalar> fConicWeights;
    mutable uint32_t    fGenerationID;
};

2、SkPath的主要类型：

kMove_Verb：表示需要移动起点
kLine_Verb：直线
kQuad_Verb：二次曲线
kConic_Verb：圆锥曲线
kCubic_Verb：三次曲线
kClose_Verb：表闭合到某点
kDone_Verb：表结束


3、drawPath使用实例

#include "SkPath.h"
#include "SkCanvas.h"
#include "SkBitmap.h"

int main()
{
    SkBitmap dst;
    dst.allocN32Pixels(1000, 1000);
    SkCanvas c(dst);
    SkPath path;
    /*一个三角形*/
    path.moveTo(300,0);
    path.lineTo(400,100);
    path.lineTo(200,100);
    path.close();
    /*椭圆*/
    SkRect oval;
    oval.set(0, 0, 500, 600);
    path.addOval(oval);

    c.drawPath(path);
    return 1;
}

二、drawPath流程
1、基本流程


2、填充算法说明
我们跟进最重要的函数 sk_fill_path，如下为代码：

void sk_fill_path(const SkPath& path, const SkIRect* clipRect, SkBlitter* blitter,
                  int start_y, int stop_y, int shiftEdgesUp,
                  const SkRegion& clipRgn) {
    SkASSERT(&path && blitter);

    SkEdgeBuilder   builder;

    int count = builder.build(path, clipRect, shiftEdgesUp);
    SkEdge**    list = builder.edgeList();

    if (count < 2) {
        if (path.isInverseFillType()) {
            /*
             *  Since we are in inverse-fill, our caller has already drawn above
             *  our top (start_y) and will draw below our bottom (stop_y). Thus
             *  we need to restrict our drawing to the intersection of the clip
             *  and those two limits.
             */
            SkIRect rect = clipRgn.getBounds();
            if (rect.fTop < start_y) {
                rect.fTop = start_y;
            }
            if (rect.fBottom > stop_y) {
                rect.fBottom = stop_y;
            }
            if (!rect.isEmpty()) {
                blitter->blitRect(rect.fLeft << shiftEdgesUp,
                                  rect.fTop << shiftEdgesUp,
                                  rect.width() << shiftEdgesUp,
                                  rect.height() << shiftEdgesUp);
            }
        }

        return;
    }

    SkEdge headEdge, tailEdge, *last;
    // this returns the first and last edge after they're sorted into a dlink list
    SkEdge* edge = sort_edges(list, count, &last);

    headEdge.fPrev = NULL;
    headEdge.fNext = edge;
    headEdge.fFirstY = kEDGE_HEAD_Y;
    headEdge.fX = SK_MinS32;
    edge->fPrev = &headEdge;

    tailEdge.fPrev = last;
    tailEdge.fNext = NULL;
    tailEdge.fFirstY = kEDGE_TAIL_Y;
    last->fNext = &tailEdge;

    // now edge is the head of the sorted linklist

    start_y <<= shiftEdgesUp;
    stop_y <<= shiftEdgesUp;
    if (clipRect && start_y < clipRect->fTop) {
        start_y = clipRect->fTop;
    }
    if (clipRect && stop_y > clipRect->fBottom) {
        stop_y = clipRect->fBottom;
    }

    InverseBlitter  ib;
    PrePostProc     proc = NULL;

    if (path.isInverseFillType()) {
        ib.setBlitter(blitter, clipRgn.getBounds(), shiftEdgesUp);
        blitter = &ib;
        proc = PrePostInverseBlitterProc;
    }

    if (path.isConvex() && (NULL == proc)) {
        walk_convex_edges(&headEdge, path.getFillType(), blitter, start_y, stop_y, NULL);
    } else {
        walk_edges(&headEdge, path.getFillType(), blitter, start_y, stop_y, proc);
    }
}

不考虑 Inverse 的情况，主要就是两步：
（1）生成一系列边：SkEdge
（2）遍历渲染各边所围出来的区域

凸集的渲染比较简单，因为可以保证，任意两条边+闭合线所围成区域一定需要渲染：
（1）取初始的两条边，分别为：左和右。
（2）渲染左右边+闭合边所围成的区域（一般为三角，当两边平行时取矩形）

（3）迭代刷新左右两边（如果是曲线需要刷新多次）

static void walk_convex_edges(SkEdge* prevHead, SkPath::FillType,
                              SkBlitter* blitter, int start_y, int stop_y,
                              PrePostProc proc) {
    validate_sort(prevHead->fNext);

    SkEdge* leftE = prevHead->fNext;
    SkEdge* riteE = leftE->fNext;
    SkEdge* currE = riteE->fNext;

#if 0
    int local_top = leftE->fFirstY;
    SkASSERT(local_top == riteE->fFirstY);
#else
    // our edge choppers for curves can result in the initial edges
    // not lining up, so we take the max.
    int local_top = SkMax32(leftE->fFirstY, riteE->fFirstY);
#endif
    SkASSERT(local_top >= start_y);

    for (;;) {
        SkASSERT(leftE->fFirstY <= stop_y);
        SkASSERT(riteE->fFirstY <= stop_y);

        if (leftE->fX > riteE->fX || (leftE->fX == riteE->fX &&
                                      leftE->fDX > riteE->fDX)) {
            SkTSwap(leftE, riteE);
        }

        int local_bot = SkMin32(leftE->fLastY, riteE->fLastY);
        local_bot = SkMin32(local_bot, stop_y - 1);
        SkASSERT(local_top <= local_bot);

        SkFixed left = leftE->fX;
        SkFixed dLeft = leftE->fDX;
        SkFixed rite = riteE->fX;
        SkFixed dRite = riteE->fDX;
        int count = local_bot - local_top;
        SkASSERT(count >= 0);
        if (0 == (dLeft | dRite)) {
            int L = SkFixedRoundToInt(left);
            int R = SkFixedRoundToInt(rite);
            if (L < R) {
                count += 1;
                blitter->blitRect(L, local_top, R - L, count);
                left += count * dLeft;
                rite += count * dRite;
            }
            local_top = local_bot + 1;
        } else {
            do {
                int L = SkFixedRoundToInt(left);
                int R = SkFixedRoundToInt(rite);
                if (L < R) {
                    blitter->blitH(L, local_top, R - L);
                }
                left += dLeft;
                rite += dRite;
                local_top += 1;
            } while (--count >= 0);
        }

        leftE->fX = left;
        riteE->fX = rite;

        if (update_edge(leftE, local_bot)) {
            if (currE->fFirstY >= stop_y) {
                break;
            }
            leftE = currE;
            currE = currE->fNext;
        }
        if (update_edge(riteE, local_bot)) {
            if (currE->fFirstY >= stop_y) {
                break;
            }
            riteE = currE;
            currE = currE->fNext;
        }

        SkASSERT(leftE);
        SkASSERT(riteE);

        // check our bottom clip
        SkASSERT(local_top == local_bot + 1);
        if (local_top >= stop_y) {
            break;
        }
    }
}

凹集或者判断不了凹凸性就比较复杂，需要一条线一条线去渲染，每次渲染还得判断奇偶性：

代码如下，不分析了：

static void walk_edges(SkEdge* prevHead, SkPath::FillType fillType,
                       SkBlitter* blitter, int start_y, int stop_y,
                       PrePostProc proc) {
    validate_sort(prevHead->fNext);

    int curr_y = start_y;
    // returns 1 for evenodd, -1 for winding, regardless of inverse-ness
    int windingMask = (fillType & 1) ? 1 : -1;

    for (;;) {
        int     w = 0;
        int     left SK_INIT_TO_AVOID_WARNING;
        bool    in_interval = false;
        SkEdge* currE = prevHead->fNext;
        SkFixed prevX = prevHead->fX;

        validate_edges_for_y(currE, curr_y);

        if (proc) {
            proc(blitter, curr_y, PREPOST_START);    // pre-proc
        }

        while (currE->fFirstY <= curr_y) {
            SkASSERT(currE->fLastY >= curr_y);

            int x = SkFixedRoundToInt(currE->fX);
            w += currE->fWinding;
            if ((w & windingMask) == 0) { // we finished an interval
                SkASSERT(in_interval);
                int width = x - left;
                SkASSERT(width >= 0);
                if (width)
                    blitter->blitH(left, curr_y, width);
                in_interval = false;
            } else if (!in_interval) {
                left = x;
                in_interval = true;
            }

            SkEdge* next = currE->fNext;
            SkFixed newX;

            if (currE->fLastY == curr_y) {    // are we done with this edge?
                if (currE->fCurveCount < 0) {
                    if (((SkCubicEdge*)currE)->updateCubic()) {
                        SkASSERT(currE->fFirstY == curr_y + 1);

                        newX = currE->fX;
                        goto NEXT_X;
                    }
                } else if (currE->fCurveCount > 0) {
                    if (((SkQuadraticEdge*)currE)->updateQuadratic()) {
                        newX = currE->fX;
                        goto NEXT_X;
                    }
                }
                remove_edge(currE);
            } else {
                SkASSERT(currE->fLastY > curr_y);
                newX = currE->fX + currE->fDX;
                currE->fX = newX;
            NEXT_X:
                if (newX < prevX) { // ripple currE backwards until it is x-sorted
                    backward_insert_edge_based_on_x(currE  SkPARAM(curr_y));
                } else {
                    prevX = newX;
                }
            }
            currE = next;
            SkASSERT(currE);
        }

        if (proc) {
            proc(blitter, curr_y, PREPOST_END);    // post-proc
        }

        curr_y += 1;
        if (curr_y >= stop_y) {
            break;
        }
        // now currE points to the first edge with a Yint larger than curr_y
        insert_new_edges(currE, curr_y);
    }
}

3、描线流程
个人认为较简单，就不介绍了。

三、总结
drawPath是绘制所有不规则形体的函数，带入Bitmap的Shader，可以制作不规则形体的图片。对于凸集，Skia的渲染主要也是切成三角片后渲染，和OpenGL类似。而对于凹集，则是扫描线了。渲染的实现和绘制图片一样，构建Blitter，调用Blitter的blit函数族渲染。