帅哥_刷哥
帅哥_刷哥

Quartz2D-1

1.学习目标

1.什么是Quartz2D
2.Quartz2D能做什么
3.图形上下文是什么
4.图形上下文的作用
5.绘图顺序
6.绘图步骤
7.基本图形绘制
8.上下文矩阵操作
9.上下文栈操作
10.Quartz2D坐标系与UIKit坐标系
11.Quartz2D的实际应用

2.基本介绍

2.1Quartz2D是什么

Quartz2D是苹果官方的二维绘图引擎。
它是跨平台，纯C语言。
同时支持iOS和Mac OS X系统。
Quartz2D的API来自于Core Graphics框架.
数据类型 和 函数 基本都以 CG 作为前缀.

注意:
Quartz2D 是苹果公司官方的二维绘图引擎,同时支持iOS和Mac OS X 系统。
Cocos2D(Cocos2D-x,Cocos2D-iPhone,Cocos2D-HTML5等):Cocos2D是一个第三方开源的2D游戏框架。
做游戏的还有Sprite Kit(苹果官方出的做iOS游戏的框架).
一般3D游戏用unity3D.

2.2Quartz2D能做什么

1.绘制图形:线条\三角形\矩形\圆\圆弧等。
2.绘制文字
3.绘制\生成图片(图像)
4.读取\生成PDF
5.截图\剪切图片
6.自定义UI控件
等等…

2.3图形上下文是什么

图形上下文连接图形绘制和输出目标的中间介质。
是 CGContextRef 类型
我们可以把它看做是画板或者草稿纸。

2.4图形上下文作用

图形上下文记录了路径信息，路径的状态，输出目标。
  路径信息:各种各样的图形
  绘图状态:颜色,线宽,样式,旋转,平移,图片裁剪区域等.
  输出目标:绘制到什么地方去?UIView,图片,pdf,打印机等

2.5绘图顺序

先绘制的图形在下面,后绘制的图形在上面
Quartz2D-1_第1张图片

2.6基本图形绘制演练步骤

1.自定义UIView
2.实现drawRect方法
  2.1.获得图形上下文
  2.2.绘制路径，并且将路径添加到上下文中
  2.3.渲染(将图形上下文中的路径绘制到对应的设备中)

解析:
1.获得图形上下文就是在准备一个草稿纸
2.绘制路径,并且将路径添加到上下文中 就是在草稿纸中绘制路径
3.渲染 就是 把草稿纸上的内容搬到输出目标上去,执行渲染后,上下文还在,但是上下文的路径就不在了。

2.7drawRect方法介绍

1.绘图代码为什么要写在 drawRect 方法中
  跟上下文相关,因为我们需要获得上下文,才能把图形绘制到界面上.
  在这个方法中才可以获得正确的上下文.

2.rect 参数的含义
  当前自定义View的bounds.

3.drawRect 什么时候调用
  是系统调用的.
  当View第一次显示的时候会调用
  当View重绘的时候会调用

4.如何重绘
  调用View对象的 setNeedsDisplay 方法 (全部刷新)
  调用View对象的 setNeedsDisplayInRect: 方法 ,参数表示需要重绘的区域  (部分刷新)

5.为什么不能手动调用 drawRect
  还是上下文的问题,手动调用的时候,可能拿不到上下文.

3.绘制基本图形--第一种方式 CGContext...

3.1绘制一条直线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    CGContextMoveToPoint(ctx, 100, 100); // 添加起点
    CGContextAddLineToPoint(ctx, 200, 200); // 添加终点
    //3.渲染
    CGContextStrokePath(ctx);
}

解析:
在生活中,我们在草稿纸中画画,第一需要草稿纸,第二需要笔,然后就是在哪里去画画。
CGContextMoveToPoint(ctx, 100, 100); 把笔移动到草稿纸的指定位置,注意:这个时候还没有开始绘制呢.
CGContextAddLineToPoint(ctx, 200, 200);意思是笔从(100,100)的位置绘制到(200，200)的位置.注意:笔并没有离开草稿纸.
CGContextStrokePath(ctx);注意:在执行渲染以后,上下文还在,但是上下文中的路径已经不在了.并且路径就绘制到Layer上去了。
Quartz2D-1_第2张图片

