当前位置:首页 > 企业简介 >

IOS开发—Quartz 2D介绍

编辑:北京盛典时光文化传媒有限公司时间:2017-09-07 13:33:04阅读次数:2
IOS开发—Quartz 2D介绍 Quartz 2D学习记录 Quartz 2D简单介绍 一、什么是Quartz 2D

Quarz 2D是一个二维绘画引擎,同时支持ios和mac,其API是Core Graphics框架的,是纯C语言的。IOS系统提供的大部分控件的内容都是通过Quartz 2D画出来的,因此Quartz 2D的一个很重要的价值是:自定义view(自定义UI控件)。

二、一个重要的概念:图形上下文

图形上下文(Graphics context)是一个CGContextRef数据,其作用是:

保存绘图信息、绘图属性 绘制目标图案 输出绘制好的图案到输出目标去,即渲染到什么地方去(可以是PDF文件、bitmap或者显示器的窗口上)

这里写图片描述

三、自定义view,即绘制view

在view中实现- (void)drawRect:(CGRect)rect方法,然后在方法中:
1. 取得跟当前view相关联的图形上下文;
2. 绘制相应的图形内容
3. 利用图形上下文将绘制好的图形内容渲染显示到view上面

Quartz 2D简单使用 代码示例 //绘制步骤:1、获取当前视图的图形上下文 2、开始绘图 3、渲染绘制内容 /**绘制直线**/ //1、获取当前视图的图形上下文(图形上下文决定绘制的输出目标) CGContextRef ctx = UIGraphicsGetCurrentContext(); //2、开始绘图 //设置起点 CGContextMoveToPoint(ctx, 20, 50); //设置终点 CGContextAddLineToPoint(ctx, 300, 50); //设置线条属性 //设置颜色 CGContextSetStrokeColorWithColor(ctx, [UIColor purpleColor].CGColor); //另外一种设置颜色的方式 // [[UIColor purpleColor] set]; //设置线条宽度 CGContextSetLineWidth(ctx, 10); //设置线条起点和终点的样式为圆角 CGContextSetLineCap(ctx, kCGLineCapRound); //3、将画布上绘制的内容渲染到view的layer上 CGContextStrokePath(ctx); /**绘制三角形**/ //设置起点 CGContextMoveToPoint(ctx, 150, 80); //设置第一个拐点 CGContextAddLineToPoint(ctx, 220, 150); //设置第二个拐点 CGContextAddLineToPoint(ctx, 80, 150); //设置第三个点(终点) // CGContextAddLineToPoint(ctx, 150, 80); //可以用下面方法代替 缝合起点和终点 CGContextClosePath(ctx); //设置线条的拐点转角样式为圆角 CGContextSetLineJoin(ctx, kCGLineJoinRound); //渲染 CGContextStrokePath(ctx); /**绘制空心四边形**/ CGContextAddRect(ctx, CGRectMake(40, 200, 200, 100)); //设置空心(线条)颜色 // CGContextSetStrokeColorWithColor(ctx, [UIColor lightGrayColor].CGColor); //也可以这样设置颜色 [[UIColor lightGrayColor] setStroke]; //设置线条宽度 CGContextSetLineWidth(ctx, 10); //渲染(空心的) CGContextStrokePath(ctx); /**绘制实心四边形**/ CGContextAddRect(ctx, CGRectMake(40, 320, 200, 100)); //设置实心颜色 // CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor); [[UIColor orangeColor] setFill]; //渲染(实心的) CGContextFillPath(ctx); /**绘制圆(可以用绘制椭圆的方式画圆)**/ //参数依次为圆心x,圆心y,半径,开始位置的弧度,结束位置的弧度,绘制路径(1为顺时针,0为逆时针) //由于Quartz2D的坐标系是x轴向右,y轴向上,不同于UIKit坐标系。因此在不将Quartz2D坐标系翻转的情况下,画出来的图形是与原图形关于x轴对称的。 CGContextAddArc(ctx, 100, 520, 50, 0, M_PI_2, 1); CGContextStrokePath(ctx); //空心 // CGContextFillPath(ctx); //实心 /**绘制椭圆**/ CGContextAddEllipseInRect(ctx, CGRectMake(230, 400, 120, 200)); CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor); CGContextStrokePath(ctx); /**绘制弧线**/ // CGContextAddArcToPoint(ctx, 100, 200, 100, 200, 50); CGContextAddArc(ctx, 200, 200, 100, 0, M_PI, 1); CGContextSetStrokeColorWithColor(ctx, [UIColor cyanColor].CGColor); CGContextStrokePath(ct 绘制结果

这里写图片描述

图形上下文栈 一、绘制原理

举个例子,假如要绘制两条线,一条红色一条默认的黑色。先绘制红色线,绘制完毕渲染上去后,再去绘制第二条。绘制第二条的时候如果不重新设置绘画颜色,那么绘制出来的线条也是红色的。也就是说,绘制属性如果不对其清空(即重新设置)是默认保留在图形上下文上的。因此可以这样理解:
一个图形上下文有3块区域,分别是绘制属性,图像信息,绘制区域:

绘制属性:包括画笔的颜色、线条宽度、是否圆角等等; 绘图信息:比如要绘制一条直线,那么保存了线条的起点和终点,绘制圆,保存了半径、中点坐标、起点终点、方向等等。也就是说,绘图信息中保存的是绘图路径,这个在下面会详细介绍。 绘图区域:这个区域不是指视图上的区域,而是图形上下文上的绘制区域,因为绘画是在图形上下文上绘制好之后才被渲染到视图的制定区域上的。 二、保存图形上下文绘制属性

前面说过如果要绘制多个不同属性的图形,那么每次渲染好一个图形后就要重新设置绘制属性,通常绘制多个图形都是这样做的。有时候可能用到一个简单的方法:即在绘制一个图形前先保存当前图形上下文中的绘制属性,这个绘制属性会被保存到图形上下文栈上,如果下次需要绘制同样属性的图形,直接把这个绘制属性从栈顶取出来(恢复)就好了。需要注意的是保存一次只能取一次,可以保存多次,但是每次只从栈顶取。

代码示例 /**保存绘制属性(以绘制3条线为例,第一条第三条属性一致)**/ //第一条 CGContextMoveToPoint(ctx, 20, 300); CGContextAddLineToPoint(ctx, 200,300); //设置绘制属性 CGContextSetLineWidth(ctx, 10); CGContextSetLineCap(ctx, kCGLineCapRound); CGContextSetStrokeColorWithColor(ctx, [UIColor orangeColor].CGColor); CGContextStrokePath(ctx); //第二条线 //先保存当前的绘制属性 CGContextSaveGState(ctx); CGContextMoveToPoint(ctx, 20, 400); CGContextAddLineToPoint(ctx, 200, 400); //设置新的绘制属性 CGContextSetLineWidth(ctx, 5); CGContextSetLineCap(ctx, kCGLineCapButt); CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor); CGContextStrokePath(ctx); //第三条线 //取出(恢复)之前保存的绘制属性 CGContextRestoreGState(ctx); CGContextMoveToPoint(ctx, 20, 500); CGContextAddLineToPoint(ctx, 200, 500); CGContextStrokePath(ctx); 绘制结果

这里写图片描述

矩阵操作 一、矩阵操作介绍

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆门SEO http://jingmen.4567w.com

上一篇:MELP算法的Python实现(三) 下一篇:最后一页

相关阅读