iOS笔记13

1

//图形上下文的类型有:

Bitmap Graphics Context(位图上下文)

PDF Graphics Context

Window Graphics Context

Layer Graphics Context(图层上下文,自定义UIView取得上下文就是图层上下文.

UIView之所以能够显示就是因为他内部有一个图层)

Printer Graphics Context

2

//如何自定义UIView,步骤是什么?

首先得要有上下文,有了上下文才能决定把绘制的东西显示到哪个地方去.
其次就是这个上下文必须得和View相关联.才能将内容绘制到View上面.

步骤:
1.要先自定定UIView
2.实现DrawRect方法
3.在DrawRect方法中取得跟View相关联的上下文.
4.绘制路径(描述路径长什么样).
5.把描述好的路径保存到上下文(即:添加路径到上下文)
6.把上下文的内容渲染到View

3

//基本线条绘制

//获取跟View相关联的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

//绘制路径
UIBezierPath *path = [UIBezierPath bezierPath];

//设置起点
[path moveToPoint:CGPointMake(10, 125)];

//添加一根线到某个点
[path addLineToPoint:CGPointMake(200, 125)];

//把路径添加到上下文
CGContextAddPath(ctx,path.CGPath);

//把上下文的内容渲染到View上面.
CGContextStrokePath(ctx);

4

//怎么样设置线的宽度,颜色,样式?

设置这些样式,我们称为是修改图形上下文的状态.

设置线宽:CGContextSetLineWidth(ctx, 20);

设置线段的连接样式: CGContextSetLineJoin(ctx, kCGLineJoinRound);

添加顶角样式:CGContextSetLineCap(ctx, kCGLineCapRound);

设置线的颜色: [[UIColor redColor] setStroke];

5

//如何画曲线?

画曲线方法比较特殊需要一个控制点来决定曲线的弯曲程度.画曲线方法为:
先设置一个曲线的起点
[path moveToPoint:CGPointMake(10, 125)];
再添加到个点到曲线的终点.同时还须要一个controlPoint(控件点决定曲线弯曲的方法程序)
[path addQuadCurveToPoint:CGPointMake(240, 125) controlPoint:CGPointMake(125, 10)];

6

//如何画矩形,圆角矩形?

画矩形直接利用UIBezierPath给我们封装好的路径方法
(x,y)点决定了矩形左上角的点在哪个位置
(width,height)是矩形的宽度高度
bezierPathWithRect:CGRectMake(x, y, width, height)

圆角矩形的画法多了一个参数,cornerRadius
cornerRadius它是矩形的圆角半径.
通过圆角矩形可以画一个圆.当矩形是正方形的时候,把圆角半径设为宽度的一半,就是一个圆.
bezierPathWithRoundedRect:CGRectMake(10, 100, 50, 50) cornerRadius:10

//代码表示:

//CGContextRef ctx = UIGraphicsGetCurrentContext();可以省略

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 100, 100)];

[path fill];// CGContextStrokePath(ctx);

7

//如果画椭圆,圆?

画椭圆的方法为:
前两个参数分别代码圆的圆心,后面两个参数分别代表圆的宽度,与高度.
宽高都相等时,画的是一个正圆, 不相等时画的是一个椭圆
bezierPathWithOvalInRect:CGRectMake(10, 100, 50, 50)

8

//如何利用UIKit封装的上下文进行画图?

直接来个:[path stroke]就可以了.

它底层的实现,就是获取上下文,拼接路径,把路径添加到上下文,渲染到View

9

//如何画圆弧?

首先要确定圆才能确定圆弧,圆孤它就圆上的一个角度嘛

Center:圆心
radius:圆的半径
startAngle:起始角度
endAngle:终点角度
clockwise:Yes顺时针,No逆时针

注意:startAngle角度的位置是从圆的最右侧为0度.

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125)
radius:100
startAngle:0
endAngle:M_PI * 2
clockwise:YES];

10

//如果画扇形.

画扇形的方法为:先画一个圆孤再添加一个一根线到圆心,然后关闭路径.

关闭路径就会自动从路径的终点到路径的起点封闭起下

用填充的话,它会默认做一个封闭路径,从路径的终点到起点.

关闭路径,

[path closePath];

[path fill];

11

//下载进条.setNeedsDisplay(重绘)

