Quartz 2D学习笔记

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];}