zoukankan      html  css  js  c++  java
  • CAGradientLayer + UIBezierPath 为视图画渐变背景色

    CAGradientLayer 继承于CALayer的渐变层

    效果图:

    ![渐变背景色](http://images2015.cnblogs.com/blog/910416/201609/910416-20160918220141379-1791801200.png "渐变背景色")

    示例代码:

        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMidX(self.view.frame) - 100 , CGRectGetMidY(self.view.frame) - 100, 200, 200)];
        
        view.backgroundColor = [UIColor lightGrayColor];
        
        [self.view addSubview:view]; 
    
      CAGradientLayer *gradLayer = [CAGradientLayer layer];
       
        gradLayer.frame = CGRectMake(100, 100, 100, 100);
        
        gradLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor];
    
        gradLayer.startPoint = CGPointMake(0, 1);
        gradLayer.endPoint = CGPointMake(1, 1);
        gradLayer.locations = @[@0.2,@0.5,@0.7];
        gradLayer.type = kCAGradientLayerAxial;
       
        [view.layer addSublayer:gradLayer];
        
    

    属性说明:

    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轴向方式,也只有之一种方式

    特殊形状的渐变

    效果图:

    ![特殊形状渐变背景色](http://images2015.cnblogs.com/blog/910416/201609/910416-20160918220141535-368920939.png)

    示例代码:

        //给渐变层设置 mask 属性 
        {
            // 设置只显示一个三角形范围的渐变色
            UIBezierPath *shapeLayerPath = [[UIBezierPath alloc] init];
            // 点的坐标是相对于渐变层的
            [shapeLayerPath moveToPoint:CGPointMake(0,100)];
            [shapeLayerPath addLineToPoint:CGPointMake(50, 50)];
            [shapeLayerPath addLineToPoint:CGPointMake(100, 100)];
            
            CAShapeLayer *shapeLayer = [CAShapeLayer layer];
            shapeLayer.path = shapeLayerPath.CGPath;
            
    		gradLayer.mask = shapeLayer;
      }
    

    mask: 遮盖层,CALayer类型,能够让渐变色显示特殊形状

    用途 :折线图画渐变阴影等。


  • 相关阅读:
    json to dictionary
    ie下 频繁异步加载导致崩溃
    如何实现数据在表内部置顶
    js货币转换,replaceAll写法
    js奇怪的问题
    mssql中public和db_owner权限下拿到webshell或者系统权限
    关于Alexa Toolbar的破解方法
    如何备份和还原 IIS
    WIN下IIS备份与恢复操作
    汽车品牌标志数据库
  • 原文地址:https://www.cnblogs.com/jaesun/p/CAGradientLayer--UIBezierPath-wei-shi-tu-hua-jian-.html
Copyright © 2011-2022 走看看