1.搭建界面.

2.拖动滑竿的时候让他里面的能够跟着我的拖动,数字在改变.
数字改变时有一个注意点, 就是要显示%,它是一个特殊的符号,要用两个%%代表一个%

3.拖动滑竿的时候就是在上面画弧.
从最上面,按顺时针画,所以,它的起始角度是-90度.结束角度也是-90度
也是从起始角度开始画,
起始角度-90度, 看你下载进度是多少
假如说你下载进度是100,就是1 * 360度
也就是说这个进度占你360度多少分之一

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGPoint center = CGPointMake(50, 50);
CGFloat radius = rect.size.width * 0.5;
CGFloat startA = -M_PI_2;
CGFloat endA = -M_PI_2 + M_PI * 2 * progress;

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:startA
endAngle:endA
clockwise:YES];

要获得Progress的值,这个进度值没有, 所以要传进来才能画.弄一个成员变量
要在值改变的时候就要传进来.
要拿到ProgressView才能够传进来,所以要拖线,拿到ProgressView
所有都做好的, 发现没有画圆孤?
为什么?
问题:drawRect方法总共调用多少次?
总共就调用一次, 第一次Progress为0,以后都不会执行了
解决:每次传的时候,就要画一次,
重写Progress方法
-(void)setProgress:(CGFloat)progress{
_progress = progress;
手动调用drawRect方法, 让它重新绘制
[self setNeedsDisplay];
}
运行发现还是不画,为什么?
原因:drawRect方法是不能手动调用,因为在drawRect方法中才能获取跟View相关联的上下文
系统在调用DrawRect方法时,会自动帮你创建一个跟View相关联的上下文,并且传递给它.
自己调用的,没有给drawRect方法传递上下文.所以在draw方法中拿不到上下文.

解决办法:想要重绘,调用[self setNeedsDisplay];
告诉系统重新绘制View,系统就会自动帮你调用drawRect方法,系统在调用
drawRect方法,它会帮你创建上下文

12

//画饼图

//抽取代码:
假设他给一组数据
NSArray datas =  @[@25,@25,@50];
把数组遍历出来

NSArray *datas =  @[@25,@25,@50];

CGPoint center = CGPointMake(125, 125);
CGFloat radius = 100;
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;

for (NSNumber *number in datas) {

startA = endA;
angle = number.intValue / 100.0 * M_PI * 2;
endA = startA + angle;

描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:startA
endAngle:endA
clockwise:YES];

[path addLineToPoint:center];
[[self randomColor] set];
[path fill];

}

- (UIColor *)randomColor{
CGFloat r = arc4random_uniform(256)/ 255.0;
CGFloat g = arc4random_uniform(256)/ 255.0;
CGFloat b = arc4random_uniform(256)/ 255.0;
return [UIColor colorWithRed:r green:g blue:b alpha:1];

}

13

//如何画文字?

[str drawAtPoint:CGPointZero withAttributes:nil];

14.

//如何添加绘制文字属性?（NSShadow、NSShadowAttributeName）

//创建一个可变的字典,设置key,value

NSMutableDictionary *dict = [NSMutableDictionary dictionary];

//字体

dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];

//颜色

dict[NSForegroundColorAttributeName] = [UIColor redColor];

//设置边框颜色

dict[NSStrokeColorAttributeName] = [UIColor redColor];

dict[NSStrokeWidthA
4000
ttributeName] = @1;

//阴影

NSShadow *shadow = [[NSShadow alloc] init];

shadow.shadowOffset = CGSizeMake(10, 10);

shadow.shadowColor = [UIColor greenColor];

shadow.shadowBlurRadius = 3;

dict[NSShadowAttributeName] = shadow;

15

//文字 :drawAtPoint:和drawInRect:的区别?

drawAtPoint:不能够自动换行

drawInRect:能够自动换行

16

//在绘制图片过程当中.drawAtPoint:和drawInRect:两个方法的区别?

drawAtPoint:绘制出来的图图片跟图片的实际尺寸一样大

drawInRect:使用这个方法绘制出来的图片尺寸会和传入的rect区域一样大.

17

//如果进行平铺图片?

[image drawAsPatternInRect:rect];

18

//如何选用UIKit提供的方法快速画一个矩形? UIRectFill(rect);

快速的用矩形去填充一个区域

