推送画图绘图基础quartz-2d

1、Quartz 2D绘图千锋iOS教学部学完今天的课程，你将掌握：常用2D绘图函数2D绘图的基本手法图形编程的各种方法UIImageView显示固定图像UIImageView.startAnimating轮转显示多份图像MediaPlayer显示视频Quartz显示不固定的动态图像几何图形数据图表股票曲线图数据函数曲线高级动画效果Quartz 2D 绘图iOS的2D绘图函数库纯函数库核心概念上下文（Context）： 一个UIView中的“画布”路径：画布上的绘图内容线、轮廓、填充模式：绘图状态颜色、线型、填充、裁剪、alpha图形上下文（Context）含义：当前绘图环境图表上下文可以是以下类

2、型：UIView：用以向当前窗口上绘图UIImage：用以向一个UIImage对象绘图PDF文件：用以向一个PDF文件绘图最常用的是前两种实例1：绘制简单图形创建新工程：View-based application项目名称：logo添加代码- (void)viewDidLoad super viewDidLoad; UIGraphicsBeginImageContext(CGSizeMake(50, 50); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextBeginPath(ctx); CGContextMoveToPoi

3、nt(ctx, 10, 10); CGContextAddArc(ctx, 10, 10, 10, 0, 2 * M_PI, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx); UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImageView *view = UIImageView alloc initWithImage:img; view.frame = CGRec

4、tMake(50, 50, 50, 50); self.view addSubview:view;效果绘图函数的效果：函数讲解UIGraphicsBeginImageContext创建一个基于UIImage的图形上下文UIGraphicsGetCurrentContext取出“当前”上下文 也就是在上一句中刚刚创建的上下文返回值为CGContextRef 类型CGContextBeginPath开始向上下文中增加路径：即开始绘图CGContextAddArc画圆CGContextSetRGBFillColor设置填充颜色函数讲解（续）CGContextFillPath填充一个区域UIGraph

5、icsGetImageFromCurrentImageContext从上下文中，取出UIImage对象UIGraphicsEndImageContext绘图完毕，撤销上下文CGContextAddArc解释CGContextAddArc(CGContextRefc,CGFloatx,CGFloaty,CGFloatradius,CGFloatstartAngle,CGFloatendAngle,intclockwise)CGContextRef: 图形上下文x,y: 开始画的坐标radius: 半径startAngle, endAngle: 开始的弧度,结束的弧度clockwise: 画的方向

6、(顺时针,逆时针)练习：重复使用UIImage基于刚才的代码，在屏幕上生成3行、3列提示绘图过程不变UIImage可以多次使用答案- (void)viewDidLoad int i, j; super viewDidLoad; UIGraphicsBeginImageContext(CGSizeMake(50, 50); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextBeginPath(ctx); CGContextMoveToPoint(ctx, 10, 10); CGContextAddArc(ctx, 10, 10,

7、 10, 0, 2 * M_PI, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx); UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();答案for (i = 0; i 3; i+) for (j = 0; j 3; j+) UIImageView *view = UIImageView alloc initWithImage:img;view.frame = CGRectMa

8、ke(i * 50, j * 50, 50, 50);self.view addSubview:view;view release; 体会：使用2D绘图的优势比使用固定的图片更灵活：可以方便的修改绘图颜色、个数、大小、外观练习：随机图形生成200个圆，随机设置大小、颜色、位置画饼图PI/2 CGFloat x = 20.0f, y = 20.0f, radius = 20.0f; CGContextBeginPath(ctx); CGContextMoveToPoint(ctx, x, y); / 必须 CGContextAddArc(ctx, x, y, radius, 0, -M_PI/2

9、.0f, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx);附注：“图形上下文”的深入理解iOS中，图形上下文是堆栈结构每次使用UIGraphicsBeginImageContext新建的图形上下文位于堆栈顶端UIGraphicsGetCurrentContext就是取出当前栈顶元素，也就是返回最后一次新建的上下文UIGraphicsEndImageContext就是去除当前栈顶元素，也就是撤销最后一次建立的上下文绘图函数CGContext各种形状函数参数说明CGContextAddArcctx, x

10、, y, 半径, 起始角度，结束角度，顺时针/逆时针画圆弧CGContextAddRectctx, CGRect画矩形CGContextFillRectctx, CGRect画实心矩形CGContextMoveToPointCGContextAddLineToPointctx, x1, y1ctx, x2, y2画直线颜色两种颜色笔划颜色填充颜色函数参数说明CGContextSetRGBStrokeColorctx, red, green, blue, alpha设置笔划颜色CGContextSetRGBFillColorctx, red, green, blue, alpha设置填充颜色线型

11、画线的形状：线的宽度函数参数说明CGContextSetLineWidthctx, width设置画线的宽度练习：画车标代码- (void) cars UIGraphicsBeginImageContext(CGSizeMake(200, 200);CGContextRef ctx = UIGraphicsGetCurrentContext();CGContextSetRGBFillColor(ctx, 1, 0, 0, 0.5);CGContextSetRGBStrokeColor(ctx, 1, 1, 0, 1);CGContextSetLineWidth(ctx, 5.0);/* 背景

12、*/CGContextFillRect(ctx, CGRectMake(0, 0, 200, 200);/* 边框 */CGContextAddRect(ctx, CGRectMake(0, 0, 200, 200);代码/* “H”形状 */CGContextMoveToPoint(ctx, 60, 0);CGContextAddLineToPoint(ctx, 60, 200);CGContextMoveToPoint(ctx, 140, 0);CGContextAddLineToPoint(ctx, 140, 200);CGContextMoveToPoint(ctx, 60, 100)

13、;CGContextAddLineToPoint(ctx, 140, 100);CGContextStrokePath(ctx);UIImage *img = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();UIImageView *view = UIImageView alloc initWithImage:img autorelease;view.frame = CGRectMake(100, 100, 200, 200);self.view addSubview:view;练习：画一个国际象棋

14、盘提示：画8x8个矩形代码for (i = 0; i 8; i+)for (j = 0; j 8; j+)if (i % 2) = (j % 2)CGContextSetRGBFillColor(ctx, 0, 0, 0, 1);else CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextFillRect(ctx, CGRectMake(i * 30, j * 30, 30, 30);练习：画象棋盘深入理解：路径CGPathRef绘图的过程 创建新路径画图：移动画笔添加各种路径结束路径喷漆上色轮廓内部路径路径 要绘制的内容，是一组连续的形状线

15、段圆弧矩形喷漆上色轮廓填充内部函数参数说明CGContextStrokePathctx绘制轮廓CGContextFillPathctx绘制内部练习：直方图提示：背景两条直线三个矩形核心代码/* 背景 */CGContextSetRGBFillColor(ctx, 0, 0.2, 0, 0.5);CGContextFillRect(ctx, CGRectMake(0, 0, 300, 240);CGContextSetRGBStrokeColor(ctx, 0, 0, 0, 1);/* y轴 */CGContextMoveToPoint(ctx, 10, 20);CGContextAddLine

16、ToPoint(ctx, 10, 220);/* x轴 */CGContextMoveToPoint(ctx, 10, 220);CGContextAddLineToPoint(ctx, 290, 220);CGContextStrokePath(ctx);核心代码/* 方柱：3个 */CGContextSetRGBFillColor(ctx, 0, 0.8, 0.1, 0.5);CGContextFillRect(ctx, CGRectMake(40, 120, 50, 100);CGContextSetRGBFillColor(ctx, 0.9, 0.2, 0.1, 0.5);CGCont

17、extFillRect(ctx, CGRectMake(120, 160, 50, 60);CGContextSetRGBFillColor(ctx, 0.2, 0.4, 0.9, 0.5);CGContextFillRect(ctx, CGRectMake(200, 50, 50, 170);绘制文字Text主要函数文字颜色：使用CGContextSetRGBFillColor设置函数参数说明CGContextSelectFontctx, font_name, size, encoding选择字体CGContextShowTextAtPointctx, x, y, str, len绘制字体练

18、习：给直方图加上标题CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextSelectFont(ctx, Helvetica, 20, kCGEncodingMacRoman);CGContextShowTextAtPoint(ctx, 60, 20, Marketing Plan, 14);问题：文字是倒置的？注意：文字坐标变换文字绘图并不使用iPhone的坐标系统，而是以倒置的方式计算坐标解决：坐标变换将y轴变换为向下方向：CGAffineTransform flip = CGAffineTransformMake(1, 0, 0, -1,

19、0, 0); CGContextSetTextMatrix(ctx, flip);完整的文字绘图代码CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextSelectFont(ctx, Helvetica, 20, kCGEncodingMacRoman);CGAffineTransform flip = CGAffineTransformMake(1, 0, 0, -1, 0, 0);CGContextSetTextMatrix(ctx, flip);CGContextShowTextAtPoint(ctx, 60, 20, Marketing

20、 Plan, 14);文字标题正常！仿射变换AffineTransform已知坐标点A,变换后新坐标系中坐标为B ,则有:B = AMA为1*3的矩阵x,y,1B为 1* 3的矩阵x,y,1M为3*3仿射矩阵单位矩阵/* The identity transform: 1 0 0 1 0 0 . */const CGAffineTransform CGAffineTransformIdentity平移矩阵t = 1 0 0 1 tx ty CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);缩放矩阵t = sx 0 0 sy 0 0 */CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)旋转矩阵t = cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 CGAffineTransform CG