Quartz 2D是Core Graphics框架的一部分,同时也是一个强大的二维图像绘制引擎,开发中我们经常用它来绘制我们想要的图形(圆形、矩形、三角形...)使得我们的UI更加的美观漂亮,同样可以用它弥补苹果原生控件数量上的缺陷(毕竟Xcode自带的控件还是很有限的)。
- 随着市场中现有App的数量不断的增加,现在的App不仅对功能要求更加的实用方便,同样App的界面也需要更加美观、个性化,因此合理实用Quartz 2D来武装我们的App,这将是一个很好的idea
以上说了这么多,下面就让我们对Quartz 2D有个简单的了解吧,使用Quartz 2D可以分为一下几步:
** 1. 获取图形上下文 **
** 2. 创建并设置路径 **
** 3. 将路径添加到上下文 **
** 4. 设置上下文相关状态 **
** 5. 绘制路径 **
** 6. 释放路径 **
按照以上步骤绘制三角形
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect {
//获取图形上下文对象
CGContextRef context = UIGraphicsGetCurrentContext();
//创建路径对象
CGMutablePathRef path = CGPathCreateMutable();
//设置路径起点
CGPathMoveToPoint(path, nil, 200, 50);
//设置路径终点
CGPathAddLineToPoint(path, nil, 50, 200);
//接着画到点200,200
CGPathAddLineToPoint(path, nil, 200, 200);
//连接最后一点200,50
CGPathAddLineToPoint(path, nil, 200, 50);
//将路径添加到图形上下文
CGContextAddPath(context, path);
//设置线条宽度
CGContextSetLineWidth(context, 5);
//设置边框颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
//设置填充颜色
CGContextSetRGBFillColor(context, 0, 0, 1, 1);
//绘制图形到指定图形上下文,切设置既有边框,又有填充型
/*CGPathDrawingMode是填充方式,枚举类型
kCGPathFill:只有填充（非零缠绕数填充），不绘制边框
kCGPathEOFill:奇偶规则填充（多条路径交叉时，奇数交叉填充，偶交叉不填充）
kCGPathStroke:只有边框
kCGPathFillStroke：既有边框又有填充
kCGPathEOFillStroke：奇偶填充并绘制边框
*/
CGContextDrawPath(context, kCGPathFillStroke);
//释放路径
CGPathRelease(path);
}
不难看出,上面的方式有些麻烦,那么我们还可以省去路径的创建,通过UIColor的方式进行设置颜色
绘制三角形
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//获取图形上下文对象
CGContextRef context = UIGraphicsGetCurrentContext();
//将画笔移动到点200,50处
CGContextMoveToPoint(context, 200, 50);
//画到点50,200的位置
CGContextAddLineToPoint(context, 50, 200);
//然后再画到200,200的位置
CGContextAddLineToPoint(context, 200, 200);
//将最后一点与起始点相连
CGContextAddLineToPoint(context, 200, 50);
//设置线条宽度
CGContextSetLineWidth(context, 5);
//设置边框颜色
//CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
[[UIColor blueColor]setStroke];
//设置填充颜色
//CGContextSetRGBFillColor(context, 0, 0, 1, 1);
[[UIColor redColor]setFill];
//绘制图形到指定图形上下文,切设置既有边框,又有填充型
CGContextDrawPath(context, kCGPathFillStroke);
}
绘制矩形
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//获取图形上下文对象
CGContextRef context = UIGraphicsGetCurrentContext();
//画矩形
CGContextAddRect(context, CGRectMake(50, 300, 100, 100));
//设置线条宽度
CGContextSetLineWidth(context, 5);
//设置边框颜色
//CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
[[UIColor blueColor]setStroke];
//设置填充颜色
//CGContextSetRGBFillColor(context, 0, 0, 1, 1);
[[UIColor redColor]setFill];
//绘制图形到指定图形上下文,切设置既有边框,又有填充型
CGContextDrawPath(context, kCGPathFillStroke);
//只有边框
//CGContextStrokePath(context);
//只有填充
//CGContextFillPath(context);
}
绘制圆形
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//获取图形上下文对象
CGContextRef context = UIGraphicsGetCurrentContext();
//画圆
CGContextAddArc(context, 100, 550, 50, 0, 2 * M_PI, 0);
//设置线条宽度
CGContextSetLineWidth(context, 5);
//设置边框颜色
//CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
[[UIColor blueColor]setStroke];
//设置填充颜色
//CGContextSetRGBFillColor(context, 0, 0, 1, 1);
[[UIColor redColor]setFill];
//绘制图形到指定图形上下文,切设置既有边框,又有填充型
CGContextDrawPath(context, kCGPathFillStroke);
//只有边框
//CGContextStrokePath(context);
//只有填充
//CGContextFillPath(context);
}
除了绘制上面的图形,我们还可以通过Quartz 2D来绘制文本内容
绘制文本内容
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//要显示的文字
NSString *str = @"苹果在昨天成功获得一项关于音频方面的专利，可以让纤薄电子设备中的扬声器音量更高，音质更好。虽然该专利的文件内容冗长，不过却描述了一种方法：“由于便携式电子设备的体积限制，在使设备更薄更小的同时，提供高质量的音频输出/接收能力已变得愈发困难。因此，就需要新的方法，来提供高质量的音频输出/接收能力。” ";
//绘制文字显示的指定区域
CGRect rect = CGRectMake(20, 50, 374, 500);
//字体大小
UIFont *font = [UIFont systemFontOfSize:25];
//字体颜色
UIColor *color = [UIColor redColor];
//初始化段落样式
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc]init];
//居中对齐
NSTextAlignment textAlignment = NSTextAlignmentCenter;
//设置段落样式
paragraphStyle.alignment = textAlignment;
[str drawInRect:rect withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName:color, NSParagraphStyleAttributeName:paragraphStyle}];
}
绘制图像
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//加载图片
UIImage *image = [UIImage imageNamed:@"mv1.jpg"];
//拉伸的方式显示图片
[image drawInRect:CGRectMake(20, 300, 374, 400)];
//设置图片位置(平铺的方式显示图片)
//[image drawAsPatternInRect:CGRectMake(20, 400, 374, 336)];
}
同样我们可以通过Quartz 2D进行图片剪切
//绘图只能在当前位方法中调用,否则无法得到图形上下文
- (void)drawRect:(CGRect)rect{
//获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//指定上下文显示的范围
CGContextAddEllipseInRect(context, CGRectMake(80, 50, 100, 100));
//裁剪
CGContextClip(context);
//获取图片
UIImage *image = [UIImage imageNamed:@"mv2.jpg"];
//
[image drawAtPoint:CGPointMake(50, 50)];
}
以上程序运行效果截图:
绘制图形.png
绘制.png