ios绘图基础
ios绘图才一些场合很好用，这里演示一些基本的方法。
-1 ios绘图基础
-2 ios常见的图形绘制
- 画线
- 画圆、圆弧
- 画矩形,画椭圆，多边形
- 画图片
- 画文字
画出来的草图：
代码下载:github库，对应此文章的目录是draw 点击跳转代码下载地址
1:ios绘图基础
几个基本的概念
- context：上下文，ios绘图的方法都需要传一个上下文context，这个context在重写uiview的drawRect的方法里调用UIGraphicsGetCurrentContext()获取
- path：路径，ios绘图可以想象为你拿着一支笔去画图，画几条线或几个点从而形成一个路径，之后可以利用理解去填色或者描边
- stroke,fill 描边和填充，每个路径都需要填充或者描边后才能在视图中看见，他们都各自有很多样式可以设置，常见的有颜色、粗细、渐变，连接样式等等。
- 画图可以使用默认路径画，或者单独创建path画图，对应画图的api并不完全相同，是两组名称相似的api，两组pi常用的方法如下
CGContextMoveToPoint设置起点
CGContextClosePath 连接起点和当前点
CGPathCreateMutable 类似于 CGContextBeginPath
CGPathMoveToPoint 类似于 CGContextMoveToPoint
CGPathAddLineToPoint 类似于 CGContextAddLineToPoint
CGPathAddCurveToPoint 类似于 CGContextAddCurveToPoint
CGPathAddEllipseInRect 类似于 CGContextAddEllipseInRect
CGPathAddArc 类似于 CGContextAddArc
CGPathAddRect 类似于 CGContextAddRect
CGPathCloseSubpath 类似于 CGContextClosePath
CGContextAddPath函数把一个路径添加到graphics
- 画图步骤 1：获取context，2：设置路径 3：填充或描边路径
- 关于填充颜色 填充颜色有3种模式，分别是1：填充笔触，就是只给路径描边，2：根据路径填充颜色 3：填充笔触和颜色。填充颜色也分为非零绕数规则和奇偶规则，这个概念比较复杂难以解释，大家可以百度看看或者花几个图试试就明白。
CGContextStrokePath(ctx); //描出路径
CGContextFillPath(ctx) 使用非零绕数规则填充当前路径
CGContextDrawPath 两个参数决定填充规则，kCGPathFill表示用非零绕数规则，kCGPathEOFill表示用奇偶规则，kCGPathFillStroke表示填充，kCGPathEOFillStroke表示描线，不是填充
CGContextEOFillPath 使用奇偶规则填充当前路径
CGContextFillRect 填充指定的矩形
CGContextFillRects 填充指定的一些矩形
CGContextFillEllipseInRect 填充指定矩形中的椭圆
2:ios常见的图形绘制
2.0 准备工作
- （1）新建一个文件，继承UIView
- （2）重写-(void)drawRect:(CGRect)rect； 方法
-(void)drawRect:(CGRect)rect{
[super drawRect:rect];
//获取ctx
CGContextRef ctx = UIGraphicsGetCurrentContext();
//设置画图相关样式参数
//设置笔触颜色
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);//设置颜色有很多方法，我觉得这个方法最好用
//设置笔触宽度
CGContextSetLineWidth(ctx, 2);
//设置填充色
CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
//设置拐点样式
// enum CGLineJoin {
// kCGLineJoinMiter, //尖的，斜接
// kCGLineJoinRound, //圆
// kCGLineJoinBevel //斜面
// };
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//Line cap 线的两端的样式
// enum CGLineCap {
// kCGLineCapButt,
// kCGLineCapRound,
// kCGLineCapSquare
// };
CGContextSetLineCap(ctx, kCGLineCapRound);
//虚线线条样式
//CGFloat lengths[] = {10,10};
//画线
[self drawLine:ctx];
//画圆、圆弧
[self drawCircle:ctx];
//画矩形,画椭圆，多边形
[self drawShape:ctx];
//画图片
[self drawPicture:ctx];
//画文字
[self drawText:ctx];
}
2.1:画线
第一个方法我写的比较详细，写了使用path的方式和直接画线的方式。推荐使用path的方式画线。 另外，第一个方法也写了移动笔触画线和用点集合画线。后面方法只会涉及其中一种，因为方法都比较类似。
//画线
-(void)drawLine:(CGContextRef)ctx{
//画一条简单的线
CGPoint points1[] = {CGPointMake(10, 30),CGPointMake(300, 30)};
CGContextAddLines(ctx,points1, 2);
//画线方法1，使用CGContextAddLineToPoint画线，需要先设置一个起始点
//设置起始点
CGContextMoveToPoint(ctx, 50, 50);
//添加一个点
CGContextAddLineToPoint(ctx, 100,50);
//在添加一个点，变成折线
CGContextAddLineToPoint(ctx, 150, 100);
//画线方法2
//构造线路径的点数组
CGPoint points2[] = {CGPointMake(60, 60),CGPointMake(80, 120),CGPointMake(20, 300)};
CGContextAddLines(ctx,points2, 3);
//利用路径去画一组点（推荐使用路径的方式，虽然多了几行代码，但是逻辑更清晰了）
//第一个路径
CGMutablePathRef path1 = CGPathCreateMutable();
CGPathMoveToPoint(path1, &CGAffineTransformIdentity, 0, 200);
//CGAffineTransformIdentity 类似于初始化一些参数
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 100, 250);
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 310, 210);
//路径1加入context
CGContextAddPath(ctx, path1);
//path同样有方法CGPathAddLines(),和CGContextAddLines()差不多用户，可以自己试下
//描出笔触
CGContextStrokePath(ctx);
}
2.2:画矩形,画椭圆，多边形
//画矩形,画椭圆，多边形
-(void)drawSharp:(CGContextRef)ctx{
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
//画椭圆，如果长宽相等就是圆
CGContextAddEllipseInRect(ctx, CGRectMake(0, 250, 50, 50));
//画矩形,长宽相等就是正方形
CGContextAddRect(ctx, CGRectMake(70, 250, 50, 50));
//画多边形，多边形是通过path完成的
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, &CGAffineTransformIdentity, 120, 250);
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 200, 250);
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 180, 300);
CGPathCloseSubpath(path);
CGContextAddPath(ctx, path);
//填充
CGContextFillPath(ctx);
}
2.3:画图
//画图片
-(void)drawPicture:(CGContextRef)context{
/*图片*/
UIImage *image = [UIImage imageNamed:@"head.jpeg"];
[image drawInRect:CGRectMake(10, 300, 100, 100)];//在坐标中画出图片
}
2.4:画文字
//画文字
-(void)drawText:(CGContextRef)ctx{
//文字样式
UIFont *font = [UIFont systemFontOfSize:18];
NSDictionary *dict = @{NSFontAttributeName:font,
NSForegroundColorAttributeName:[UIColor whiteColor]};
[@"hello world" drawInRect:CGRectMake(120 , 350, 500, 50) withAttributes:dict];
}
2.5:画圆、圆弧、贝塞尔曲线
画圆和圆弧是一回事，只是起点和重点位置不同，画圆画弧线主要依赖于这几个方法 CGContextAddArc,CGContextAddArcToPoint, CGContextAddCurveToPoint,CGContextAddQuadCurveToPoint 后面两个方法是贝塞尔二次曲线和三次曲线
//画圆、圆弧
-(void)drawCircle:(CGContextRef)ctx{
CGContextSetStrokeColorWithColor(ctx, [UIColor purpleColor].CGColor);
/* 绘制路径 方法一
void CGContextAddArc (
CGContextRef c,
CGFloat x, //圆心的x坐标
CGFloat y, //圆心的x坐标
CGFloat radius, //圆的半径
CGFloat startAngle, //开始弧度
CGFloat endAngle, //结束弧度
int clockwise //0表示顺时针，1表示逆时针
);
*/
//圆
CGContextAddArc (ctx, 100, 100, 50, 0, M_PI* 2 , 0);
CGContextStrokePath(ctx);
//半圆
CGContextAddArc (ctx, 100, 200, 50, 0, M_PI*2, 0);
CGContextStrokePath(ctx);
//绘制路径 方法二，这方法适合绘制弧度 ，端点p1和p2是弧线的控制点，类似photeshop中钢笔工具控制曲线，还不明白请去了解贝塞尔曲线
// void CGContextAddArcToPoint(
// CGContextRef c,
// CGFloat x1, //端点1的x坐标
// CGFloat y1, //端点1的y坐标
// CGFloat x2, //端点2的x坐标
// CGFloat y2, //端点2的y坐标
// CGFloat radius //半径
// )；
//1/4弧度 * 4
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddArcToPoint(ctx, 200, 100,300, 100, 100);
CGContextAddArcToPoint(ctx, 400, 100,400, 200, 100);
CGContextAddArcToPoint(ctx, 400, 300,300, 300, 100);
CGContextAddArcToPoint(ctx, 200, 300,200, 200, 100);
CGContextStrokePath(ctx);
//贝塞尔曲线
CGContextSetStrokeColorWithColor(ctx, [UIColor orangeColor].CGColor);
//三次曲线函数
//void CGContextAddCurveToPoint (
// CGContextRef c,
// CGFloat cp1x, //控制点1 x坐标
// CGFloat cp1y, //控制点1 y坐标
// CGFloat cp2x, //控制点2 x坐标
// CGFloat cp2y, //控制点2 y坐标
// CGFloat x, //直线的终点 x坐标
// CGFloat y //直线的终点 y坐标
// );
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 0, 300, 200, 400, 100);
CGContextStrokePath(ctx);
//三次曲线可以画圆弧，比如这里画一条之前用CGContextAddArcToPoint构成的圆弧
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 100, 300, 100, 300 ,100);
CGContextStrokePath(ctx);
//二次曲线函数
//void CGContextAddQuadCurveToPoint (
// CGContextRef c,
// CGFloat cpx, //控制点 x坐标
// CGFloat cpy, //控制点 y坐标
// CGFloat x, //直线的终点 x坐标
// CGFloat y //直线的终点 y坐标
// );
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddQuadCurveToPoint(ctx, 200, 0, 300, 150);
CGContextStrokePath(ctx);
}
最后
感谢收看，如果对大家有帮助，请github上follow和star，本文发布在刘彦玮的技术博客，转载请注明出处