3.2绘制两条未连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    //2.1绘制第一条线
    CGContextMoveToPoint(ctx, 100, 100); // 添加起点
    CGContextAddLineToPoint(ctx, 200, 200); // 添加终点
    //2.2绘制第二条线
    CGContextMoveToPoint(ctx, 300, 200); // 添加起点
    CGContextAddLineToPoint(ctx, 100, 50); // 添加终点
    //3.渲染
    CGContextStrokePath(ctx);
}

解析:
CGContextMoveToPoint 方法 是把笔悬空草稿纸移动,移动过程中并不绘制路径.
注意:从相同点开始绘制,线肯定是可以连接起来的.

3.3绘制两条连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    //2.1绘制第一条线
    CGContextMoveToPoint(ctx, 100, 100); // 添加起点
    CGContextAddLineToPoint(ctx, 200, 200); // 添加终点
    //2.2绘制第二条线
    CGContextAddLineToPoint(ctx, 300, 100); // 添加终点
    //3.渲染
    CGContextStrokePath(ctx);
}

解析: CGContextAddLineToPoint 会默认把上一条线的终点做为自己的起点.

3.4关闭路径

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    //2.1绘制第一条线
    CGContextMoveToPoint(ctx, 100, 100); // 添加起点
    CGContextAddLineToPoint(ctx, 200, 200); // 添加终点
    //2.2绘制第二条线
    CGContextAddLineToPoint(ctx, 300, 100); // 添加终点
    //2.3关闭路径
    CGContextClosePath(ctx);
    //3.渲染
    CGContextStrokePath(ctx);
}

解析:
1.关闭路径是把最后一条线的终点和第一条线的起点连接起来
2.注意:第一条线是就近的CGContextMoveToPoint点
3.注意:如果CGContextMoveToPoint后面没有跟CGContextAddLineToPoint那么此点无效

3.5绘制矩形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    //3.渲染
    CGContextStrokePath(ctx);
}

3.6绘制圆形\椭圆

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    //注意:矩形为正方形呈现是图形就是圆,矩形为长方形呈现的图形就是椭圆
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
    //3.渲染
    CGContextStrokePath(ctx);
}

3.7绘制圆弧

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    CGContextAddArc(ctx, rect.size.width*0.5, rect.size.height*0.5, 100, 0, M_PI_4, 0);
    //3.渲染
    CGContextStrokePath(ctx);
}
解析:
1. 0是顺时针,1是逆时针

3.8绘制扇形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径,并将路径添加到上下文中.
    //2.1绘制圆弧
    CGContextAddArc(ctx, rect.size.width*0.5, rect.size.height*0.5, 100, 0, M_PI_4, 0);
    //2.2连接中心点
    CGContextAddLineToPoint(ctx,rect.size.width*0.5, rect.size.height*0.5);
    //2.3关闭路径
    CGContextClosePath(ctx);
    //3.渲染
    CGContextStrokePath(ctx);
}

4.绘制基本图形--第二种方式 CGMutablePathRef

4.1绘制一条直线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 200);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

解析:
CGPathMoveToPoint(path, NULL, 100, 100); 添加起点,注意:这个点并没有在草稿纸上
CGPathAddLineToPoint(path, NULL, 200, 200);添加终点,这样会绘制一条路径,但是这条路径并没有在草稿纸上.
CGContextAddPath(ctx, path); 会把这个路径拷贝一份放到草稿纸中.
Quartz2D-1_第3张图片

4.2绘制两条未连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    
    //2.1添加第一条线
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 200);
    
    //2.2添加第二条线
    CGPathMoveToPoint(path, NULL, 300 , 300);
    CGPathAddLineToPoint(path, NULL, 300, 100);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

4.3绘制两条连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    
    //2.1添加第一条线
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 200);
    
    //2.2添加第二条线
    CGPathAddLineToPoint(path, NULL, 300, 100);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

解析:
CGPathAddLineToPoint 会默认把上一条线的终点做为自己的起点.

4.4关闭路径

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 200);
    CGPathAddLineToPoint(path, NULL, 300, 100);
    //关闭路径
    CGPathCloseSubpath(path);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}
