首先，要了解图形上下文CGContextRef，图形上下文可以理解为一块画布，我们要在画布上进行绘画，然后UIView相当于画的支架，画布要贴在支架上展示。
所以，既然CGContextRef是画布，那么我们就要有一块画布，我们获取画布就是在UIView的drawRect方法里。
首先创建一个继承UIView的子类，.m文件里drawRect方法系统注释掉了。
将其解除注释，然后就可以在drawRect方法里进行绘图！
1、绘制直线
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、先起点、连线到下一点...
CGContextMoveToPoint(ctx, 50, 10);
CGContextAddLineToPoint(ctx, 50, 70);
CGContextAddLineToPoint(ctx, 70, 100);
//设置线宽
CGContextSetLineWidth(ctx, 5);
//设置起点和终点的样式
CGContextSetLineCap(ctx, kCGLineCapRound);
//设置转折点的样式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//设置线条颜色方法一
CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1);
//设置线条颜色方法二
[[UIColor redColor] setStroke];
//3、绘制
CGContextStrokePath(ctx);
2、绘制三角形
//1、获取图形上下文
CGContextRef ctx0 = UIGraphicsGetCurrentContext();
//2、连上三个点
CGContextMoveToPoint(ctx0, 10, 150);
CGContextAddLineToPoint(ctx0, 50, 200);
CGContextAddLineToPoint(ctx0, 25, 250);
//3、首尾相连
CGContextClosePath(ctx0);
//4、绘制
CGContextStrokePath(ctx0);
3、绘制矩形
//1、获取图形上下文
CGContextRef ctx1 = UIGraphicsGetCurrentContext();
//2、设置矩形位置
CGContextAddRect(ctx1, CGRectMake(200, 300, 100, 150));
//3、设置填充颜色
[[UIColor redColor] setFill];
//4、绘制
CGContextFillPath(ctx1);
4、绘制圆形
//1、获取图形上下文
CGContextRef ctx2 = UIGraphicsGetCurrentContext();
//2、设置圆形位置(宽高不一样则为椭圆)
CGContextAddEllipseInRect(ctx2, CGRectMake(200, 50, 100, 100));
//3、绘制
CGContextFillPath(ctx2);
5、绘制弧线
//1、获取图形上下文
CGContextRef ctx3 = UIGraphicsGetCurrentContext();
//2、设置弧线位置(上下文, 圆心x, 圆心y, 半径, 开始角度, 结束角度, 0代表顺时针1代表逆时针)
CGContextAddArc(ctx3, 300, 200, 50, M_PI, M_PI_2, 1);
//3、绘制
CGContextStrokePath(ctx3);
6、绘制虚线
//画虚线(还有用CAShapeLayer也可以画虚线)
//1、获取图形上下文
CGContextRef ctx4 = UIGraphicsGetCurrentContext();
//设置颜色
CGContextSetStrokeColorWithColor(ctx4, [UIColor redColor].CGColor);
//设置线宽
CGContextSetLineWidth(ctx4, 2.0);
/* 2、设置虚线参数
c 绘制的context，这个不用多说；
phase，第一个虚线段从哪里开始，例如传入3，则从第三个单位开始；
lengths,一个C数组，表示绘制部分和空白部分的分配。例如传入[2,2],则绘制2个单位，然后空白两个单位，以此重复；
count lengths的数量；
*/
CGFloat lengths[] = {5};
CGContextSetLineDash(ctx4, 0, lengths, 1);
//设置线段位置
CGContextMoveToPoint(ctx4,150,150);
CGContextAddLineToPoint(ctx4, 150, 300);
//3、绘制
CGContextStrokePath(ctx4);
7、绘制曲线
//画曲线
//1、获取图形上下文
CGContextRef ctx5 = UIGraphicsGetCurrentContext();
//2、创建路径对象
UIBezierPath *path = [UIBezierPath bezierPath];
//3、设置起点位置
[path moveToPoint:CGPointMake(50, 280)];
//4、添加一根曲线到某点(三次曲线用addCurveToPoint,二次曲线用addQuadCurveToPoint)
[path addQuadCurveToPoint:CGPointMake(250, 280) controlPoint:CGPointMake(100, 100)];
//5、将绘制的内容添加到上下文中
CGContextAddPath(ctx5, path.CGPath);
//6、渲染
CGContextStrokePath(ctx5);
8、Translate(移动)、Rotate(旋转)、Scale(缩放)
//移动
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、设置需要移动到的新坐标点(必须要在原图设置前)
CGContextTranslateCTM(ctx, 10, 10);
//3、设置原图坐标位置
CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));
//4、渲染
CGContextFillPath(ctx);
//旋转
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、设置需要旋转的角度(必须要在原图设置前)
CGContextRotateCTM(ctx, M_PI_4);
//3、设置原图坐标位置
CGContextAddRect(ctx, CGRectMake(100, 0, 40, 5));
//4、渲染
CGContextFillPath(ctx);
//缩放
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、设置缩放比例(缩放体现(100,100,100,100)---->(50,10,50,10))
CGContextScaleCTM(ctx, 0.5, 0.1);
//3、设置原图坐标位置
CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
//4、渲染
CGContextFillPath(ctx);
9、Shadow(阴影)和Gradient(渐变)
阴影
//阴影
//1、获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、添加一个矩形
CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
//3、设置阴影方位(ctx,(x向偏移量,y向偏移量), blur 非负数，决定阴影的模糊程度，数越大越模糊)
CGContextSetShadow(ctx, CGSizeMake(-10.0, 10.0), 1.0);
//4、渲染
CGContextFillPath(ctx);
渐变
渐变就是从一种颜色逐渐变换为另一种颜色：
Quart提供了两种渐变模型
1、axial gradient：线性渐变，使用的时候设置好两个顶点的颜色（也可以设置中间过渡色）
2、radial gradient ：可以实现一个圆到另一个圆的渐变或者一个点到另一个点的渐变
两种渐变的绘制模型:
CGShading － 使用这种数据类型需要自己定义CFFunction来计算每一个点的渐变颜色，较为复杂，但是能够更灵活的绘制。
CGGradient－ 使用这种数据类型只需要制定两个顶点的颜色，以及绘制模式，其余的Quartz会给绘制，但是渐变的数学模型不灵活。
CGContextRef context = UIGraphicsGetCurrentContext();
//用CGGradient绘制
CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();
size_t num_of_locations = 2;
CGFloat locations[2] = {0.0,1.0};
CGFloat components[8] = {1.0, 0.0, 0.0, 1.0, // 红色
0.0, 1.0, 0.0, 1.0};//绿色
CGGradientRef gradient = CGGradientCreateWithColorComponents(deviceRGB, components, locations,num_of_locations);
CGPoint startPoint = CGPointMake(0, 50);
CGPoint endPoint = CGPointMake(0, 100);
CGContextDrawLinearGradient(context,gradient,startPoint, endPoint,0);
CGColorSpaceRelease(deviceRGB);
CGGradientRelease(gradient);
10、复杂绘图(状态堆栈)
//多图绘制(状态堆栈)
//1、绘制第一图
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2、保存状态，入栈
CGContextSaveGState(ctx);
CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
CGContextSetLineWidth(ctx, 5.0);
CGContextFillPath(ctx);
//3、推出栈（此时坐标系已经回到了最开始的状态）
CGContextRestoreGState(ctx);
//4、可以绘制第二图
CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
CGContextFillPath(ctx);
网友评论