Quartz2D绘图简介
葛浩阔
- Quartz2D的简介
- 使用简介
- 绘制图像
- 坐标系的平移、旋转、缩放
- 绘制文本
- 绘制PDF文件
一、Quartz2D的简介
1⃣️Quart2D是CoreGraphic的一部分，基于C的API
－图形的上下文（Graphics Context）
数据类型，封装了Quartz绘制图像到输出设备的信息
－Quartz 2D坐标系
－绘图顺序
－绘图方法
2⃣️内存管理
当出现Create、copy、retain时必须释放
二、简单使用
二、简单使用
－获取一个与视图相关联的上下文
－创建一个可变路径（本身是有一个默认路径的）
1.创建路径
2.设置路径起点
3.增加路径内容
－将路径添加到上下文
－设置上下文状态
1.设置边线颜色
2.设置填充颜色
3.设置线宽
4.设置线段连接样式
5.设置线段首位样式
6.设置虚线样式
－绘制路径
－释放路径
三、绘制图像
画直线1
#pragma mark 绘制直线1
- (void)drawLine1
{
// 1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 2. 构建路径
// 2.1 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 2.2 设置路径起点
CGPathMoveToPoint(path, NULL, 50, 50);
// 2.3 增加路径内容...
CGPathAddLineToPoint(path, NULL, 50, 420);
CGPathAddLineToPoint(path, NULL, 270, 420);
CGPathAddLineToPoint(path, NULL, 270, 50);
// 2.4 关闭路径
CGPathCloseSubpath(path);
// 3. 将路径添加到上下文
CGContextAddPath(context, path);
// 4. 设置上下文状态
// 4.1 设置边线颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
// 4.2 设置填充颜色
CGContextSetRGBFillColor(context, 0, 0, 1, 1);
// 4.2 设置线宽
CGContextSetLineWidth(context, 10);
// 4.3 设置线段连接样式
CGContextSetLineJoin(context, kCGLineJoinBevel);
// 4.4 设置线段首位样式
CGContextSetLineCap(context, kCGLineCapSquare);
// 4.5 设置虚线
CGFloat lengths[] = {20, 100};
CGContextSetLineDash(context, 100, lengths, 2);
// 5. 绘制路径
CGContextDrawPath(context, kCGPathEOFill);
// 6. 释放路径(如果创建对象的函数中包含create，copy或者retain字样，就需要释放！)
CGPathRelease(path);
}
画直线2
#pragma mark 绘制直线2
- (void)drawLine2
{
// 1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 2. 构建路径
CGContextBeginPath(context);
// 2.1 设置上下文路径起点
CGContextMoveToPoint(context, 50, 50);
// 2.2 增加路径内容……
CGContextAddLineToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 50);
// 3. 保存当前上下文
CGContextSaveGState(context);
// 4. 设置上下文状态
// 4.1 设置边线颜色
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
// 4.2 设置线宽
CGContextSetLineWidth(context, 10);
// 4.4 设置线段连接样式
CGContextSetLineJoin(context, kCGLineJoinBevel);
// 4.5 设置线段收尾样式
CGContextSetLineCap(context, kCGLineCapRound);
// 5. 绘制路径
// CGContextDrawPath(context, kCGPathFillStroke);
// 与上一行等效
CGContextStrokePath(context);
// 6. 恢复上下文
CGContextRestoreGState(context);
// 7. 再次绘制
CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);
CGContextMoveToPoint(context, 50, 50);
CGContextAddLineToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 50);
CGContextStrokePath(context);
}
画矩形
#pragma mark 绘制矩形2
- (void)drawShapeRect2
{
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor redColor]setFill];
[[UIColor darkGrayColor]setStroke];
CGContextFillRect(context, CGRectMake(50, 50, 100, 100));
CGContextStrokeRect(context, CGRectMake(50, 50, 100, 100));
}
#pragma mark 绘制矩形1
- (void)drawShapeRect1
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, CGRectMake(50, 50, 100, 100));
CGContextFillPath(context);
}
画圆形
#pragma mark - 绘制圆弧
- (void)drawShapeArc
{
// 1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor redColor]set];
// 2. 添加弧线
// 2.1 上下文
// 2.2 中心点坐标
// 2.3 半径
// 2.4 开始角度，结束角度，角度的单位是“弧度”
CGContextAddArc(context, 160, 230, 100, M_PI, -M_PI_2, 0);
// 绘制路径
CGContextStrokePath(context);
}
#pragma mark - 绘制圆型
- (void)drawShapeCircle
{
// 1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 设置颜色
[[UIColor greenColor]setFill];
// 2. 增加圆形的路径
CGContextAddEllipseInRect(context, CGRectMake(50, 50, 200, 200));
// 3. 画圆
CGContextFillPath(context);
}
画渐变效果
#pragma mark - 绘制渐变
- (void)drawGradient
{
// 1. 定义渐变引用CGGradientRef
CGGradientRef gradient;
// 2. 定义色彩空间引用
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// 3. 定义渐变颜色组件
// 每四个数一组，分别对应r,g,b,透明度
CGFloat components[8] = {1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0};
// 4. 定义颜色渐变位置
// 第一个颜色开始渐变的位置
// 第二个颜色结束渐变的位置
CGFloat locations[2] = {0, 1};
// 5. 创建颜色渐进
gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);
// 6. 创建贝塞尔路径，是OC的，如果只是制定了渐变，没有指定剪切路径，就是整个视图的渐变
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
// 7. 添加剪切路径
[path addClip];
// 8. 绘制线性渐进
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawLinearGradient(context, gradient, CGPointMake(50, 50), CGPointMake(200, 50), kCGGradientDrawsAfterEndLocation);
// 9. 释放颜色空间
CGColorSpaceRelease(colorSpace);
// 10. 释放渐变引用
CGGradientRelease(gradient);
}
四、绘制文本
补充：UIFont
－[UIFont systemFontOfSize:30];
－[UIFont fontWithName:@“Marker Felt” size:30];
#pragma mark - 绘制文本
- (void)drawText
{
NSString *text = @"I Love you!I Love you!I Love you!I Love you!I Love you!I Love you!I Love you!I Love you!I Love you!";
NSLog(@"%@",[UIFont familyNames]);
// 使用set既指定边框颜色，又指定填充颜色
[[UIColor redColor]set];
UIFont *font = [UIFont fontWithName:@"Marker Felt" size:30];
[text drawAtPoint:CGPointMake(50, 50) withFont:font];
CGRect rect = CGRectMake(50, 200, 200, 200);
[[UIColor blueColor]set];
UIRectFill(rect);
[[UIColor redColor]set];
// 只能用居中、左、右对齐
[text drawInRect:rect withFont:font lineBreakMode:NSLineBreakByWordWrapping alignment:NSTextAlignmentCenter];
}
绘制平铺图像
#pragma mark - 绘制图像
- (void)drawImage
{
UIImage *image = [UIImage imageNamed:@"头像1.png"];
// 在指定点绘制
[image drawAtPoint:CGPointMake(50, 50)];
// 会拉伸
[image drawInRect:CGRectMake(0, 0, 320, 460)];
// 平铺
[image drawAsPatternInRect:CGRectMake(0, 0, 320, 460)];
}
五、坐标系的平移、旋转、缩放（实际是作用于坐标系，操作之后恢复坐标系）
#pragma mark - 综合绘制
- (void)drawAll
{
// 取出上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 备份上下文
CGContextSaveGState(context);
// 对上下文做一个平移操作
CGContextTranslateCTM(context, 50, 50);
[self drawShapeCircle];
// 恢复上下文
CGContextRestoreGState(context);
// 备份上下文
CGContextSaveGState(context);
// 对上下文做一个平移操作
CGContextTranslateCTM(context, 100, 100);
// 对坐标系进行旋转
CGContextRotateCTM(context, M_PI_4);
// 对坐标系进行缩放
CGContextScaleCTM(context, 0.5, 0.5);
UIImage *image = [UIImage imageNamed:@"头像1.png"];
// 在指定点绘制
[image drawAtPoint:CGPointMake(50, 50)];
// 恢复上下文
CGContextRestoreGState(context);
}
六、添加水印的图像（使用的上下文和上边不一样）
－获得 图像 相关的上下文
－绘制图像
－写水印文字
－从图像上下文中获得当前绘制的结果，并生成图像
－关闭上下文
- 可以将文件归档
－得到路径
#pragma mark 给图像添加水印
- (UIImage *)createImage
{
// 1. 获得图像相关的上下文
// 获得图像上下文的时候，需要指定上下文大小
UIGraphicsBeginImageContext(CGSizeMake(320, 200));
// 2. 绘制图像
UIImage *image = [UIImage imageNamed:@"NatGeo02.png"];
[image drawInRect:CGRectMake(0, 0, 320, 200)];
// 3. 写水印文字
NSString *text = @"水印文字";
// [[UIColor whiteColor]set];
// 新建一个UIColor
UIColor *color = [UIColor colorWithRed:1 green:1 blue:0 alpha:0.5];
[color set];
[text drawInRect:CGRectMake(0, 170, 300, 20) withFont:[UIFont systemFontOfSize:12] lineBreakMode:NSLineBreakByWordWrapping alignment:NSTextAlignmentRight];
// 从图像上下文中获得当前绘制的结果，并生成图像
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
// 4. 关闭上下文
UIGraphicsEndImageContext();
// 5. 把图像归档，可以用这个方法来做缩略图
// NSArray *documents = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
// NSString *path = [documents[0]stringByAppendingPathComponent:@"image.png"];
NSString *path = @"/Users/apple/Desktop/image.png";
NSData *imageData = UIImagePNGRepresentation(result);
[imageData writeToFile:path atomically:YES];
return result;
}
七、模拟备忘录线条
#pragma mark - 创建背景图像
- (UIImage *)createBGImage
{
// 1. 创建上下文
UIGraphicsBeginImageContext(CGSizeMake(320, 30));
// 2. 绘制矩形
CGRect rect = CGRectMake(0, 0, 320, 30);
[[UIColor yellowColor]set];
UIRectFill(rect);
// 3. 绘制矩形作为下面的线条，2个点高的矩形
CGRect rect2 = CGRectMake(0, 29, 320, 1);
[[UIColor brownColor]set];
UIRectFill(rect2);
// 4. 从context中获取绘制的图像
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 5. 关闭上下文
UIGraphicsEndImageContext();
// 6. 返回结果
return image;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.textView setBackgroundColor:[UIColor colorWithPatternImage:[self createBGImage]]];
}
八、生成PDF文件
#pragma mark - 生成PDF文件
- (void)createPDFFile
{
// 1. 上下文
// 1) 路径
// 2) 大小，指定为空，那么使用612 * 792大小作为pdf文件的页面大小
// 3) dict
UIGraphicsBeginPDFContextToFile(@"/Users/apple/Desktop/demo.pdf", CGRectZero, nil);
// 2. 写入内容
// 在pdf里面是有页面的，一个页面一个页面的写入的
// 建立PDF页面
// 一个页面最多能够写入两张图片，因此写入6张图片需要三个页面
for (NSInteger i = 0; i < 6; i++) {
if (i % 2 == 0) {
UIGraphicsBeginPDFPageWithInfo(CGRectMake(0, 0, 612, 792), nil);
}
// 生成UIImage
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"NatGeo%02d.png", i + 1]];
// 写入
[image drawAtPoint:CGPointMake(0, 400 * (i % 2))];
}
// 3. 关闭上下文
UIGraphicsEndPDFContext();
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self createPDFFile];
}
类似资料：