iOS - 如何实现UILabel上文字的浮雕效果？

Question

我可以知道如何将浮雕效果设置为文本“提醒”如图所示？

看起来文字是嵌入的？

谢谢

Answer 1

iOS 7.0 的更新

在 iOS 7.0 中，Apple 为属性字符串添加了一个新属性 NSTextEffectAttributeName。如果您的部署目标是 iOS 7.0 或更高版本，您可以将此属性设置为 NSTextEffectLetterpressStyle 来以浮雕样式绘制属性字符串。

原创

我无法确定苹果是如何绘制浮雕文本的。在我看来，他们用微红色填充字符串字形，然后在字形的内部边缘周围应用阴影，并沿着字形的顶部外边缘应用非常微弱的阴影。我尝试了一下，如下所示：

顶部是我的渲染。下面是一个带有阴影的简单 UILabel，正如 Chris 在他的回答中所建议的那样。我在后台放置了提醒应用程序的屏幕截图。

这是我的代码。

首先，您需要一个函数来创建字符串的图像蒙版。您将使用遮罩来绘制字符串本身，然后绘制仅出现在字符串内部边缘周围的阴影。该图像只有一个 Alpha 通道，没有 RGB 通道。

- (UIImage *)maskWithString:(NSString *)string font:(UIFont *)font size:(CGSize)size
{
    CGRect rect = { CGPointZero, size };
    CGFloat scale = [UIScreen mainScreen].scale;
    CGColorSpaceRef grayscale = CGColorSpaceCreateDeviceGray();
    CGContextRef gc = CGBitmapContextCreate(NULL, size.width * scale, size.height * scale, 8, size.width * scale, grayscale, kCGImageAlphaOnly);
    CGContextScaleCTM(gc, scale, scale);
    CGColorSpaceRelease(grayscale);
    UIGraphicsPushContext(gc); {
        [[UIColor whiteColor] setFill];
        [string drawInRect:rect withFont:font];
    } UIGraphicsPopContext();

    CGImageRef cgImage = CGBitmapContextCreateImage(gc);
    CGContextRelease(gc);
    UIImage *image = [UIImage imageWithCGImage:cgImage scale:scale orientation:UIImageOrientationDownMirrored];
    CGImageRelease(cgImage);

    return image;
}

其次，您需要一个反转该掩码的函数。您将使用它来使 CoreGraphics 在字符串的内边缘周围绘制阴影。这需要是完整的 RGBA 图像。 （iOS 似乎不支持灰度+alpha 图像。）

- (UIImage *)invertedMaskWithMask:(UIImage *)mask
{
    CGRect rect = { CGPointZero, mask.size };
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, mask.scale); {
        [[UIColor blackColor] setFill];
        UIRectFill(rect);
        CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage);
        CGContextClearRect(UIGraphicsGetCurrentContext(), rect);
    }
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

您可以在函数中使用它们，以红色绘制字符串并将阴影应用于其内部边缘。

-(UIImage *)imageWithInteriorShadowAndString:(NSString *)string font:(UIFont *)font textColor:(UIColor *)textColor size:(CGSize)size
{
    CGRect rect = { CGPointZero, size };
    UIImage *mask = [self maskWithString:string font:font size:rect.size];
    UIImage *invertedMask = [self invertedMaskWithMask:mask];
    UIImage *image;
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, [UIScreen mainScreen].scale); {
        CGContextRef gc = UIGraphicsGetCurrentContext();
        // Clip to the mask that only allows drawing inside the string's image.
        CGContextClipToMask(gc, rect, mask.CGImage);
        // We apply the mask twice because we're going to draw through it twice.
        // Only applying it once would make the edges too sharp.
        CGContextClipToMask(gc, rect, mask.CGImage);
        mask = nil; // done with mask; let ARC free it

        // Draw the red text.
        [textColor setFill];
        CGContextFillRect(gc, rect);

        // Draw the interior shadow.
        CGContextSetShadowWithColor(gc, CGSizeZero, 1.6, [UIColor colorWithWhite:.3 alpha:1].CGColor);
        [invertedMask drawAtPoint:CGPointZero];
        invertedMask = nil; // done with invertedMask; let ARC free it

        image = UIGraphicsGetImageFromCurrentImageContext();
    }
    UIGraphicsEndImageContext();
    return image;
}

接下来，您需要一个函数来获取图像并返回带有微弱向上阴影的副本。

- (UIImage *)imageWithUpwardShadowAndImage:(UIImage *)image
{
    UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale); {
        CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, -1), 1, [UIColor colorWithWhite:0 alpha:.15].CGColor);
        [image drawAtPoint:CGPointZero];
    }
    UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return resultImage;
}

最后，您可以组合这些功能来创建字符串的浮雕图像。我将最终图像放入 UIImageView 中以便于测试。

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect rect = self.imageView.bounds;
    NSString *string = @"Reminders";
    UIFont *font = [UIFont systemFontOfSize:33];
    UIImage *interiorShadowImage = [self imageWithInteriorShadowAndString:string
        font:font
        textColor:[UIColor colorWithHue:0 saturation:.9 brightness:.7 alpha:1]
        size:rect.size];
    UIImage *finalImage = [self imageWithUpwardShadowAndImage:interiorShadowImage];

    self.imageView.image = finalImage;
}

Answer 2

这看起来就像文本周围的阴影。您可以在 IB 中设置文本颜色的同一区域中进行设置 - 为阴影选择适当的颜色并设置您想要的阴影偏移方式（在您发布的示例中，看起来他们将阴影颜色设置为相同的颜色）作为文本，并将其水平偏移 0，垂直偏移 -1（这意味着向上一个像素）。

在代码中，属性设置如下（假设您已经设置了一个名为“label”的 UILabel：

label.shadowColor = [UIColor blackColor]; // Choose your color here - in the example
                                          // posted, they probably chose a similar color
                                          // to the text color and then set the alpha
                                          // down around 0.7 or so so the shadow would be
                                          // faint.
label.shadowOffset = CGSizeMake(0,-1);    // First parameter is horizontal, second is vertical

Answer 3

您可以在此示例的基础上配置您的效果