Quartz 2D学习笔记

版权声明：本文为博主原创文章，如若转载请注明博客来源以及地址，多谢 https://blog.csdn.net/xiaoluodecai/article/details/50773962

1.Quartz 2D学习笔记
学习技巧：

（1）画出一条简单的线：

//当视图显示的时候会调用，默认只会调用一次
- (void)drawRect:(CGRect)rect {
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.设置绘图信息（拼接路径）
    UIBezierPath *path = [UIBezierPath bezierPath];

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

    //4.添加一条线到某个点
    [path addLineToPoint:CGPointMake(125, 125)];
//    [path addLineToPoint:CGPointMake(240, 10)];
    //5.将路径添加到上下文
    //path.CGPath 能够将UIKit的路径转换成CoreGraphics,只要是CG开头就可以
    CGContextAddPath(ctx, path.CGPath);

    //6.把上下文渲染到视图
    //stroke描边
    CGContextStrokePath(ctx);



}

（2）注意，

    [path addLineToPoint:CGPointMake(125, 125)];

添加了一条线后，这条线的终点将成为下一条线的起点；
（3）
设置线条的属性：

    CGContextAddPath(ctx, path.CGPath);

    //设置绘图状态
    //设置线宽
    CGContextSetLineWidth(ctx, 10);

    //设置线的样式
    CGContextSetLineCap(ctx, kCGLineJoinRound);

    //设置颜色
//    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);//通过RGB来设置
    [[UIColor redColor] set];//较简便的方法

    CGContextStrokePath(ctx);

（4）
画一条曲线：

    //1、获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.拼接路径
    UIBezierPath *path  = [UIBezierPath bezierPath];

    CGPoint startp = CGPointMake(10, 125);
    CGPoint endp = CGPointMake(240, 125);
    CGPoint controlp = CGPointMake(10, 10);

    [path moveToPoint:startp];
    //3.
    [path addQuadCurveToPoint:endp controlPoint:controlp];

    //
    CGContextAddPath(ctx, path.CGPath);

    CGContextStrokePath(ctx);

参考网址：http://donbe.blog.163.com/blog/static/138048021201052093633776/

（5）
画一个三角形：

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.拼接路径
    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint startP = CGPointMake(10, 10);
    [path moveToPoint:startP];

    [path addLineToPoint:CGPointMake(125, 125)];

    [path addLineToPoint:CGPointMake(240, 10)];

//    [path addLineToPoint:startP];//指向起点，则形成回路
    [path closePath];//关闭路径，自动从上一个的终点指向最初的起点

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

    //设置属性
    [[UIColor blueColor] setFill];//设置里面的填充
    [[UIColor redColor] setStroke];//设置线框的颜色

    CGContextSetLineWidth(ctx, 15);//这句对于（1）（2）两句是无效的，只对（3）有效

    //4.渲染上下文
//    CGContextStrokePath(ctx);//只是将线连接起来（1）
//    CGContextFillPath(ctx);//填充包括里面内容，是黑色的（2）

    //既填充又描边 kCGPathFillStroke
    CGContextDrawPath(ctx, kCGPathFillStroke);//(3)


}

效果图：

（3）画矩形：

-(void)drawjuxing
{
    // Drawing code
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.拼接路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 250, 250)];//画矩形

    path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) cornerRadius:100];//画圆

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

    //4.渲染上下文
    CGContextStrokePath(ctx);//只是将线连接起来（1）
    //    CGContextFillPath(ctx);//填充包括里面内容，是黑色的（2）

    //既填充又描边 kCGPathFillStroke
    //    CGContextDrawPath(ctx, kCGPathFillStroke);//(3)
}

（3）
画圆弧以及填充圆

-(void)drwatianchongyuan
{
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.拼接路径
    CGPoint center = CGPointMake(125, 125);//圆心
    CGFloat radius = 100;//半径
    CGFloat startA = 0;//起始角
    CGFloat endA = M_PI_2;//转过的角度
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

    [path addLineToPoint:center];//这句话让终点在圆心，填充时就能够填充四分之一圆了
    //3.将路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);

    //4.渲染上下文
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

}
//画弧
-(void)drwaArc
{
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.拼接路径
    CGPoint center = CGPointMake(125, 125);//圆心
    CGFloat radius = 100;//半径
    CGFloat startA = 0;//起始角
    CGFloat endA = M_PI_2;//转过的角度
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

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

    //4.渲染上下文
    CGContextStrokePath(ctx);
}

填充圆效果图：

画圆时的初始位置是右边缘线中心位置，所以

 CGFloat startA = 0;//起始角

（4）

代码名字叫做：我的下载进度条

