如何实现带背景的镂空文字

简介: 如何实现带背景的镂空文字

系统的镂空文字中间是空的。普通文字又没有镶边。

如何是文字一种颜色,文字又是一种颜色呢?

实现方式是:

在下面放一个普通文字标签,下面放一个系统镂空文字的标签。

这两个标签位置完全相同。这样就能实现带背景的镂空文字了。

最好是字体设置为粗体,字体越大,效果越好。

上下顺序反一下,效果差的多。

    [self addSubview:self.underDescribeTitleLabel];
    [self addSubview:self.describeTitleLabel];

-(void)setRank:(NSUInteger) rank
{
    _rank = rank;
    UIColor *strokeColor = BGColorHex(C69116);
    NSUInteger tempRank = rank/10+1;
    if(0 == rank)
    {
        tempRank = 0;
    }
    else if(rank >= 100)
    {
        tempRank = 10;
    }
    switch (tempRank) {
        case 0:
            strokeColor = BGColorHex(A1A1A1);
            break;
        case 1:
            strokeColor = BGColorHex(FE7241);
            break;
        case 2:
            strokeColor = BGColorHex(FF9802);
            break;
        case 3:
            strokeColor = BGColorHex(FFBF01);
            break;
        case 4:
            strokeColor = BGColorHex(CBDC3C);
            break;
        case 5:
            strokeColor = BGColorHex(699E38);
            break;
        case 6:
            strokeColor = BGColorHex(26A99C);
            break;
        case 7:
            strokeColor = BGColorHex(05A8F3);
            break;
        case 8:
            strokeColor = BGColorHex(4F6BEA);
            break;
        case 9:
            strokeColor = BGColorHex(663CB5);
            break;
        case 10:
            strokeColor = BGColorHex(E9407B);
            break;
            
        default:
            break;
    }
    
    NSString *rankStr = [NSString stringWithFormat:@"%lu", rank];
    NSString *str = [NSString stringWithFormat:@"fron%@", rankStr];
    NSUInteger fillCharacterCount = 4;
    NSMutableAttributedString *textAttributedString = [[NSMutableAttributedString alloc] initWithString:str];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor clearColor] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSStrokeColorAttributeName value:strokeColor range:NSMakeRange(fillCharacterCount, rankStr.length)];
    [textAttributedString addAttribute:NSStrokeWidthAttributeName value:@4.0 range:NSMakeRange(fillCharacterCount, rankStr.length)];
   [textAttributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12.f] range:NSMakeRange(0, fillCharacterCount)];
   [textAttributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:12.f] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    self.describeTitleLabel.attributedText = textAttributedString;
    [self.describeTitleLabel updateLayout];
    
    textAttributedString = [[NSMutableAttributedString alloc] initWithString:str];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor clearColor] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    [textAttributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:12.f] range:NSMakeRange(0, fillCharacterCount)];
    [textAttributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:12.f] range:NSMakeRange(fillCharacterCount, rankStr.length)];
    self.underDescribeTitleLabel.attributedText = textAttributedString;
    [self.underDescribeTitleLabel updateLayout];
    
    
    NSString *filename = [NSString stringWithFormat:@"lv%lu", tempRank];
    self.decribeImageView.image = [UIImage imageNamed:filename];
}


目录
相关文章
|
1月前
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
21 1
|
1月前
|
计算机视觉
Markdown编辑器常用颜色背景指南(附颜色与代码展示,cv即可用)
Markdown编辑器常用颜色背景指南(附颜色与代码展示,cv即可用)
|
7月前
|
前端开发
css实现背景半透明文字不透明的效果
css实现背景半透明文字不透明的效果
30 0
|
11月前
|
定位技术
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
224 0
|
前端开发
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
192 0
妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
|
程序员 uml
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】
|
缓存 Java
全网首发:JDK绘制文字:七、使用字体图像进行绘制
全网首发:JDK绘制文字:七、使用字体图像进行绘制
97 0
SwiftUI—如何将颜色、图片和图形作为视图的背景
SwiftUI—如何将颜色、图片和图形作为视图的背景
752 0
SwiftUI—如何将颜色、图片和图形作为视图的背景
html+css实战73-背景-背景图
html+css实战73-背景-背景图
83 0
html+css实战73-背景-背景图