美文网首页iOS开发编程iOS开发集锦
有趣的文字 - 渐变的文字

有趣的文字 - 渐变的文字

作者: 徊家喂猪 | 来源:发表于2018-01-12 23:52 被阅读46次

设置渐变颜色的文字有三种方法:
第一种是通过渐变图片遮罩,colorWithPatternImage
第二种是通过Layer设置渐变颜色
第三种是自定义label在drawRect里绘制渐变
个人博客地址简书地址GitHub地址

1. colorWithPatternImage

UILabel *demoLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 100, 350, 160)];
    demoLabel.text = @"曾经有一份真挚的爱情放在我面前,我没有珍惜!";
    demoLabel.font = [UIFont systemFontOfSize:20];
    demoLabel.numberOfLines = 0;
    demoLabel.textColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"shade"]];
    [self.view addSubview:demoLabel];
@效果图,下方渐变图为引入工程的图片实例

2. 通过Layer设置渐变颜色

UILabel *demoLabel2 = [[UILabel alloc] initWithFrame:CGRectMake(40, 280, 350, 180)];
demoLabel2.text = @"Long long ago, there was a sincer cordial emotion in front of me, but I didn't cherish it. Until it lost, I just regreted at that time. It is only the most suffering thing in the world. If the grandfather of heaven give me the last opportunity. I will say three words to that girl:'I love you!' If it has to add an alloted time. I hope it is 10,000 years. ";
demoLabel2.font = [UIFont systemFontOfSize:20];
demoLabel2.numberOfLines = 0;
demoLabel2.textColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"shade"]];
[self.view addSubview:demoLabel2];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor colorWithRed:0.29 green:0.95 blue:0.63 alpha:1.00].CGColor, (id)[UIColor colorWithRed:1.00 green:0.89 blue:0.18 alpha:1.00].CGColor, (id)[UIColor colorWithRed:0.81 green:0.13 blue:0.31 alpha:1.00].CGColor];
//gradientLayer.locations = @[@0, @0.5, @1];// 默认就是均匀分布
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
gradientLayer.frame = demoLabel2.frame;
gradientLayer.mask = demoLabel2.layer;
demoLabel2.layer.frame = gradientLayer.bounds;
[self.view.layer addSublayer:gradientLayer];
@效果

3. 自定义label在drawRect里绘制渐变

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 获取文字mask
    [@"孙悟空老猴子" drawInRect:self.bounds withAttributes:@{NSFontAttributeName : self.font}];
    CGImageRef textMask = CGBitmapContextCreateImage(context);
    
    // 清空画布
    CGContextClearRect(context, rect);
    
    // 设置蒙层
    CGContextTranslateCTM(context, 0.0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextClipToMask(context, rect, textMask);
    
    // 绘制渐变
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0, 0.5, 1};
    CGFloat colors[] = {1.0,0.0,0.0,1.0,
                        0.0,1.0,0.0,1.0,
                        0.0,0.0,1.0,1.0};
    CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpace, colors, locations, 3);
    CGPoint start = CGPointMake(0, self.bounds.size.height / 2.0);
    CGPoint end = CGPointMake(self.bounds.size.width, self.bounds.size.height / 2.0);
    CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation);
    
    // 释放
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
    CGImageRelease(textMask);
}
ShadeLabel *label = [[ShadeLabel alloc] initWithFrame:CGRectMake(40, 500, 350, 180)];
    [self.view addSubview:label];

个人博客地址简书地址GitHub地址
_

相关文章

  • 有趣的文字 - 渐变的文字

    设置渐变颜色的文字有三种方法:第一种是通过渐变图片遮罩,colorWithPatternImage第二种是通过La...

  • 文字渐变

  • 渐变文字

    在一篇文章里看到的,有两种方法:第一种:首先将包裹字体的span背景渐变background: linear-gr...

  • 文字渐变

    文章参考:http://www.jianshu.com/p/fe06704e11a0 方式一 自定义label 方式二

  • 文字渐变

    如下

  • 渐变文字

    background: linear-gradient(#f2e7cf, #e0cba2); -webkit-ba...

  • iOS渐变的文字

    CAGradientLayer CAGradientLayer可以方便的处理颜色渐变。@property(null...

  • 有趣的文字

    1:丑当然是病了,不然整容医院为什么要叫医院呐! 2:小鲜肉是哪个部分的肉?死猪不怕开水烫,越是夸赞我越浪 3:如...

  • 有趣的文字

    最近觉得生活愈发无趣。闭目回想,以往空闲时,总爱摆弄些文字,自认十分有趣,经常沉迷于自己的灵机与敏锐。但这几日因疫...

  • 有趣的文字

    近日读毛姆的读书随笔《阅读是一座随身携带的避难所》。对其中关于“简.奥斯汀的魅力何在“一篇读的有趣,其中读书随笔...

网友评论

    本文标题:有趣的文字 - 渐变的文字

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