ios画图之UIBezierPath

前言

过年了，老家却没有网，用的朋友家的wifi，信号很不稳定，相当不爽。正好最近也有点郁闷，作为一个搬砖的人，倒是可以静下来写点儿东西解解乏。如果不了解UIBezierPath看本文前可以先看看片尾的参考文章。

需求

像这样的图形可以用图片作backgroundView，但是理智告诉你肯定是不能那么干的是不能这么偷懒的。虽然也很容易适配，但是你得尽最大的努力缩小app的size。（注：上下左右都是π/2弧度1px的圆弧）

我的红包_MarkMan.png

实现思路

1. 将每一条直线和一个圆弧当做一个步骤，一共分为六部分。
2. 要非常小心的注意圆弧的位置和弧度方向，一般而言原点是在左下方而ios是左上方，所以ios的弧度方向是顺时针逐渐增大。（但是addArcWithCenter方法里的clockwise可以设置弧度方向）
3. 虚线其实就是由实线构成，每画一条移动画笔就是。

外圈实现

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //set line color
    [[ATAppTheme colorLightGray] set];
    CGFloat padding = 0.3;
    CGFloat totalHeight = [ATAppTheme paddingWithSize:236] - padding * 2;
    CGFloat totalWidth  = kScreenWidth - [ATAppTheme paddingWithSize:28] * 2 - padding * 2;
    CGFloat radius = [ATAppTheme paddingWithSize:12];
    CGFloat upHeight = [ATAppTheme paddingWithSize:162] - padding;
    CGFloat smallRadius = [ATAppTheme paddingWithSize:4];
    
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 0.5;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    [aPath moveToPoint:CGPointMake(padding, smallRadius + padding)];
    [aPath addLineToPoint:CGPointMake(padding, upHeight - radius)];
    //1
    [aPath addArcWithCenter:CGPointMake(padding, upHeight)
                     radius:radius
                 startAngle:transformRadian(-90.0)
                   endAngle:(transformRadian(90.0))
                  clockwise:YES];
    [aPath addLineToPoint:CGPointMake(padding, totalHeight - smallRadius + padding)];
    //2
    [aPath addArcWithCenter:CGPointMake(smallRadius + padding, totalHeight - smallRadius + padding)
                     radius:smallRadius startAngle:transformRadian(180)
                   endAngle:transformRadian(90)
                  clockwise:NO];
    [aPath addLineToPoint:CGPointMake(totalWidth - smallRadius + padding, totalHeight + padding)];
    //3
    [aPath addArcWithCenter:CGPointMake(totalWidth - smallRadius + padding, totalHeight - smallRadius + padding)
                     radius:smallRadius startAngle:transformRadian(90)
                   endAngle:transformRadian(0)
                  clockwise:NO];
    [aPath addLineToPoint:CGPointMake(totalWidth + padding, upHeight + radius)];
    //    4
    [aPath addArcWithCenter:CGPointMake(totalWidth + padding, upHeight)
                     radius:radius
                 startAngle:(transformRadian(90))
                   endAngle:transformRadian(-90)
                  clockwise:YES];
    [aPath addLineToPoint:CGPointMake(totalWidth + padding, smallRadius + padding)];
    //    5
    [aPath addArcWithCenter:CGPointMake(totalWidth - smallRadius + padding, smallRadius + padding)
                     radius:smallRadius startAngle:transformRadian(0)
                   endAngle:transformRadian(-90)
                  clockwise:NO];
    [aPath addLineToPoint:CGPointMake(smallRadius + padding, padding)];
    //    6
    [aPath addArcWithCenter:CGPointMake(smallRadius + padding, smallRadius + padding)
                     radius:smallRadius startAngle:transformRadian(-90)
                   endAngle:transformRadian(-180)
                  clockwise:NO];
    [aPath moveToPoint:CGPointMake([ATAppTheme paddingWithSize:36] + padding, upHeight)];
    [self addDottedLineToPoint:CGPointMake(totalWidth + padding - [ATAppTheme paddingWithSize:36], upHeight) withPath:aPath scaleOfDottedLineToLine:2];
    
    [aPath closePath];
    //    set background color
    [[UIColor whiteColor] setFill];
    [aPath fill];
    
    UIBezierPath* bPath = [UIBezierPath bezierPath];
    [[ATAppTheme colorLightGray] set];
    bPath.lineWidth = 0.5f;
    [bPath moveToPoint:CGPointMake([ATAppTheme paddingWithSize:36] + padding, upHeight)];
    [self addDottedLineToPoint:CGPointMake(totalWidth + padding - [ATAppTheme paddingWithSize:36], upHeight) withPath:bPath scaleOfDottedLineToLine:2];
    [aPath appendPath:bPath];
    [aPath stroke];

}

虚线实现

这是一个水平的虚线所以几乎不用考虑取整的问题，但是最后一根线确实有可能和其他的有丁点儿的差别。UIBezierPath其实是做了一层封装的，应该是有直接画虚线的方法，今天网不好就没查，下次待更新。不过我自己在话斜虚线做了一点儿处理，请看官们指点一下。

- (void)addDottedLineToPoint:(CGPoint)point withPath:(UIBezierPath*)path scaleOfDottedLineToLine:(CGFloat)scale{
    path.lineWidth = 0.25;
    CGPoint currentPoint = path.currentPoint;
    CGFloat width = [self lineOfPointToPoint:currentPoint endPoint:point];
    CGFloat dattedWidth = 2;
    CGFloat lineWidth = dattedWidth * scale;
    NSInteger number = floorf((width - lineWidth) / (dattedWidth + lineWidth));
    for (NSInteger i = 0; i <= number ; i++) {
        [path addLineToPoint:CGPointMake(currentPoint.x + lineWidth, currentPoint.y)];
        [path moveToPoint:CGPointMake(currentPoint.x + lineWidth + dattedWidth, currentPoint.y)];
        currentPoint = path.currentPoint;
        [path stroke];
    }
}


- (CGFloat)lineOfPointToPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
    return sqrt((pow(endPoint.x - startPoint.x, 2) + pow(endPoint.y - startPoint.y, 2)));
    
}

小彩蛋

重写drawRect方法是在7plus ios10.2的版本上View视图最上面会出现莫名其妙的黑线，在其他的ios10.2的模拟器上倒是没有出现这个问题，个人怀疑是apple官方的问题，不知道ios10.2.1修复了没有，只有待下次检查了。若是我的问题，恳请大神指正。在photoshop里放大到单个像素级别的就能发现一个像素的区别，虽说只有一个像素的区别，而且在真机上肉眼很难发现区别，但是一个优秀的app在这方面还是得要考虑周全一些。(待更新。。。)
本文代码

参考文章

http://www.jianshu.com/p/07cbdfacb21e