解析:
1.关闭路径是把最后一条线的终点和第一条线的起点连接起来
2.注意:第一条线是就近的CGPathAddLineToPoint点
3.注意:如果 CGPathMoveToPoint 后面没有CGPathAddLineToPoint那么此点无效

4.5绘制矩形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(100, 100, 100, 100));
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

4.6绘制圆形\椭圆

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    //注意:矩形是正方形会绘制成圆,矩形是长方形会绘制成椭圆
    CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 100, 100));
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

4.7绘制圆弧

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, NULL, rect.size.width*0.5, rect.size.height*0.5, 100, 0, M_PI_4, 0);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}
解析:
1. 0是顺时针,1是逆时针

4.8绘制扇形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    //2.1绘制圆弧
    CGPathAddArc(path, NULL, rect.size.width*0.5, rect.size.height*0.5, 100, 0, M_PI_4, 0);
    //2.2连接中心点
    CGPathAddLineToPoint(path, NULL,rect.size.width*0.5, rect.size.height*0.5);
    //2.3关闭路径
    CGPathCloseSubpath(path);
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path);
    //4.渲染
    CGContextStrokePath(ctx);
}

5.绘制基本图形--第三种方式 UIBezierPath

5.1绘制一条直线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

解析：
moveToPoint 添加起点,注意:这个点并没有在草稿纸上
addLineToPoint添加终点,这样会绘制一条路径,但是这条路径并没有在草稿纸上.
CGContextAddPath 会把这个路径拷贝一份放到草稿纸中.

5.2绘制两条未连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1 添加第一条线
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    
    //2.1 添加第二条线
    [path moveToPoint:CGPointMake(300, 200)];
    [path addLineToPoint:CGPointMake(400, 100)];
    
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

5.3绘制两条连接的线

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1 添加第一条线
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    
    //2.1 添加第二条线
    [path addLineToPoint:CGPointMake(300, 100)];
    
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

5.4特有的绘制方式

- (void)drawRect:(CGRect)rect {
    //1.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.添加第一条线
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    //3.渲染
    [path stroke];
}

解析:
渲染方法会默认将路径添加到当前上下文.

5.5关闭路径

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1添加第一条线
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(200, 200)];
    //2.2添加第二条线
    [path addLineToPoint:CGPointMake(300, 100)];
    //2.3关闭路径
    [path closePath];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}
注意:
1. 关闭路径是把最后一条线的终点和第一条线的起点连接起来
2.注意:第一条线是就近的moveToPoint点
3.如果moveToPoint后没有响应的addLineToPoint方法,那么这个点无效

5.6绘制矩形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

5.7绘制圆形\椭圆

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    //注意:矩形是正方形会绘制成圆,矩形是长方形会绘制成椭圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

5.8绘制圆弧

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width*0.5, rect.size.height*0.5) radius:100 startAngle:0 endAngle:M_PI_4 clockwise:YES];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}
解析:
1. YES是顺时针,NO是逆时针

5.9绘制扇形

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    //2.1创建圆弧
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width*0.5, rect.size.height*0.5) radius:100 startAngle:0 endAngle:M_PI_4 clockwise:YES];
    //2.2连接中心点
    [path addLineToPoint:CGPointMake(rect.size.width*0.5, rect.size.height*0.5)];
    //2.3关闭路径
    [path closePath];
    //3将路径添加到上下文中
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染
    CGContextStrokePath(ctx);
}

6.绘图属性设置

6.1颜色设置

//第一种方式:OC设置方式
/*
 setStroke 描边颜色
 setFill 填充色
 set 既设置描边又设置填充色
 */
[[UIColor redColor] setFill];

//第二种方式:C设置方式
//2.1设置边框颜色
CGContextSetRGBStrokeColor(ctx, 100/255.0, 100/255.0, 100/255.0, 1.0);
//2.2设置填充色
CGContextSetRGBFillColor(ctx, 100/255.0, 100/255.0, 100/255.0, 1.0);

注意:
1.在同时设置了边框和填充色时，只有采用 既填充又边框 的渲染方式才能显示两种颜色
2.一定要在渲染之前设置
3.设置颜色就近原则,也就是在渲染之前多处设置颜色.

6.2线宽设置

CGContextSetLineWidth(ctx, 5);

