美文网首页
如何生成一张渐变颜色的图片

如何生成一张渐变颜色的图片

作者: SAW_ | 来源:发表于2018-03-22 15:04 被阅读39次

    项目的UI有一些按钮的背景颜色是渐变的,如果都让UI来切图的话,还要考虑到按的大小,各个按钮大小不一致,肯定不能切一堆的图片,这时候只能代码生成渐变颜色的图片了。
    一般涉及到渐变颜色的的话,官方提供了CAGradientLayer来设置,CAGradientLayer是用来生成两种或更多颜色平滑渐变的。生成一个CAGradientLayer赋值给UIView的layer,就能达到效果。代码如下

        UIView *theView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 100)];
        [self.view addSubview:theView];
    
        /**创建一个CAGradientLayer 对象*/
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        /**设置gradientLayer 的 Frame*/
        gradientLayer.frame = theView.bounds;
        /**
           颜色数组,默认为nil,该数组定义了每一个渐变值得颜色。
           这个数组成员接受CGColorRef类型的值,如果你愿意,colors属性可以包含很多颜色,所以创建一个彩虹一样的多重渐变也是很简单的。
           默认情况下,这些颜色在空间上均匀地被渲染,但是我们可以用locations属性来调整空间。
        */
        gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                                 (__bridge id)[UIColor yellowColor].CGColor,
                                 (__bridge id)[UIColor blueColor].CGColor];
        /**
            可选的数组,定义了每一个渐变点的位置(即定义了colors属性中每个不同颜色的位置),范围在[0,1],数组中的值必须是渐变增加,如果数组为nil,那么将均匀渐变,当渲染的时候,颜色数组值会被映射到输出颜色空间。
        */
        gradientLayer.locations = @[@(0.1f) ,@(0.4f)];
        /**
           startPoint和endPoint属性,它们决定了渐变的方向。
           startPoint就是第一个渐变点,endPoint就是最后一个渐变点。
           这两个参数是以单位坐标系进行的定义,当进行绘制内容的时候会映射到layer的矩形区域,
           左上角坐标是[0,0],右下角坐标是[1,1]。默认值是[.5,0]和[.5,1]。
        */
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(1, 0);
        /**添加渐变色到创建的 UIView 上去*/
        [theView.layer addSublayer:gradientLayer];
    

    我觉得做到这里应该就没问题了,但是突然发现单单这样给一个UIButton设置CAGradientLayer,显示是可以,但是这样就没法处理高亮等状态了下的效果了!!!!如果设置了UIButton的layer的话,你再设置backgroundImage的话是没有效果的。既然如此,只能还是必须用图片来设置,那就寻思能否把渐变层转换成图片。经过进一步查找资料是可以的,具体试下如下:

        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = rect;
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(1, 0);
        NSMutableArray *mutColors = [NSMutableArray arrayWithCapacity:colors.count];
        for (UIColor *color in colors) {
            [mutColors addObject:(__bridge id)color.CGColor];
        }
        gradientLayer.colors = [NSArray arrayWithArray:mutColors];
        
        UIGraphicsBeginImageContextWithOptions(gradientLayer.frame.size, gradientLayer.opaque, 0);
        [gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    

    本着使用方便,给UIImage创建了个分类

    /**
     生成一张渐变色的图片
     @param colors 颜色数组
     @param rect 图片大小
     @return 返回渐变图片
     */
    + (UIImage *)gradientImageWithColors:(NSArray *)colors rect:(CGRect)rect
    {
        if (!colors.count || CGRectEqualToRect(rect, CGRectZero)) {
            return nil;
        }
        
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        
        gradientLayer.frame = rect;
        gradientLayer.startPoint = CGPointMake(0, 0);
        gradientLayer.endPoint = CGPointMake(1, 0);
        NSMutableArray *mutColors = [NSMutableArray arrayWithCapacity:colors.count];
        for (UIColor *color in colors) {
            [mutColors addObject:(__bridge id)color.CGColor];
        }
        gradientLayer.colors = [NSArray arrayWithArray:mutColors];
        
        UIGraphicsBeginImageContextWithOptions(gradientLayer.frame.size, gradientLayer.opaque, 0);
        [gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return outputImage;
    }
    

    相关文章

      网友评论

          本文标题:如何生成一张渐变颜色的图片

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