请问如何制作如图所示的“提醒”文字浮雕效果?
看起来文本是嵌入的?
谢谢
最佳答案
iOS 7.0 更新
在 iOS 7.0 中,Apple 为属性字符串添加了一个新属性 NSTextEffectAttributeName
。如果您的部署目标是 iOS 7.0 或更高版本,您可以将此属性设置为 NSTextEffectLetterpressStyle
以以浮雕样式绘制属性字符串。
原版
我无法确定苹果是如何绘制浮雕文本的。在我看来,他们用微红色填充字符串字形,然后在字形的内部边缘周围应用阴影,并沿着字形的顶部外边缘应用非常微弱的阴影。我尝试了一下,效果如下:
上面是我的渲染。下面是一个带有阴影的简单 UILabel,正如 Chris 在他的回答中所建议的那样。我在后台放置了提醒应用程序的屏幕截图。
这是我的代码。
首先,您需要一个函数来创建字符串的图像蒙版。您将使用 mask 来绘制字符串本身,然后绘制仅出现在字符串内部边缘周围的阴影。该图像只有一个 Alpha channel ,没有 RGB channel 。
- (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;
}
关于iphone - iOS - 如何实现UILabel上文字的浮雕效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8467141/