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);
然后就变成了这样
比较丑,凑合看吧- -
以上为本篇文章全部内容,欢迎指正和交流。转载注明出处~