UIKit和Core Graphics绘图（二）——构造路径，阴影以及渐变扩展

构造路径

通常，一系列点组合一起构成一个形状，而若干个形状组合在一起可以构造一个路径，路径可以规则也可以不规则，随意组合。通过Core Graphics很容易管理路径。

主要用到的函数或方法：

CGPathCreateMutable() 创建可变路径的方法

CGContextAddPath 将路径加入到上下文中

CGContextDrawPath绘制路径

CGPathRelease 路径也需要释放

用路径画一组对角线

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    [self drawTwoLines];
}

- (void)drawTwoLines
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, screenRect.origin.x, screenRect.origin.y);
    CGPathAddLineToPoint(path, NULL, screenRect.size.width, screenRect.size.height);
    CGPathMoveToPoint(path, NULL, screenRect.size.width, screenRect.origin.y);
    CGPathAddLineToPoint(path, NULL, screenRect.origin.x, screenRect.size.height);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, path);
    CGContextSetLineWidth(context, 1.0f);
    [[UIColor blueColor] setStroke];
    CGContextDrawPath(context, kCGPathStroke);      //第二个参数为画路径的样式，这里为描线，也可以有填充或者既描线也填充
    
    CGPathRelease(path);
}

效果

绘制多个矩形

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    //[self drawTwoLines];
    [self drawTwoRects];
}

- (void)drawTwoRects
{
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rect1 = CGRectMake(20, 20, 200, 100);
    CGRect rect2 = CGRectMake(20, 200, 200, 80);
    CGRect rects[] = {rect1, rect2};
    
    CGPathAddRects(path, NULL, (const CGRect *)rects, 2);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, path);
    CGContextSetLineWidth(context, 2.0f);
    
    [[UIColor yellowColor] setFill];    //填充颜色
    [[UIColor blackColor] setStroke];   //线条颜色
    
    CGContextDrawPath(context, kCGPathFillStroke);  //设置既填充也描线
    
    CGPathRelease(path);
}

效果

绘制阴影

使用上下文绘制阴影主要用到两个函数

CGContextSetShadow（）

三个参数，图形上下文，偏移量（CGSize），模糊值。

CGContextSetShadowWithColor（）

增加了一个参数，CGColorRef可以设置阴影的颜色

- (void)drawTwoRectsWithShadow
{
    CGMutablePathRef path = CGPathCreateMutable();
    
    CGRect rect1 = CGRectMake(55, 60, 150, 150);
    CGPathAddRect(path, NULL, rect1);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, path);
    CGContextSetShadowWithColor(context, CGSizeMake(10, 10), 20.0f, [[UIColor grayColor] CGColor]);
    [[UIColor purpleColor] setFill];
    CGContextDrawPath(context, kCGPathFill);
    CGPathRelease(path);
    
    CGMutablePathRef path2 = CGPathCreateMutable();
    
    CGRect rect2 = CGRectMake(130, 290, 100, 100);
    CGPathAddRect(path2, NULL, rect2);
    CGContextAddPath(context, path2);
    [[UIColor yellowColor] setFill];
    CGContextDrawPath(context, kCGPathFill);
    
    CGPathRelease(path2);
}

由于我们没有对上下文SaveGState和Restore所以，绘制出来的两个矩形都会有阴影

渐变扩展

上篇文章的线性渐变使用的是CGGradientsCreateWithColors函数，这里我们使用细化到颜色成分构成的函数来进行CGGradientRef的初始化：

CGGradientCreateWithColorComponents

这里比之前函数增加了一个参数，元素数量，而且传入颜色数组也变为了颜色构成的数组。

如果想知道一个颜色比如[UIColor purpleColor]具体构成，可以调用CGColorGetComponents来获取其构成，返回一个数组，包括R,G,B以及alpha的值。

- (void)drawingGradient
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, (CGFloat[]){
        0.8, 0.2, 0.2, 1.0,
        0.2, 0.8, 0.2, 1.0,
        0.2, 0.2, 0.8, 1.0
    }, (CGFloat[]){
        0.0, 0.5, 1.0
    }, 3);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(100, 200), CGPointMake(220, 280), 0);
    
    CGContextRestoreGState(context);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

调用这个函数的效果：

下面我们可以试图修改DrawLinearGradient函数的最后一个参数值来让渐变后边缘颜色扩展到整个屏幕。

    //CGContextDrawLinearGradient(context, gradient, CGPointMake(100, 200), CGPointMake(220, 280), 0);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(100, 200), CGPointMake(220, 280), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);

然后就变成了这样

比较丑，凑合看吧- -

以上为本篇文章全部内容，欢迎指正和交流。转载注明出处~