版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- DB2102T 0104-2024 码头无人值守汽车衡物联网消息传输规程
- 浙江省杭州市2016年中考数学试卷(含答案)
- 2024年学校工作计划
- 《 美术馆(博物馆)物业管理服务规范》编制说明
- 山东南山集团东海外国语校2024年中考数学对点突破模拟试卷含解析
- 保定学院《会展安全与危机管理》2023-2024学年第一学期期末试卷
- 宝鸡文理学院《油画静物》2021-2022学年第一学期期末试卷
- 学校“防范学生意外伤害”安全应急演练方案及总结
- 中医适宜技术试题(附答案)
- 新课标2023版高考地理一轮检测三十五从区域认知的视角聚焦自然灾害
- 期中巩固练习(试题)-2024-2025学年统编版(2024)语文一年级上册
- 防风应急预案
- 平均数(教案)-2024-2025学年苏教版四年级上册数学
- 人教版(2024)第三单元-汉语拼音《zcs》教学课件
- 2023-2024学年河南省郑州实验外国语中学八年级(上)月考数学试卷(10月份)含答案
- 4《平平安安回家来》第二课时(教学设计)-一年级道德与法治上册统编版·2024
- 羊肚菌采购协议书模板
- GB/T 4706.27-2024家用和类似用途电器的安全第27部分:风扇的特殊要求
- 部编版初中语文教材目录
- 2024精麻药品培训知识试题库及答案(完整版)
- 人教版道德与法治六年级上册全册单元测试卷课件
评论
0/150
提交评论