什么是Quartz2D?
Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统
Quartz 2D能完成的工作
绘制图形 : 线条\三角形\矩形\圆\弧等
绘制文字
绘制\生成图片(图像)
读取\生成PDF
截图\裁剪图片
自定义UI控件
在使用Quartz 2D的时候, 其核心步骤:
(1) 获取图形上下文
(2) 画线(矩形,圆,椭圆,圆弧等等)
(3) 添加到图形上下文中
(4) 渲染到界面
例如:
实例 画直线:
/** 画直线 */
- (void)addLine{
// 1 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2 画线
UIBezierPath *path = [[UIBezierPath alloc] init];
// 设置起点
[path moveToPoint:CGPointMake(50, 50)];
// 添加线条
[path addLineToPoint:CGPointMake(100, 100)];
// 设置线条样式
CGContextSetLineWidth(ctx, 5);//线宽
CGContextSetLineCap(ctx, kCGLineCapRound);//线的样式
[[UIColor greenColor] set];//线条颜色
// 3 添加的上下文
CGContextAddPath(ctx, path.CGPath);
// 4 渲染
CGContextStrokePath(ctx);
}
实例画曲线
/**
* 画曲线
*/
- (void)addCurve{
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 画线
UIBezierPath *path = [[UIBezierPath alloc] init];
CGPoint startPoint = CGPointMake(50, 50);
CGPoint endPoint = CGPointMake(200, 20);
CGPoint p = CGPointMake(60, 5);
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:p];
// 添加到上下文中
CGContextAddPath(ctx, path.CGPath);
// 渲染
CGContextStrokePath(ctx);//边渲染
}
实例画三角形
/**
* 画三角形
*/
- (void)addTriangle{
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 画线
UIBezierPath *path = [[UIBezierPath alloc] init];
CGPoint startPoint = CGPointMake(125, 125);
CGPoint midPoint = CGPointMake(10, 240);
CGPoint endPoint = CGPointMake(240, 240);
[path moveToPoint:startPoint];
[path addLineToPoint:midPoint];
[path addLineToPoint:endPoint];
//[path addLineToPoint:startPoint];
//或者(封闭路径)
[path closePath];
//设置边线宽度
CGContextSetLineWidth(ctx, 10);
//设置边线颜色
[[UIColor redColor] setStroke];
//设置内部填充颜色
[[UIColor greenColor] setFill];
// 添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 渲染
//CGContextStrokePath(ctx);//描边
//CGContextFillPath(ctx);//填充
//既描边 又 填充
CGContextDrawPath(ctx, kCGPathFillStroke);
}
其他高级图形:
/**
* 画其他图形
*/
- (void)addOther{
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//画矩形
// UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 100, 100)];
// //设置矩形的圆角(矩形长度的一半为圆)
// path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:5];
//画椭圆(传正方形为圆,长方形为椭圆)
// UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 100)];
//画圆弧(扇型)
CGPoint centerPoint = CGPointMake(120, 120);//圆心
CGFloat radius = 100;//半径
CGFloat startAnglge = 0;//起始角度(圆心的右边)
CGFloat endAnglge = M_PI_2;//结束角度
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:radius startAngle:startAnglge endAngle:endAnglge clockwise:YES];
[path addLineToPoint:centerPoint];
//添加到上下文
CGContextAddPath(ctx, path.CGPath);
//渲染到界面
//CGContextStrokePath(ctx);
CGContextFillPath(ctx);
}
补充UIKit绘图:
/**
* UIKit画图
*/
- (void)drawText{
NSString *text = @"Hello World";
NSDictionary *dict = @{
NSFontAttributeName : [UIFont systemFontOfSize:20],
NSForegroundColorAttributeName : [UIColor redColor],
NSStrokeWidthAttributeName : @5
};
[text drawInRect:CGRectMake(20, 20, 50, 50) withAttributes:dict];
/*
[text drawInRect:textFrame withAttributes:dict]; 会自动换行
[text drawAtPoint:CGPointZero withAttributes:dict]; 不会自动换行
*/
}
UIImage:
UIImage *image = [UIImage imageNamed:@"xxx"];
//画到那个点
[image drawAtPoint:CGPointZero];
//画到那个矩形中
[image drawInRect:CGRectMake(0, 0, 100, 100)];
// 设置裁剪区域,超出裁剪区域的都会被裁剪掉
UIRectClip(CGRectMake(0, 0, 100, 100));
UIImage *pImage = [UIImage imageNamed:@"xxx"];
//平铺画图
[pImage drawAsPatternInRect:rect];