iOS 2D绘图 (Quartz2D)之路径(stroke，fill，clip，subpath,blend)

Posted 2020-08-25 幻影-2000

像往常一样 这个系列的博客是跟着大神的脚步来的。按照往例 在此贴出原博客的出处：

http://blog.csdn.net/hello_hwc?viewmode=list

我对大神的崇拜之情 如滔滔江水 巴拉巴拉的 .........

言归正传

Stroke-描边

影响描边的因素

线的宽度-CGContextSetLineWidth

交叉线的处理方式-CGContextSetLineJoin

线顶端的处理方式-CGContextSetLineCap

进一步限制交叉线的处理方式-CGContextSetMiterLimit

是否要虚线-Line dash Pattern

颜色控件-CGContextSetStrokeColorSpace

画笔颜色-CGContextSetStrokeColor/CGContextSetStrokeColorWithColor

描边模式 -CGContextSetStrokePattern

虚线 画笔颜色 交叉的处理方式 前面的博客已经讲过，这里就不在赘述了。

CGContextSetMiterLimit

如果当前交叉线绘图模式是KCGLineJoinMiter(CGContextSetLineJoin)，Quartz 根据设置的miter值来判断线的join是bevel或者miter。
具体的模式是:将miter的长度除以线的宽度，如果小于设置的miterLimit的值，则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 则效果如下：

---

Fill 填充

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

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

2>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