Core Graphics
Quartz 2D

所有的控件, 都是通过该方法将自身绘制出来的

- (void)drawRect:(CGRect)rect {
    // Drawing code
}

以上方法只有自定义绘图的时候才重写这个方法
一个空实现会影响动画执行的性能

图形上下文 (方便一处绘制, 到底画)
在drawRect方法(本身就是设计来给你绘图的)当中, 系统已经为你创建好了可用的上下文环境

    CGContextRef context = UIGraphicsGetCurrentContext();—>表示获得上下文

创建一个可变的路径
CGMutablePathRef mutablePath = CGPathCreateMutable();

在该可变路径中添加了一个矩形路径
CGPathAddRect(mutablePath, NULL, CGRectMake(100, 100, 100, 100));

将该可变路径添加到上下文
CGContextAddPath(context, mutablePath);

将路径绘制出来 draw (上下文负责) 
Store | 描边, 将路径绘制出来 Fill | 填充, 将路径的封闭空间绘制出来
CGContextDrawPath(context, kCGPathStroke);  

—>第一个参数是上下文 第二个是样式
其中样式
kCGPathFill, // 填充
kCGPathEOFill, // 奇偶填充 (奇数次的绘制, 会填充颜色, 偶数次的不会做操作)
kCGPathStroke, // 描边
kCGPathFillStroke, // 即填充又描边
kCGPathEOFillStroke // 奇偶的填充描边

CGPathRelease(mutablePath);

注意 由于是基于c语言的 需要管理内存 需要在释放掉

CGPathRelease(mutablePath);

属性
修改颜色, setStroker描边颜色

设置线宽 第一个参数是上下文
CGContextSetLineWidth(context, 50);

设置线段的顶点样式
CGContextSetLineCap(context, kCGLineCapRound);

设置两条线之间的连接点样式
CGContextSetLineJoin(context, kCGLineJoinRound);

阴影效果
CGContextSetShadow(context, CGSizeMake(50, 50), 10);

绘制虚线
第一个参数是上下文
第二个参数是起始位置距离
第三个参数是数组 需要传入虚线的长度和间隔长度
第四个参数是传入数组的长度

CGContextSetLineDash(con, 0, arr, 2);

刷新显示
不要直接调用drawRect方法
调用该方法 (需要显示, 重新绘制一次, 显示出来), 会间接的触发drawRect:
[self setNeedsDisplay];

绘制文字

[@"iloveu"drawInRect:CGRectMake(150, 150, 150, 150) withAttributes:nil ];    —>传入的是rect 
[@"iloveu"drawInRect:CGRectMake(150, 150, 150, 150) withAttributes:nil ];   —>传入的是Point
[@"iloveu" drawInRect:CGRectMake(0, 200, rect.size.width, 400) withAttributes:attrDict];  —>设置文字坐标

直接在当前的图形上下文环境当中绘制字符串
不需要做绘制, 添加到上下文这些操作
写这句代码的地方, 必须要有一个图形上下文—>draw里有
最后一个参数可以配置文字的大小样式阴影等
需要传入一个字典

NSDictionary *attrDict = @{
                               // 设置文字的字体类型
                               NSFontAttributeName : [UIFont systemFontOfSize:24],
                               // 设置前景色 (就是文字的颜色)
                               NSForegroundColorAttributeName : [UIColor redColor],\
                               // 段落样式(设置文本居中)
                               NSParagraphStyleAttributeName : paragraph,     ———————>1.1这个对象请看下方
                               
                               NSBackgroundColorAttributeName : [UIColor blueColor],
                               // 设置阴影效果, 必须要配置`描边颜色`
                               NSShadowAttributeName : shadow,
                              // 描边颜色 (效果上等价于NSForegroundColorAttributeName)
                              NSStrokeColorAttributeName : [UIColor blueColor],
                               };


1.1// NSParagraphStyle不可修改属性, 使用其可变类型
    NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
    // 文本居中对齐
    paragraph.alignment = NSTextAlignmentCenter;

绘制图片

    [img drawInRect:rect];
    [img drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];
    [img drawAtPoint:CGPointMake(100, 100)];
    [img drawAtPoint:CGPointMake(100, 100) blendMode:kCGBlendModeNormal alpha:1.0];

 [img drawInRect:rect];

