iOS 2D绘图详解（Quartz 2D）之路径(stroke,fill,clip,subpath,blend)

Stroke-描边

影响描边的因素

• 线的宽度－CGContextSetLineWidth
• 交叉线的处理方式－CGContextSetLineJoin
• 线顶端的处理方式－CGContextSetLineCap
• 进一步限制交叉线的处理方式 －CGContextSetMiterLimit
• 是否要虚线－Line dash pattern
• 颜色控件－CGContextSetStrokeColorSpace
• 画笔颜色－CGContextSetStrokeColor/CGContextSetStrokeColorWithColor
• 描边模式－CGContextSetStrokePattern

虚线，画笔颜色，交叉的处理方式，顶端的处理方式，线宽度在之前这篇文章里有讲过，这里不再赘述。

CGContextSetMiterLimit

如果当前交叉线绘图模式是kCGLineJoinMiter( CGContextSetLineJoin)，quartz根据设置的miter值来判断线的join是bevel或者miter。具体的模式是：将miter的长度除以线的宽度，如果小于设置的mitetLimit值，则join style为bevel；

先看看三种join效果

举个例子就懂了

    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 10, 90);
    CGContextSetLineWidth(context, 10.0);
    CGContextSetLineJoin(context, kCGLineJoinMiter);
    CGContextSetMiterLimit(context,20.0);
    CGContextStrokePath(context);

效果

将Miter设置为1，则效果如下

CGContextSetStrokeColorSpace和pattern会在以后的文章详细阐述，这里暂时先略去

---

Fill－填充

Quartz填充的时候会认为subpath是封闭的，然后根据规则来填充。有两种规则：

nonzero winding number rule.沿着当前点，画一条直线到区域外，检查交叉点，如果交叉点从左到右，则加一，从右到左，则减去一。如果结果不为0，则绘制。参见这个link

even-odd rule,沿着当前点，花一条线到区域外，然后检查相交的路径，偶数则绘制，奇数则不绘制。
具体效果如下

相关函数

• CGContextEOFillPath － 用even-odd rule来填充
• CGContextFillPath － 用nonzero winding number rule方式填充
• CGContextFillRect/CGContextFillRects － 填充指定矩形区域内path
• CGContextFillEllipseInRect － 填充椭圆
• CGContextDrawPath － 绘制当前path（根据参数stroke/fill）

---

Clip－切割

顾名思义，根据path只绘制指定的区域，在区域外的都不会绘制。
举个例子，截取圆形区域
效果

注意，切割是和状态相关的，以为这切割以后都是在切割后context中绘制的。
如果要保存状态，参照这篇文章里讲的压栈和出栈

 - (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextBeginPath (context);
    CGContextAddArc(context,50, 50,20,0, M_PI * 2,true);
    CGContextClosePath (context);
    CGContextClip (context);
    CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
    CGContextFillRect(context, rect);

    //New Code
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);

    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 10, 90);

    CGContextSetLineWidth(context, 10.0);
    CGContextSetLineJoin(context, kCGLineJoinMiter);
    CGContextSetMiterLimit(context,20.0);
    CGContextStrokePath(context);
}
-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        self.opaque = NO;
    }
    return self;
}

相关函数

• CGContextClip 按照nonzero winding number rule规则切割
• CGContextEOClip 按照even-odd规则切割
• CGContextClipToRect 切割到指定矩形
• CGContextClipToRects 切割到指定矩形组
• CGContextClipToMask 切割到mask

---

Subpath - 子路径

很简单，在stroke/fill或者CGContextBeginPath/CGContextClosePath以后就新开启一个子路径。

注意：

CGContextClosePath，会连接第一个点和最后一个点

---

Blend-混合模式

Quartz中，默认的颜色混合模式采用如下公式
result = (alpha * foreground) + (1 - alpha) * background

可以使用CGContextSetBlendMode来设置不同的颜色混合模式，注意设置blend是与context绘制状态相关的，一切与状态相关的设置都要想到状态堆栈（如果看不懂这句，看我之前的那两篇文章里讲的）。

先看看官方文档里的例子，最后我会写个自己的例子
background

foreGround

---

Normal Blend Mode

效果

---

Multiply Blend Mode

交叉部分会显得比较暗，用上一层和底层相乘，至少和一层一样暗

---

Screen Blend Mode

交叉部分比较亮，上层的reverse和下层的reverse相乘，至少和一个一样亮

---

blend模式较多，这里不一一列举了，参见官方文档