2.
学习技巧：
iOS的转义字符是%，所以，如果要输出%，应该写“%%”；

3.
UIKit下的画文字和画图片

-(void)drawView:(CGRect)rect
{
    UIImage *image = [UIImage imageNamed:@"屏幕快照 2015-09-07 10.45.54"];

    //    [image drawAtPoint:CGPointZero];(1)
    //    [image drawInRect:CGRectMake(0, 0, 100, 100)];//会自动缩放，如果图片过大会缩小至指定rect；(2)

    //设置裁剪区，超出裁剪区的区域都被裁去
    UIRectClip(CGRectMake(0, 0, 100, 100));//如果需要裁减才需要调用此函数
    [image drawAsPatternInRect:rect];//平铺(3）
}

//画文字
-(void)drawText
{
    // Drawing code
    NSString *text = @"luotuxiu";

    CGRect textFrame = CGRectMake(0, 0, 100, 100);
    NSDictionary *dict  = @{
                            NSFontAttributeName:[UIFont systemFontOfSize:20],
                            NSForegroundColorAttributeName:[UIColor redColor],
                            NSStrokeWidthAttributeName:@10

                            };
    //    UIRectFill(textFrame);//画矩形
    //    [text drawInRect:textFrame withAttributes:dict];//画文字,会自动换行
    [text drawAtPoint:CGPointZero withAttributes:dict];//也是画文字，但不会自动换行
}

4.

学习技巧：
Quartz 2D中一根线一个路径管理。

6.
学习技巧：
关于图形上下文的出栈入栈操作：

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextSaveGState(ctx);//把上下文保存放在栈中，相当于保存一份最初的上下文
       //绘图信息
    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(10, 125)];

    [path addLineToPoint:CGPointMake(240, 125)];



    CGContextAddPath(ctx, path.CGPath);


    //设置绘图状态
    [[UIColor redColor] set];
    CGContextSetLineWidth(ctx, 10);
    CGContextSetLineCap(ctx, kCGLineCapRound);//设置末尾是圆角

    CGContextStrokePath(ctx);

    UIBezierPath *path1 = [UIBezierPath bezierPath];

    [path1 moveToPoint:CGPointMake(125, 10)];

    [path1 addLineToPoint:CGPointMake(125, 240)];
    CGContextAddPath(ctx, path1.CGPath);

    //把栈顶上下文取出来，这样相当于上下文已经重新初始化了，所以替换成当前上下文
    CGContextRestoreGState(ctx);
//    //设置绘图状态
//    [[UIColor redColor] set];
//    CGContextSetLineWidth(ctx, 1);
//    CGContextSetLineCap(ctx, kCGLineCapRound);//设置末尾是圆角
    CGContextStrokePath(ctx);
}

7.
学习笔记：
上下文的缩放平移可以用矩阵：

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef ctx = UIGraphicsGetCurrentContext();


    //矩阵变换要在拼接路径前完成,平移上下文
    CGContextTranslateCTM(ctx, 100, 100);

    //旋转上下文
    CGContextRotateCTM(ctx, M_PI_4);

    //缩放上下文,
    //void CGContextScaleCTM (CGContextRef c,CGFloat sx,CGFloat sy);sx代表着x缩放了多少倍，以此类推
    CGContextScaleCTM(ctx, 0.5, 1.2);

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-50, -100, 150,200)];


    CGContextAddPath(ctx, path.CGPath);

    CGContextFillPath(ctx);
}

8.
学习技巧：
生成图片水印

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIImage *oldImage = [UIImage imageNamed:@"1"];
    /**     *
     *   开启上下文，位图的上下文
     *  @param size  尺寸,新的图片的大小
     *  @param opaque 不透明 YES
     */
    UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);

    [oldImage drawAtPoint:CGPointZero];

    NSString *text = @"哈哈哈哈";
    NSDictionary *dict = @{
                           NSFontAttributeName :[UIFont systemFontOfSize:15],
                           NSForegroundColorAttributeName:[UIColor redColor]
                           };
    [text drawAtPoint:CGPointMake(140, 140) withAttributes:dict];

    //获取新的图片,UIGraphicsGetImageFromCurrentImageContext返回一个Image
    UIImage *newImage =  UIGraphicsGetImageFromCurrentImageContext();
    _imageView.image = newImage;

    //关闭上下文,以免耗内存
    UIGraphicsEndImageContext();

    //把图片转换成PNG格式的二进制数据
    NSData *data = UIImagePNGRepresentation(newImage);
    //写入桌面
    [data writeToFile:@"/Users/xulei/Desktop/newImage.png" atomically:YES];
}