将图片绘制到指定的矩形范围内, 会根据情况来拉伸适应
将图片位伸到适应当前的Rect范围, 来填充整个Rect值
注意: 会直接绘制到当前的图形上下文当中 (当前必须有上下文环境)

[img drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];

blendMode 图像混合模式 (图像会被处理-带有特殊的效果)
alpha(opacity)透明度, RGB, RGBA, 指定图片是否包含Alpha通道

 [img drawAtPoint:CGPointMake(100, 100)];
 [img drawAtPoint:CGPointMake(100, 100) blendMode:kCGBlendModeNormal alpha:1.0];

以该点为左上角, 进行图片绘制
不会拉伸图片, 而是保持图片原本状态(size不会改变)
两个参数分别为kCGBlendModeNormal, 1.0

UIKit提供的快速方法 绘制矩形 其他图形可以自己找下

填充矩形
UIRectFill(CGRectMake(100, 100, 100, 100));
描边矩形
UIRectFill(CGRectMake(100, 100, 100, 100));

使用自定义创建的lable 可以实现文字逐渐变色 就和歌词一样
在.h中提供一个属性 float 重新这个属性的set方法 定时赋值的同时刷新页面显示

- (void)drawRect:(CGRect)rect
{
    // 会文字全部绘制好
    [super drawRect:rect];
    
    /*------ 使用特定的混合模式, 将文字的颜色变一下 ------*/
    [[UIColor blueColor] set];
    
    UIRectFillUsingBlendMode(CGRectMake(0, 0, rect.size.width * _progress, rect.size.height), kCGBlendModeSourceIn);
}

- (void)setProgress:(float)progress
{
    _progress = progress;
    
    [self setNeedsDisplay];
}

贝塞尔路径
一般分为绘制和渲染两步
示例:
//绘制 第一个是绘制出描边矩形 第二个根据矩形更改弧度完成填充圆形 第三个是直接画出描边圆形

UIBezierPath *b=[UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
UIBezierPath *c=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 200, 100, 100) cornerRadius:50];
UIBezierPath *d=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 300, 100, 100)];
    //渲染
    [b stroke];
    [c fill];
    [d stroke];

快速实例化贝塞尔曲线
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
绘制自定义路径
[bezierPath moveToPoint:CGPointMake(100, 100)];
添加直线
[bezierPath addLineToPoint:CGPointMake(100, 200)];
添加圆弧
[bezierPath addArcWithCenter:CGPointMake(100, 100) radius:100 startAngle:M_PI_2 endAngle:0 clockwise:NO];
路径关闭
[bezierPath closePath];
渲染路径
[bezierPath stroke];

截图方法

在drawRect方法之外, 需要自己额外的去创建一下上下文环境

1.在此额外的开辟一个图片的上下文环境 (开启|关闭)

UIGraphicsBeginImageContext(self.bounds.size);

2.将self(UIView)上的内容绘制(draw)到新上下文当中
将当前视图层级上的所有内容绘制到当前的上下文环境中 (必须要有上下文)
如果界面有最近的更新, 及时的渲染到上下文当中

[self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];

3. 从当前上下文环境中, 导出一张图片 (上下文已经内容)
   从当前的图片上下文环境中, 导出对应的图片

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

保存到相册
将图片写入(保存)到用户的相册当中
* Selector方法, 在文档描述中已经提示, 参照着写就可以了, 保存结果的回调方法
* contextInfo: 可以传递给回调方法的可选参数

UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);

关闭已经开启的上下文

UIGraphicsEndImageContext();

上面保存相册需要用到的回调方法
保存图片到相册的回调方法

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    if (error) {
NSLog(@"写入出错: %@", error);
    } else {
NSLog(@"我已经成功了!");
    }
}

绘制扇形图

//中心点
    CGPoint cen=CGPointMake(210, 154);
    //半径
    CGFloat banJin=MIN(self.bounds.size.height, self.bounds.size.width)*0.5;
    //起始
    CGFloat up=0;
    //范围
    CGFloat down=1.5*M_PI;

第一个参数是中心点
第二个参数是半径长度
第三个参数是起始位置
第四个参数是结束位置
第五个参数是顺时针逆时针

UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:cen radius:banJin startAngle:up endAngle:down clockwise:YES];
    
    [path stroke];

保存图片到本机