iOS 绘制优惠券


前言

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

样式要求如下

要求样式.png

1. 绘制左半段

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

 lPath = [UIBezierPath bezierPath];  [lPath moveToPoint:CGPointMake(self.leftW-self.semicircle, 0)];  [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 一定要设置,且大于左半段面积 CAShapeLayerfillColor属性不要赋值.否则会渲染失败
 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; 

最后效果.jpeg

优惠券

原文链接:https://blog.csdn.net/sinat_29290023/article/details/80520516?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782390570638%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782390570638&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-14-80520516-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容