iOS 绘制优惠券

前言

优惠券在APP中用的比较广泛, 当然实现这个功能的方式也有很多. 最简单的就是找图片直接贴上去, 不过这样适配方面难免会有些落差. 在此,尝试一下使用UIBezierPath去绘制一个优惠券样式出来.

样式要求如下

1. 绘制左半段

代码如下, self.leftW 为左半块的宽度 self.semicircle 为左边分界线的半圆弧半径 c_heigth 为控价高度 self.radius 优惠券圆角半径

    lPath = [UIBezierPath bezierPath];
    //起点
    [lPath moveToPoint:CGPointMake(self.leftW-self.semicircle, 0)];
    // 添加 圆角 我们可以直接把这个圆角看做一个点  clockwise true: 凸 false:凹
    [lPath addArcWithCenter:CGPointMake(self.leftW, 0) radius:self.semicircle startAngle:M_PI endAngle:M_PI_2 clockwise:NO];
    [lPath addArcWithCenter:CGPointMake(self.leftW, c_heigth) radius:self.semicircle startAngle:-M_PI_2 endAngle:M_PI clockwise:NO];

    [lPath addArcWithCenter:CGPointMake(self.radius, c_heigth-self.radius) radius:self.radius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
    [lPath addArcWithCenter:CGPointMake(self.radius, self.radius) radius:self.radius startAngle:M_PI endAngle:-M_PI_2 clockwise:YES];
    [[UIColor whiteColor] set];
    // 填充 
    [lPath fill];

2. 绘制右半段

代码如下, 需要注意的是,我们需要另起一个path. 否则无法分段渲染

    UIBezierPath *rPath = [UIBezierPath bezierPath];
    [rPath moveToPoint:CGPointMake(self.leftW, self.semicircle)];
    [rPath addArcWithCenter:CGPointMake(self.leftW, 0) radius:self.semicircle startAngle:M_PI_2 endAngle:-M_PI clockwise:NO];
    [rPath addArcWithCenter:CGPointMake(c_width-self.radius, self.radius) radius:self.radius startAngle:-M_PI_2 endAngle:0 clockwise:YES];
    [rPath addArcWithCenter:CGPointMake(c_width-self.radius, c_heigth-self.radius) radius:self.radius startAngle:0 endAngle:M_PI_2 clockwise:YES];
    [rPath addArcWithCenter:CGPointMake(self.leftW,c_heigth) radius:self.semicircle startAngle:0 endAngle:-M_PI_2 clockwise:NO];
    UIColor *rcolor = [UIColor whiteColor];
    [rcolor set];
    [rPath fill];

3. 绘制右边分界线

代码如下, 简单画虚线,不多解释

   UIBezierPath *lineP = [UIBezierPath bezierPath];
    [lineP moveToPoint:CGPointMake(c_width-self.rightW, 0)];
    [lineP addLineToPoint:CGPointMake(c_width-self.rightW, c_heigth)];
    UIColor *lineColor = self.sepLineColor;
    [lineColor set];
    CGFloat fl[] = {5,5};
    [lineP setLineDash:fl count:2 phase:5];
    [lineP stroke];

4. 左半段渐变色渲染

代码如下, CAGradientLayer 这是一个渐变色的layer CAShapeLayer 可以根据path 生成layer.

需要注意的是 gradientLayer.frame 一定要设置,且大于左半段面积 CAShapeLayer 的 fillColor属性不要赋值.否则会渲染失败

   CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    gradientLayer.colors = self.colors;
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = lPath.CGPath;
    [gradientLayer setMask:maskLayer];
    [self.layer addSublayer:gradientLayer];

5. 最后

整体加一个阴影,透明度

 self.layer.shadowOffset = CGSizeMake(0, 0);
 self.layer.shadowOpacity = 0.35f;
 self.layer.shadowRadius = 4;
self.layer.shadowColor = [UIColor clearColor].CGColor;

优惠券