UIRectFill(rect);

19

//如何利用UIKit裁剪一个区域?

UIRectClip(CGRectMake(0, 0, 50, 50));

这个方法必须要设置好裁剪区域,才能有裁剪

20

//-模仿系统的UIImageView

具体代码实现:
- (instancetype)initWithImage:(UIImage *)image{
if (self = [super init]) {
self.frame = CGRectMake(0, 0, image.size.width, image.size.height);
_image = image;
}
return self;
}

-(void)setImage:(UIImage *)image{
_image = image;
[self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
[_image drawInRect:rect];
}

21

//定时器,雪花

//具体实现代码如下:

-(void)awakeFromNib{
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self
selector:@selector(setNeedsDisplay)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

}

- (void)drawRect:(CGRect)rect {
if(_snowY > rect.size.height){
_snowY = 0;
}
UIImage *image = [UIImage imageNamed:@"雪花"];
[image drawAtPoint:CGPointMake(0, _snowY)];
_snowY += 10;
}

22

//CADisplayLink和NSTime [NSRunLoop mainRunLoop]

//CADisplayLink和NSTime的选择

首先要了解setNeedsDisplay

setNeedsDisplay底层会调用DrawRect方法重绘.

但是它不是立马就进行重绘.它仅仅是设置了一个重绘标志,等到下一次屏幕刷新的时候才会调用DrawRect方法.

如果使用NSTime的话,假设是0.01调用一次重绘.假设屏幕0.02秒的时候它才刷新一次.中间就会等0.01秒.

也就是每次都会等0.01秒这样累加上去.让变的越来越卡顿.

使用CADisplayLink时,它的定时器方法就是屏幕每次刷新的时候就会调用(通常屏幕一秒钟刷新60次)

它和setNeedsDisplay调用DrawRect方法的时机正好吻合,不会出间等待间隔.不会出现屏幕卡顿现象.

//如何使用CADisplayLink添加定时器?

Target:哪个对象要监听方法.

selector:监听的方法名称.

CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self

selector:@selector(setNeedsDisplay)];

想要让CADisplayLink工作,必须得要把它添加到主运行循环.

只要添加到主运行循环, 跟模式没有关系

[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

23

//图形上下文状态栈

1.如何把上下文状态保存到上下文状态栈?

CGContextSaveGState(ctx);

2.如何从上下文状态栈中取出上下文状态?

CGContextRestoreGState(ctx);

24

//上下文的矩阵操作

上下文的矩阵操作其实就是修改上下文的形变,
主要有以下几种
平移
CGContextTranslateCTM(ctx, 100, 100);
旋转
CGContextRotateCTM(ctx, M_2_PI);
缩放
CGContextScaleCTM(ctx, 0.5, 0.5);
注意:上下文操作必须得要在添加路径之前去设置

25

//给图片添加水印、图片上下文

1.如何开启一个图片上下文?

size:开启多大的上文

opaque:不透明度

scale:缩放上下文.

UIGraphicsBeginImageContextWithOptions(image.size, YES, 0);

2.如何从图片上下文当中生成一张图片?
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

3.如何关闭上下文?
UIGraphicsEndImageContext();

26

//简单圆形图片裁剪

裁剪图片思路.
开启一个图片上下文.
上下文的大小和原始图片保持一样.以免图片被拉伸缩放.
在上下文的上面添加一个圆形裁剪区域.圆形裁剪区域的半径大小和图片的宽度一样大.
把要裁剪的图片绘制到图片上下文当中.
从上下文当中取出图片.
关闭上下文.

1.如何设置圆形路径?
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:
CGRectMake(0, 0, image.size.width, image.size.width)];

2.如何把一个路径设为裁剪区域?
[path addClip];

27

//用RGB设置颜色的相关知识

随机颜色:alpha通道它的取值范围是0-255;

OC里面的取值范围只能是0到1,把它 / 255.0就让它到这个范围了,

arc4random_uniform(256)随机产生 0 - 255的数.

颜色通道它的取值范围是0 到 255.

所以说要把0 到 255转换成0 到 1

直接是 0 ~ 255 / 255.0就可以了.

刚好是255就是255 / 255.0 就是1,

刚才是0 就是 0 / 255.0 就是0.

28

//文字属性的字典 Attributes（没笔记）