如何在UILabel上实现浮雕效果？

在这里输入图像说明

我可以知道如何将浮雕效果作为图片上显示的文字“ 提醒 ”吗？

它看起来像文本embedded？

谢谢

更新为iOS 7.0

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

原版的

我不能确定苹果如何绘制浮雕文字。 在我看来，他们像是用红色填充字形字形，然后在字形的内边缘周围涂上阴影，并沿着字形的顶部外边缘施加非常微弱的阴影。 我试了一下，看起来像这样：

iPhone模拟器屏幕截图

最重要的是我的渲染。 下面是克里斯在答案中提到的一个带有阴影的简单UILabel。 我在后台放置了Reminders应用程序的屏幕截图。

这是我的代码。

首先，你需要一个函数来创build你的string的图像掩码。 您将使用蒙版来绘制string本身，然后绘制只出现在string内部边缘的阴影。 这个图像只有一个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; }

其次，你需要一个反转该面具的function。 您将使用此来使CoreGraphics围绕string的内部边缘绘制阴影。 这需要是一个完整的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; }

你可以在一个函数中使用这些函数，以红色绘制string，并为其内部边缘应用阴影。 

 -(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; }

最后，你可以结合这些function来创build你的string的浮雕图像。 我把我的最终图像放到一个UIImageView以方便testing。 

 - (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; }

这只是看起来像文字的阴影。 您可以在IB中设置文本颜色的相同区域中设置它 – 为阴影select合适的颜色，并设置阴影偏移的方式（在您发布的示例中，它看起来像是将阴影颜色设置为相同的颜色作为文本并将其偏移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

您可以在此示例的基础上configuration您的效果 在这里输入图像说明

Interesting Posts