Quartz2D的基本用法
Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz2D的基本用法。
1、自定义view的步骤
-
新建一个类,继承自UIView
-
实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中
-
取得跟当前view相关联的图形上下文
-
绘制相应的图形内容
-
利用图形上下文将绘制的所有内容渲染显示到view上面
2、Quartz2D绘图的代码步骤
-
获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); -
拼接路径(下面代码是搞一条线段)
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100); -
绘制路径
CGContextStrokePath(ctx); // CGContextFillPath(ctx);
3、常用拼接路径函数
-
新建一个起点
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y); -
添加新的线段到某个点
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y); -
添加一个矩形
void CGContextAddRect(CGContextRef c, CGRect rect); -
添加一个椭圆
void CGContextAddEllipseInRect(CGContextRef context, CGRect rect); -
添加一个圆弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise);
4、常用绘制路径函数
-
Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode) -
绘制空心路径
void CGContextStrokePath(CGContextRef c) -
绘制实心路径
void CGContextFillPath(CGContextRef c)
提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的
5、图形上下文栈的操作
-
将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
void CGContextSaveGState(CGContextRef c) -
将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)
6、代码实例
- (void)drawRect:(CGRect)rect { // Drawing code // 1.获得图形上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.拼接图形(路径) // 设置线段宽度 CGContextSetLineWidth(ctxR, 10); // 设置线段头尾部的样式 /** kCGLineCapButt, kCGLineCapRound, //圆角 kCGLineCapSquare */ CGContextSetLineCap(ctxR, kCGLineCapRound); // 设置线段转折点的样式 /** kCGLineJoinMiter, kCGLineJoinRound, //圆角 kCGLineJoinBevel */ CGContextSetLineJoin(ctxR, kCGLineJoinRound); /** 第1根线段 **/ // 设置颜色 CGContextSetRGBStrokeColor(ctxR, 1, 0, 0, 1); // 设置一个起点 CGContextMoveToPoint(ctxR, 10, 10); // 添加一条线段到(100, 100) CGContextAddLineToPoint(ctxR, 100, 100); // 渲染一次 CGContextStrokePath(ctxR); /** 第2根线段 **/ // 设置颜色 CGContextSetRGBStrokeColor(ctxR, 0, 0, 1, 1); // 设置一个起点 CGContextMoveToPoint(ctxR, 200, 190); // 添加一条线段到(150, 40) CGContextAddLineToPoint(ctxR, 150, 40); CGContextAddLineToPoint(ctxR, 120, 60); // 3.渲染显示到view上面 CGContextStrokePath(ctxR); }
- (void)drawRect:(CGRect)rect { drawForRect(); } /** * 画四边形 */ void drawForRect() { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画矩形 CGContextAddRect(ctxR, CGRectMake(10, 10, 150, 100)); // set : 同时设置为实心和空心颜色 // setStroke : 设置空心颜色 // setFill : 设置实心颜色 [[UIColor whiteColor] set]; // CGContextSetRGBFillColor(ctxR, 0, 0, 1, 1); // 3.绘制图形 CGContextFillPath(ctxR); } /** * 画三角形 */ void drawTriangle() { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画三角形 CGContextMoveToPoint(ctxR, 0, 0); CGContextAddLineToPoint(ctxR, 100, 100); CGContextAddLineToPoint(ctxR, 150, 80); // 关闭路径(连接起点和最后一个点) CGContextClosePath(ctxR); // CGContextSetRGBStrokeColor(ctxR, 0, 1, 0, 1); // 3.绘制图形 CGContextStrokePath(ctxR); }
- (void)drawRect:(CGRect)rect { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画1/4圆 CGContextMoveToPoint(ctxR, 100, 100); CGContextAddLineToPoint(ctxR, 100, 150); CGContextAddArc(ctxR, 100, 100, 50, -M_PI_2, M_PI, 1); CGContextClosePath(ctxR); [[UIColor redColor] set]; // 3.显示所绘制的东西 CGContextFillPath(ctxR); } /** * 画圆弧 */ void drawArc() { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画圆弧 // x\y : 圆心 // radius : 半径 // startAngle : 开始角度 // endAngle : 结束角度 // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针) CGContextAddArc(ctxR, 100, 100, 50, M_PI_2, M_PI, 0); // 3.显示所绘制的东西 CGContextFillPath(ctxR); } /** * 画圆 */ void drawCircle() { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画圆 CGContextAddEllipseInRect(ctxR, CGRectMake(50, 10, 100, 100)); CGContextSetLineWidth(ctxR, 10); // 3.显示所绘制的东西 CGContextStrokePath(ctxR); }
- (void)drawRect:(CGRect)rect { drawImage(); } void drawImage() { // 1.取得图片 UIImage *image = [UIImage imageNamed:@"me"]; // 2.画 // [image drawAtPoint:CGPointMake(50, 50)]; // [image drawInRect:CGRectMake(0, 0, 150, 150)]; [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)]; // 3.画文字 NSString *str = @"为xxx所画"; [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil]; } /** * 画文字 */ void drawText() { // 1.获得上下文 CGContextRef ctxR = UIGraphicsGetCurrentContext(); // 2.画矩形 CGRect cubeRect = CGRectMake(50, 50, 100, 100); CGContextAddRect(ctxR, cubeRect); // 3.显示所绘制的东西 CGContextFillPath(ctxR); // 4.画文字 NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi"; // [str drawAtPoint:CGPointZero withAttributes:nil]; NSMutableDictionary *attrs = [NSMutableDictionary dictionary]; // NSForegroundColorAttributeName : 文字颜色 // NSFontAttributeName : 字体 attrs[NSForegroundColorAttributeName] = [UIColor redColor]; attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50]; [str drawInRect:cubeRect withAttributes:attrs]; }