美文网首页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)

相关文章

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

    前段时间我写过一个文字渐变色的demo, 最近又在网上看到一个新的设置文字渐变色的方法, 就把这两种方法分享出来吧...

  • iOS一个方法搞定view渐变色

    iOS一个方法搞定view渐变色 iOS一个方法搞定view渐变色

  • 2019-10-25

    iOS 渐变色 实现渐变色的几种方式: 使用场景:背景渐变 1. 通过CAGradientLayer实现 使用场景...

  • iOS渐变色文字实现

    实现文字渐变色的方法网上有很多,但是很多初学小伙伴对代码的理解存在着问题(一开始我也是一样),所以我利用本人一点浅...

  • CSS技巧(自用)

    背景图片铺满屏幕 文字渐变色 实现方法:利用css的background-clip和text-fill-color...

  • iOS给视图添加渐变色

    在iOS中系统框架提供了好多方法来供我们绘图,今天我们就研究渐变色. 1 用CAGradientLayer来实现...

  • ios-按钮UIButton文字左图片右

    iOS-按钮UIButton文字在左图片在右:有两种实现方式 方法一: 一句代码搞定:按钮有一个属性semanti...

  • iOS 两种方法交换的区别

    下面两种实现是在iOS开发中最常用的方法交换方式,那么两种实现方式具体有什么区别呢?首先,以上两种实现都可以达到方...

  • 控件渐变色的实现

    控件渐变色的实现(一)—— CAGradientLayer实现控件渐变色的实现(二)—— Core Graphics实现

  • iOS 文字渐变色

    代码

网友评论

  • 8a567a6ebd2e:最近做了相关的内容,跟楼主第一种方法填充渐变基本是一样的实现方式,但是一旦输入中文渐变色填充就会把文字拉扁...始终找不到什么原因,不知道楼主是否知道原因?
  • 给伤的你我依然喜欢:http://www.jianshu.com/u/2b7d5965a8ec。实现的比较好,我项目用了,几行代码就实现了文字渐变(富文本、文本对齐方式、渐变方向、颜色)都没有任何问题
    底下评论有Github地址
  • 超_iOS:第二种方法看起来label的frame是被改变了啊.如果初始化就设置了frame的话
  • 1cf2cd913632:写的太好了,有个疑问,
    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