美文网首页iOS相关
CAGradientLayer + UIBezierPath 为

CAGradientLayer + UIBezierPath 为

作者: 白色天空729 | 来源:发表于2018-09-09 12:17 被阅读42次

    效果图:


    屏幕快照 2018-09-09 下午12.41.51.png

    实现代码:

    OC版本

    xxx.h

    
    //  处理CAGradientLayer + UIBezierPath 为视图画渐变背景色
    
    #import <QuartzCore/QuartzCore.h>
    #import <UIKit/UIKit.h>
    
    NS_ASSUME_NONNULL_BEGIN
    
    @interface CornerGradientV : UIView
    
    /**
     CAGradientLayer + UIBezierPath 为视图画渐变背景色
    
     @param frame 传入的大小
     @param colors 传入的渐变颜色数组
     @param radius 需要裁剪的半径
     @return 处理好的CAGradientLayer + UIBezierPath 为视图画渐变背景色矩形
     */
    - (instancetype)initWithFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius;
    
    /**
     CAGradientLayer + UIBezierPath 为视图画渐变背景色
     
     @param frame 传入的大小
     @param colors 传入的渐变颜色数组
     @param radius 需要裁剪的半径
     @return 处理好的CAGradientLayer + UIBezierPath 为视图画渐变背景色矩形
     */
    - (void)withFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius;
    @end
    
    NS_ASSUME_NONNULL_END
    
    @end
    
    NS_ASSUME_NONNULL_END
    
    

    xxx.m

    /*
     属性说明:
     
     frame : 渐变层的位置及大小
     colors: 各个渐变范围的颜色
     startPoint 、endPoint: 渐变层起点 endPoint 渐变层终点 确定渐变的方向 如: (0,0)->(1,1) 左上到右下渐变 (0,0)->(0,1) 从上到下渐变 (0,0)->(1,0) 从左到右渐变
     locations: 开始渐变的停止位置即非渐变色的位置,为递增数组,默认会根据颜色个数均匀分布,如三个颜色默认数组为@[0,0.5,1],即在0处为红色0.5处为绿色1处为橘色,之间为渐变色 NSNumber 对象数组 每一个number的范围为[0,1]
     type: 渐变方式,默认 kCAGradientLayerAxial轴向方式,也只有之一种方式
     */
    
    #import "CornerGradientV.h"
    
    @implementation CornerGradientV
    
    - (instancetype)initWithFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius {
        self =  [super initWithFrame:frame];
        if (self) {
            [self withFrame:frame withGradientColors:colors withCornerRius:radius];
        }
        return self;
    }
    
    - (void)withFrame:(CGRect)frame withGradientColors:(NSArray *)colors withCornerRius:(CGFloat)radius {
        CAGradientLayer *gradLayer = [CAGradientLayer layer];
        
        gradLayer.frame = frame;
        
        gradLayer.colors = colors;
        gradLayer.startPoint = CGPointMake(0, 1);
        gradLayer.endPoint = CGPointMake(1, 1);
        
        [self.layer addSublayer:gradLayer];
        
        UIBezierPath *_circleSmallPath = [[UIBezierPath alloc] init];
        [_circleSmallPath moveToPoint:CGPointMake(0, 0)];
        [_circleSmallPath addLineToPoint:CGPointMake(0, frame.size.height - radius)];
        [_circleSmallPath addCurveToPoint:CGPointMake(frame.size.width, self.frame.size.height - radius) controlPoint1:CGPointMake(frame.size.width / 2, frame.size.height) controlPoint2:CGPointMake(frame.size.width, frame.size.height - radius)];
        [_circleSmallPath addLineToPoint:CGPointMake(frame.size.width, frame.size.height - radius)];
        
        [_circleSmallPath addLineToPoint:CGPointMake(frame.size.width, 0)];
        [_circleSmallPath closePath];
        
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.path = _circleSmallPath.CGPath;
        
        gradLayer.mask = shapeLayer;
    }
    
    @end
    
    

    代码使用:

    #define ZXHexRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
    
    //    CornerGradientV *vv = [[CornerGradientV alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 170)];
    //    [vv withFrame:vv.frame withGradientColors:@[(id)ZXHexRGB(0x6db831).CGColor,(id)ZXHexRGB(0x4d912a).CGColor] withCornerRius:20];
    //    [self.view addSubview:vv];
        
        CornerGradientV *vvv = [[CornerGradientV alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 170) withGradientColors:@[(id)ZXHexRGB(0x6db831).CGColor,(id)ZXHexRGB(0x4d912a).CGColor] withCornerRius:20];
        [self.view addSubview:vvv];
    

    Swift版本

    /// //  处理CAGradientLayer + UIBezierPath 为视图画渐变背景色
    /*
     属性说明:
     
     frame : 渐变层的位置及大小
     colors: 各个渐变范围的颜色
     startPoint 、endPoint: 渐变层起点 endPoint 渐变层终点 确定渐变的方向 如: (0,0)->(1,1) 左上到右下渐变 (0,0)->(0,1) 从上到下渐变 (0,0)->(1,0) 从左到右渐变
     locations: 开始渐变的停止位置即非渐变色的位置,为递增数组,默认会根据颜色个数均匀分布,如三个颜色默认数组为@[0,0.5,1],即在0处为红色0.5处为绿色1处为橘色,之间为渐变色 NSNumber 对象数组 每一个number的范围为[0,1]
     type: 渐变方式,默认 kCAGradientLayerAxial轴向方式,也只有之一种方式
     */
    
    
    import UIKit
    
    class CornetGradient_Swift: UIView {
    
        /// CAGradientLayer + UIBezierPath 为视图画渐变背景色
        ///
        /// - Parameters:
        ///   - frame: 传入的大小
        ///   - colors: 传入的渐变颜色数组
        ///   - radius: 需要裁剪的半径
        init(frame: CGRect, withGradientColors colors: [Any]?, withCornerRius radius: CGFloat) {
            super.init(frame: frame)
            
            let gradLayer = CAGradientLayer()
            
            gradLayer.frame = frame
            
            gradLayer.colors = colors
            gradLayer.startPoint = CGPoint(x: 0, y: 1)
            gradLayer.endPoint = CGPoint(x: 1, y: 1)
            
            layer.addSublayer(gradLayer)
            
            let circleSmallPath = UIBezierPath()
            circleSmallPath.move(to: CGPoint(x: 0, y: 0))
            circleSmallPath.addLine(to: CGPoint(x: 0, y: frame.size.height - radius))
            circleSmallPath.addCurve(to: CGPoint(x: frame.size.width, y: frame.size.height - radius), controlPoint1: CGPoint(x: frame.size.width / 2, y: frame.size.height), controlPoint2: CGPoint(x: frame.size.width, y: frame.size.height - radius))
            circleSmallPath.addLine(to: CGPoint(x: frame.size.width, y: frame.size.height - radius))
            
            circleSmallPath.addLine(to: CGPoint(x: frame.size.width, y: 0))
            circleSmallPath.close()
            
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = circleSmallPath.cgPath
            
            gradLayer.mask = shapeLayer
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    
    

    使用

      let colorArray = [ #colorLiteral(red: 0.4274509804, green: 0.7215686275, blue: 0.1921568627, alpha: 1).cgColor,#colorLiteral(red: 0.3019607843, green: 0.568627451, blue: 0.1647058824, alpha: 1).cgColor]
            
            let v = CornetGradient_Swift.init(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 170), withGradientColors: colorArray, withCornerRius: 20)
            self.view.addSubview(v)
    

    参考资源:
    https://www.cnblogs.com/jaesun/p/CAGradientLayer--UIBezierPath-wei-shi-tu-hua-jian-.html

    iOS UIBezierPath方法的使用 :
    https://www.jianshu.com/p/6cf87ca48811

    相关文章

      网友评论

        本文标题:CAGradientLayer + UIBezierPath 为

        本文链接:https://www.haomeiwen.com/subject/zsgrgftx.html