6.3首尾样式

/*
 kCGLineCapButt 默认,直角
 kCGLineCapRound 圆角
 kCGLineCapSquare 方形,与第一个的区别就是长了一点(左右两边各加5的距离)
 */
CGContextSetLineCap(ctx, kCGLineCapRound);


//UIBezierPath 封装的首尾样式
[path setLineCapStyle:kCGLineCapRound];

6.4拼接样式

/*
 kCGLineJoinMiter 默认,直角
 kCGLineJoinRound 圆角
 kCGLineJoinBevel 切角
 */
CGContextSetLineJoin(ctx, kCGLineJoinRound);

//UIBezierPath 封装的拼接样式
[path setLineJoinStyle:kCGLineJoinRound];

7.渲染

7.1渲染方式

//填充式渲染
CGContextFillPath(ctx);
//边框式渲染
CGContextStrokePath(ctx);
/*
 kCGPathFill  填充式渲染
 kCGPathEOFill 奇偶填充渲染
 kCGPathStroke  描边式渲染
 kCGPathFillStroke  既填充又描边
 kCGPathEOFillStroke 奇偶填充描边渲染
 */
CGContextDrawPath(ctx, kCGPathFillStroke);

7.2奇偶填充规则

被覆盖过基数次的点填充,被覆盖过偶数次的点不填充

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 200, 300, 50)];
    CGContextAddPath(ctx, path.CGPath);
    
    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(200, 100, 50, 300)];
    CGContextAddPath(ctx, path1.CGPath);
    //4.渲染
    CGContextDrawPath(ctx, kCGPathEOFill);
}
Quartz2D-1_第4张图片

7.3非零环绕数规则 -- 了解,默认的填充规则

从左边跨过,+1.从右边跨过,-1.最后如果是0,那么不填充,否则填充。

- (void)drawRect:(CGRect)rect {
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    //顺时针大圆
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:M_PI*2 clockwise:1];
    CGContextAddPath(ctx, path.CGPath);
    //逆时针小圆
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:M_PI*2 clockwise:0];
    CGContextAddPath(ctx, path1.CGPath);
    //4.渲染
    CGContextDrawPath(ctx, kCGPathFill);
}

解析:
1.错误的，但是容易理解
没有路径时，默认都是0，假设在大圆上随便取一个点，大圆顺时针绘制，从右往左跨过-1。
然后绘制小圆，小圆是逆时针绘制，小圆从左往右跨过那个点+1.
所以，如果选的点在大圆内,小圆外就是-1
选的点在大圆内，也在小圆内，那么这点被从左往右跨过，也被从右往左跨过,那么就是0,不绘制。

2.正确的，不容易理解
在大圆内随便取一个点,然后往任意方向来一条射线(切线不要考虑),这条射线和路径是有交点的，就是我们在画圆的时候，经过这条射线是从右往左，还是从左往右。
当这条线只经过了大圆与小圆没有交点，那么大圆顺时针绘制，从右往左跨过-1.
当这条线即经过大圆也经过小圆,那么大圆顺时针绘制，从右往左跨过-1，小圆逆时针绘制，从左往右跨过+1，这样就有了0.
Quartz2D-1_第5张图片

7.4OC的非零环绕数规则

- (void)drawRect:(CGRect)rect {
    // 注意:只要小圆是逆时针绘制就可以。
    //顺时针大圆
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:M_PI*2 clockwise:1];
    //逆时针小圆
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:1];
    //使用奇偶填充规则
    path.usesEvenOddFillRule = YES;
    //填充
    [path fill];
}

8.饼状图和柱状图

8.1饼状图

思路:
1.准备一个数据数组。相加可以是1，也可以是100.自己设计即可。我们假设是1
2.定义开始变量 和 结束变量都是0.
3.绘制扇形,下一个扇形的起始角度上之前所有扇形的角度总和。

