美文网首页iOS动画iOS开发iOS CoreAnimation
ios 文字渐变色实现的两种方法

ios 文字渐变色实现的两种方法

作者: 萌小菜 | 来源:发表于2015-09-24 11:40 被阅读7355次

    前段时间我写过一个文字渐变色的demo, 最近又在网上看到一个新的设置文字渐变色的方法, 就把这两种方法分享出来吧, 我认为应该还有好多种方法, 以后看到后再补充.

    效果图:

    其实这两种方法实现原理及思路是差不多的, 只是使用的类和方法不一样.

    (1)自定义label, 实现 drawRect 方法, 在该方法里面画渐变色

    思路:
        1. 把label的文字画到context上去(画文字的作用主要是设置 layer 的mask)

            CGContextRef context = UIGraphicsGetCurrentContext();
             [self.textColor set];
             [self.text drawWithRect:rect options:NSStringDrawingUsesLineFragmentOrigin   attributes:@{NSFontAttributeName : self.font} context:NULL];
             ```
    
        2. 设置mask :` CGContextClipToMask(context, rect, alphaMask);` 并清除文字
    
    
          CGContextTranslateCTM(context, 0.0f, rect.size.height - (rect.size.height - textSize.height)*0.5);
          CGContextScaleCTM(context, 1.0f, -1.0f);
          CGImageRef alphaMask = NULL;
          alphaMask = CGBitmapContextCreateImage(context);
          CGContextClearRect(context, rect);// 清除之前画的文字
          CGContextClipToMask(context, rect, alphaMask);
    
        3. 翻转坐标, 画渐变色
    
          CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
          CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)self.colors, NULL);
          CGPoint startPoint = CGPointMake(textRect.origin.x, textRect.origin.y);
          CGPoint endPoint = CGPointMake(textRect.origin.x + textRect.size.width, textRect.origin.y + textRect.size.height);
          CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    
        
    
    // 释放内存
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
    CFRelease(alphaMask);
    
     
    
    ###(2) 不需要自定义label, 利用 CAGradientLayer 设置渐变图层
    
        思路: 
        1.  新建label, 把label添加到view上(这个label图层作用也只是设置mask, 不用来显示)
    
        2.  创建 CAGradientLayer, 设置其渐变色, 将其添加到 label 的superView的layer上, 并覆盖在label上
    
        3. 设置 gradientLayer的mask为 label的layer 重新设置label的frame
    
     
    
      具体详细代码已经写成demo 上传到github[(点击查看)](https://github.com/yuchuanfeng/CFGradientLabelDemo)

    相关文章

      网友评论

      • 8a567a6ebd2e:最近做了相关的内容,跟楼主第一种方法填充渐变基本是一样的实现方式,但是一旦输入中文渐变色填充就会把文字拉扁...始终找不到什么原因,不知道楼主是否知道原因?
      • 给伤的你我依然喜欢:http://www.jianshu.com/u/2b7d5965a8ec。实现的比较好,我项目用了,几行代码就实现了文字渐变(富文本、文本对齐方式、渐变方向、颜色)都没有任何问题
        底下评论有Github地址
      • 超_iOS:第二种方法看起来label的frame是被改变了啊.如果初始化就设置了frame的话
      • curry2016:写的太好了,有个疑问,
        CGContextTranslateCTM(context, 0.0f, rect.size.height - (rect.size.height - textSize.height)*0.5);
        这一句为什么要*0.5,这样上方会有一点黑色的字没有清掉,改成*1.0就没有多的黑色的部分了
        给伤的你我依然喜欢:http://www.jianshu.com/u/2b7d5965a8ec。实现的比较好,我项目用了,几行代码就实现了文字渐变(富文本、文本对齐方式、渐变方向、颜色)都没有任何问题
        底下评论有Github地址

      本文标题:ios 文字渐变色实现的两种方法

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