前言
过年了，老家却没有网，用的朋友家的wifi，信号很不稳定，相当不爽。正好最近也有点郁闷，作为一个搬砖的人，倒是可以静下来写点儿东西解解乏。如果不了解UIBezierPath看本文前可以先看看片尾的参考文章。
需求
像这样的图形可以用图片作backgroundView，但是理智告诉你肯定是不能那么干的是不能这么偷懒的。虽然也很容易适配，但是你得尽最大的努力缩小app的size。（注：上下左右都是π/2弧度1px的圆弧）
我的红包_MarkMan.png
实现思路
- 将每一条直线和一个圆弧当做一个步骤，一共分为六部分。
- 要非常小心的注意圆弧的位置和弧度方向，一般而言原点是在左下方而ios是左上方，所以ios的弧度方向是顺时针逐渐增大。（但是addArcWithCenter方法里的clockwise可以设置弧度方向）
- 虚线其实就是由实线构成，每画一条移动画笔就是。
外圈实现
- (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在这方面还是得要考虑周全一些。(待更新。。。)
本文代码
