9、iOS开发之 Quartz-2d

/**
 摘要：
 1.掌握Quartz2d的图形绘制API
 2.掌握图形上下文与输出目标
 */

一、画线drawLine

1.获取上下文件UIGraphicsGetCurrentContext();
2.设置起点CGContextMoveToPoint(ctx, 10, 10);
3.添加连接点AddLineToPoint(ctx, 110, 10);
4.渲染CGContextStrokePath(ctx);
5.设置线宽CGContextSetLineWidth(ctx, 3);
6.设置线的颜色CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);//红色
7.再添加1个连接点完成矩形绘制
8.设置线的首尾样式CGContextSetLineCap(ctx, kCGLineCapButt);
9.设置线的连接样式CGContextSetLineJoin(ctx, kCGLineJoinRound);

二、画矩形drawRectangle

// 1.获取上下文件UIGraphicsGetCurrentContext();
// 2.设置起点,并连接四个点成为矩形
CGContextMoveToPoint(ctx, 10, 10)
AddLineToPoint(ctx, 110, 10);
AddLineToPoint(ctx, 110, 110);
AddLineToPoint(ctx, 110, 10);
AddLineToPoint(ctx, 10, 10);
// 3.画空心CGContextStrokePath(ctx)
// 4.画实心CGContextFillPath(ctx);
// 5.使用CGContextStrokeRect();/ CGContextFillRect(); 画矩形

三、画三角形triangle

// 1.获取上下文件UIGraphicsGetCurrentContext();
// 2.设置起点,并连接三个点
// 3.关闭路径CGContextClosePath(ctx);
// 4.渲染CGContextStrokePath(ctx)

四、画圆circle

CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 100));

五、画弧arc

//x y 圆点
//radius 半径
//startAngle 开始角度
//endAngle 结束角度
//clockwise 圆弧的伸展方向 0 顺时针 1 逆时针
CGContextAddArc(context, 100, 100, 50, 0, M_PI_2, 1);
//1顺时针 0

六、画扇形sector

//设置扇形路径的起点
CGContextMoveToPoint(context, 100, 100);
CGContextAddArc(context, 100, 100, 50, M_PI_4, 3 * M_PI_4, 0);
CGContextClosePath(context);

七、画文字和图片

// 调用文字的drawAtPoint:或drawInRect方法文字可设置属性
@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor redColor]};

图片

// 可view上画图片调用drawAtPoint:或drawInRect方法
// drawAsPatternInRect可以平铺图片

八、画进度圈

/**
 目标：
 自定View的drawRect方法会在view显示的时候调用一次
 如果有重绘，需要调用view的setNeedsDisplay方法，就会调用drawRect方法，进行重绘
 */

[画弧进度]

1.自定义一个ProgressCirle的view
2.在storyboard的箭头所指的控制器添加一个View,并将classes指向ProgressCirle
3.在自定义view里添加一个float 类型的progress属性
4.在ProgressCirle的drawRect方法中画文字和进度文字

(1)根据progress格式化要显示的文本//eg.30%
(2)先使用NSString的【boundingRectWithSize:options:attributes:context:】计算文字的尺寸
(3)再计算文字显示的x\y值
(4)调用NSString的drawInRect 画文字

//画弧

(5)计算要画弧的位置 2π *progress
(6)调用CGContextAddArc(ctx, x, y,radius, startAngle, endAngle,clockwise)画弧
起始位置为0
(7)然后再设置起始位置为-45度，重新计算结束位置

5.在控制器的view中，设置ProgressCirle的进度为0.5

6.添加一个UISlider到控制器view,并设置UISlider的最大值为1

7.监听UISlider的事件，并改变ProgressCirle的progress属性

8.重写ProgressCirle的setProgress方法，并调用[self setNeedsDisplay]实现重绘

九、饼状图

/**目标
 *掌握饼状图的绘制原理
 */

步骤:

1.自定义一个饼状View(PieView),添加到控制器View上
2.添加PieView的一个类型为数据的sections属性，存储所有分类的个数，并添加一个颜色数组，用于存储颜色
3.在drawRect方法中遍历sections的大小
4.遍历sections中的个数，进行总数绘总
5.定义一个 "扇形的起始位置"
6.设置路径中心点
7.遍历sections，计算数组中每一个元素占用总数的比例
8.根据比例计算饼状的结束位置，并设置 "弧" 路径
9.渲染扇形在UIView上，实现实心的扇形
8.给 "扇形的起始位置" 重新赋值，进入下一个循环

十、图形上下文栈
“什么是图形上下文栈？”

(1)将当前的图形上下文状态copy一份到栈，这就是 '图形上下文栈'
(2)上下文的什么状态呢?比如 颜色、线宽，这些都是上下文的状态

“图形上下文栈有什么用？”

(1)恢复最初的绘图状态

“图形上下文栈API”

1.保存图形上下文状态使用CGContextSaveGState方法
2.恢复图形上下文状态使用CGContextRestoreGState方法
3.CGContextRestoreGState不能调用多次，要看图形上下文栈有多少个上下文状态可恢复

十、矩阵操作

/*目标
 *掌握在图层上下文中的平稳、缩放、旋转
 */
//平移
CGContextTranslateCTM(ctx, 0, -80);
//缩放 - xy方向缩放到原来的几倍
CGContextScaleCTM(ctx, 1.0, 1.0);
//旋转 沿左上角旋转
CGContextRotateCTM(ctx,-M_PI * 0.1);

十一、裁剪圆形图片

/*掌握CGContextClip方法的作用,这个方法是裁剪 "路径" 之外多余的部分*/

“裁剪圆形图片”步骤

1.自定义一个CircleImageView控件，在drawRect中，获取上下文，往上下文中添加一个圆的路径
2.调用CGContextClip的方法，裁剪路径之外多余的部分
3.自定义的控制中，添加一个imageName属性，然后回到drawrect方法画图
4.画圆的边框，使用CGContextAddEllipseInRect添加圆的路径，并使用CGContextStrokePath画空心圆

十二、动画(气球)

/**
 *1.掌握定时器NSTimer和CADisplayLink的使用
 *2.CADisplayLink多用于UI的刷新，1/60秒调用一次
 *3.CADisplayLink要添加到主运行循环才能使用
 */

"一个气球下降"步骤
1.自定义一个BalloonView，添加一个position属性，用于记录气球的位置
2.在drawRect方法中，创建一张图片，并画出来
3.在awakeFromNib中，使用定时器NSTimer实现气球下降功能效果
[NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES]

4.在drawRect如果气球的位置到达底部，从顶部重新开始下降
5.在awakeFromNib中，使用定时器CADisplayLink实现气球下降功能效果
(1)创建CADisplayLink对象，调用addToRunLoop,定时器就会执行
(2)CADisplayLine有个duration属性，代理定时器调用的间隔时间，不能改