- (void)drawRect:(CGRect)rect {
    //1.准备扇形块比例数组
    NSArray *array = @[@0.3,@0.1,@0.2,@0.4];
    //2.定义起始角度 和 结束角度
    CGFloat start = 0;
    CGFloat end = 0;
    for (int i = 0; i

8.2柱状图

思路:
1.准备数据数组
2.计算每个柱子的矩形位置--需要遍历数组
  宽度 = View的宽度 / (数组的长度 * 2 - 1);
  高度 = View的高度 * 当前柱子的比例
  X位置 = 宽度 * 当前柱子位置 * 2;
  Y位置 = View的高度 - 高度;
3.创建每个矩形并且填充.

- (void)drawRect:(CGRect)rect {
    //1.准备柱状图比例数组
    NSArray *array = @[@1,@0.5,@0.7,@0.3,@0.1,@0.6];
    //宽度 = 平均View的宽度
    CGFloat rectW = rect.size.width / (array.count*2-1);
    for (int i = 0; i < array.count; i++) {
        //高度 = View的高度的比例
        CGFloat rectH = rect.size.height * [array[i] floatValue];
        // X = 宽度 * 位置
        CGFloat rectX = rectW * i * 2;
        // Y = View的高度 - rect的高度
        CGFloat rectY = rect.size.height - rectH;
        //2.创建矩形
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(rectX, rectY, rectW, rectH)];
        //3.设置颜色
        [[self randomColor] set];
        //4.填充
        [path fill];
    }
}

8.3饼状图柱状图的封装

思路:
1.把数据的提供交给用户.
2.通过代理的方式来获得我们想要的数据.

9.进度条

思路:
1.自定义UIView
2.根据比例绘制圆弧
3.每当重新设置进度比例时，重绘界面
4.如果界面需要文字显示下载比例,就添加一个label.

- (void)drawRect:(CGRect)rect {
    //1.计算圆弧中心点
    CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    //2.计算圆弧半径
    CGFloat radius = MIN(rect.size.width, rect.size.height);
    //3.计算结束角度
    CGFloat end = M_PI * 2 * self.progress;
    //4.绘制圆弧
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius*0.5 startAngle:0 endAngle:end clockwise:YES];
    //5.连接中心点
    [path addLineToPoint:CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5)];
    //6.填充
    [path fill];
    
}

- (void)setProgress:(CGFloat)progress{
    _progress = progress;
    //重绘界面
    [self setNeedsDisplay];
}

你可能感兴趣的:(Quartz2D-1)

  • Quartz 2D编程指南之一：概览 idiot_lin
    本文转载自：http://southpeak.github.io/2014/11/10/quartz2d-1/前言Quartz2D是一个二维图形绘制引擎，支持iOS环境和MacOSX环境。我们可以使用Quartz2DAPI来实现许多功能，如基本路径的绘制、透明度、描影、绘制阴影、透明层、颜色管理、反锯齿、PDF文档生成和PDF元数据访问。在需要的时候，Quartz2D还可以借助图形硬件的功能。在M
  • Quartz2D-1 CoderZXS
    笔记01-Quartz2D简介.jpg02-基本线条绘制.jpg03-下载进条.-重绘-.jpg04-饼图.jpg05-UIKit绘图演练.jpg06-模仿系统的UIImageView.jpg07-雪花-定时器-.jpg08-图形上下文状态栈.jpg09-上下文的矩阵操作.jpg10.给图片添加水印..jpg11-简单圆形图片裁剪.jpgXmindQuartz2D.jpgPPTSnip201702
  • Quartz2D-1 帅哥_刷哥
    1.学习目标1.什么是Quartz2D2.Quartz2D能做什么3.图形上下文是什么4.图形上下文的作用5.绘图顺序6.绘图步骤7.基本图形绘制8.上下文矩阵操作9.上下文栈操作10.Quartz2D坐标系与UIKit坐标系11.Quartz2D的实际应用2.基本介绍2.1Quartz2D是什么Quartz2D是苹果官方的二维绘图引擎。它是跨平台，纯C语言。同时支持iOS和MacOSX系统。Qu
  • Core Graphics(Quartz 2D) liboxiang
    详情：南峰子博客http://southpeak.github.io/2014/11/10/quartz2d-1/图形上下文GraphicsContext是一个数据类型(CGContextRef)，用于封装Quartz绘制图像到输出设备的信息。换句话说，我们可以简单地给Quartz绘图序列指定不同的GraphicsContext，就可将相同的图像绘制到不同的设备上。我们不需要处理任何设备相关的计算
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他