ios开发UIBezierPath绘制优惠券

相信做商城UI的小伙伴一定有被要求做过优惠券的绘制吧，如下如所示

优惠券

今天给大家分享下整个UI部分的绘制
新建一个view，主要方法写在drawInRect方法里

先定义几个常量

//先定义几个常量
#define imaginaryLineWidth 1.5
//虚线 线的宽度
#define imaginaryLineFullLineWidth 4
//虚线 每条线的间距
#define imaginaryLineSpeWidth 3

#define ViewWidth self.bounds.size.width
#define ViewHeight self.bounds.size.height

drawInRect方法用贝塞尔曲线绘制，然后再用CAShapeLayer绘制阴影

- (void)drawRect:(CGRect)rect
{
    //此处不设置self,layer.clipToBounds = YES;属性，否则阴影展示不出来，因为没有设置self,layer.clipToBounds = YES，所以控件四周圆角直接设置self.layer.cornRadious = 10，是无效的，所以必须自己画圆角
    //孔距离顶部高度
    CGFloat topHeight = 72 * MScreenScaleY;
    //孔的半径
    CGFloat roundSpace = 8 * MScreenScaleY;
    //四个角的绘制
    CGFloat roundCorner = 10 * MScreenScaleY;
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    //起点
    [bezierPath moveToPoint:CGPointMake(roundCorner , 0)];

    //画4周圆角 ----左上圆角
    [bezierPath addArcWithCenter:CGPointMake(roundCorner, roundCorner) radius:roundCorner startAngle:1.5 * M_PI endAngle: M_PI clockwise:NO];
    //画线
    [bezierPath addLineToPoint:CGPointMake(0, topHeight)];
    //左半圆
    [bezierPath addArcWithCenter:CGPointMake(0, topHeight + roundSpace) radius:roundSpace startAngle:1.5 * M_PI endAngle:0.5* M_PI clockwise:YES];
    [bezierPath addLineToPoint:CGPointMake(0, ViewHeight - roundCorner)];
    //画4周圆角 ----左下圆角
    [bezierPath addArcWithCenter:CGPointMake(roundCorner, ViewHeight - roundCorner) radius:roundCorner startAngle:M_PI endAngle: 0.5 *M_PI clockwise:NO];
    [bezierPath addLineToPoint:CGPointMake(ViewWidth - roundCorner, ViewHeight)];
    //画4周圆角 ----右下圆角
    [bezierPath addArcWithCenter:CGPointMake(ViewWidth - roundCorner, ViewHeight - roundCorner) radius:roundCorner startAngle:0.5 *M_PI endAngle: 0 clockwise:NO];
    //右半圆
    [bezierPath addArcWithCenter:CGPointMake(ViewWidth, topHeight + roundSpace) radius:roundSpace startAngle:0.5* M_PI endAngle:1.5 * M_PI clockwise:YES];
    [bezierPath addLineToPoint:CGPointMake(ViewWidth, 0)];
    //画4周圆角 ----右上圆角
    [bezierPath addArcWithCenter:CGPointMake(ViewWidth - roundCorner, roundCorner) radius:roundCorner startAngle:0 endAngle: 1.5 * M_PI clockwise:NO];
    [bezierPath addLineToPoint:CGPointMake(roundCorner, 0)];
    [bezierPath closePath];
//此处轮廓绘制完毕
//接下来绘制阴影CAShapeLayer必须借助于UIBezierPath
    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.fillColor = [UIColor colorWithRed:0.97 green:0.94 blue:0.87 alpha:1].CGColor; // 默认为blackColor
    pathLayer.path = bezierPath.CGPath;
    pathLayer.shadowColor = [UIColor blackColor].CGColor;
    // 阴影偏移，默认(0, -3)
    pathLayer.shadowOffset = CGSizeMake(0,3);
    pathLayer.shadowOpacity = 0.3;
    // 阴影半径，默认3
    pathLayer.shadowRadius = 3;
    [self.layer addSublayer:pathLayer];
    //此处添加中间虚线
    [self drawLineOfDashByCAShapeLayer];
}

tips：画圆角设置起始角度到终点角度按照如下图设置即可

圆形坐标系

绘制虚线方法

//画虚线
- (void)drawLineOfDashByCAShapeLayer {
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
//此处设置虚线部分的frame
    shapeLayer.frame = CGRectMake(16 * MScreenScaleY, 80 * MScreenScaleY, ViewWidth - 32 * MScreenScaleX, 1);
//此处0，0就是虚线的起点
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(ViewWidth - 36, 0)];

    [shapeLayer setStrokeColor:[UIColor colorWithRed:0.78 green:0.82 blue:0.9 alpha:1].CGColor];
//    // 3.0f设置虚线的宽度（高）
    [shapeLayer setLineWidth:1];
//设置虚线圆角
    shapeLayer.lineCap = kCALineCapRound;
    //设置线宽以及间距
    [shapeLayer setLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithInt:3],[NSNumber numberWithInt:3],nil]];
    
    shapeLayer.fillColor = [UIColor redColor].CGColor;
    shapeLayer.path = path.CGPath;
    [self.layer addSublayer:shapeLayer];
//.h里定义一个createContentView方法用来填充里面UI
    [self createContentView];
}

到此为止整个轮廓绘制完成。
2.填充整个UI
定义一个view继承自此View，然后再在createContentView里面填充其他UI