iOS中如何绘制图形(一些心得)

说到drawRect在iOS中的运用，我们常把绘制图形的方法写在这个方法里，能够优化视图，让视图更加流畅。而写在Controller中不仅代码冗长，还且会导致卡顿。

1.新建一个继承UIView的类
重写drawRect方法

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 5); //线宽
    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetRGBFillColor(context, 80 / 255.0, 30 / 255.0, 241.0 / 255.0, 1.0);
    CGContextBeginPath(context);
    
    CGContextMoveToPoint(context, 30, 10); //起点坐标
    CGContextAddLineToPoint(context, 280, 400);//下一个坐标，当然你可以继续设置，不设置就是终点
    CGContextStrokePath(context);

然后在viewcontroller中调用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    
    MyLineView *line = [[MyLineView alloc] init];
    line.backgroundColor = [UIColor whiteColor];
    line.frame = self.view.frame  ;
    [self.view addSubview:line];
    
}

运行后得到如下图：

Paste_Image.png

注意：drawRect方法是系统的方法，不用你调用，但如果你碰到绘制的图并没有显示出来，你可以在viewcontroller中调用[line setNeedsDisplay]；方法，这个方法会将drawRect方法给调出来（但你不能直接操作drawRect）

这是最简单的直线，仅仅让你先认识一下画线的步骤，热身一下。

2.接下来我们在来看这段代码

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 5); //线宽
    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetRGBFillColor(context, 80 / 255.0, 30 / 255.0, 241.0 / 255.0, 1.0);
    CGContextBeginPath(context);
    
    CGContextMoveToPoint(context, 30, 10); //起点坐标

    CGContextAddArcToPoint(context,50, 80, 100, 40, 30);
    
    CGContextStrokePath(context);
}

然后运行得到如下图

Paste_Image.png

是不是感到很奇怪，对比一下，发现CGContextAddArcToPoint这个方法。
这里是从起始点30,10开始到第一个点50,80画一条线段，然后再从第一个点50,80到第二点100,40画另一条线段，然后设置半径为30.通过相交的两条线段和半径就可以确定圆弧了。
下图是我自己在草稿纸上画的，大家参考一下

97919AF045B58A457B26D7FFFBC2B122.jpg

3.看如下代码

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 5); //线宽
    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetRGBFillColor(context, 80 / 255.0, 30 / 255.0, 241.0 / 255.0, 1.0);
    CGContextBeginPath(context);
    
    CGContextMoveToPoint(context, 30, 10); //起点坐标
//    CGContextAddLineToPoint(context, 280, 400);
//    CGContextAddLineToPoint(context, 300, 300);
//    CGContextAddArcToPoint(context,50, 80, 100, 40, 30);
    CGContextAddArc(context, 100, 100, 50, 15, 60, 0);
    
    CGContextStrokePath(context);
}

效果如下：

Paste_Image.png

在这里改变的是CGContextAddArc这个方法
CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
CGContextRef不解释了，x,y为圆点坐标，radius为半径，startAngle为开始的弧度，endAngle为 结束的弧度，clockwise 0为顺时针，1为逆时针。

好了，上面都是一些基本图形的描绘，如果你在项目中要绘制简单图形的时候可以考虑上面的方法，但如果是复杂的图形，那也不用怕，大家可以去下载PaintCode这个绘制图形的软件（去网上找破解版，土豪可以去商店下载，不贵，也就648RMB），然后在里面划出你需要的图形，将下面的代码复制到drawRect中即可。
如图：

Paste_Image.png

运行后，如图

Paste_Image.png

最后，提醒一下，能少用绘图就少用，能用image之类的图片就用，像有的时候不适合用图片，比如记录几个点之间的轨迹，就需要用到绘图，一如我们一开始提的CGContextAddLineToPoint方法。

如果你觉得有帮助的话，就点个赞吧