如何让IOS中的文本实现3D效果

本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9

zhedianshi

级别: 帮帮团

发帖

487

云币

430

• 加关注
• 写私信

我想要在IOS中对一些文本进行3D效果渲染，使用了UIKit和标准视图控制器。 
实现之的效果大概能成为这样： 
 
 
能不能通过iOS和UIKit实现？我只用了一个静态PNG图片，文本内容根据用户数据变化。

关键词: ios开发 3D效果

第46期：北京云栖大会、钉钉、快速黑洞、码农成长日记

分享到淘江湖新浪QQ微博QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

回复引用

举报

深白色

级别: 小白

发帖

23

云币

45

• 加关注
• 写私信

Re如何让IOS中的文本实现3D效果

提供一个方法，不断的重复画文本的layer,创建有层次的效果： 
创建UIImage Category,命名为UIImage+3d.h文件：

复制代码

1. //
2. //  UIImage+3D.h
3. //
4. //  Created by Lefteris Haritou on 12/10/12.
5. //  Feel Free to use this code, but please keep the credits
6. //
7. #import <UIKit/UIKit.h>
8. @interface UIImage (Extensions)
9. + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth;
10. @end

.m文件：

复制代码

1. //
2. //  UIImage+3D.m
3. //
4. //  Created by Lefteris Haritou on 12/10/12.
5. //  Feel Free to use this code, but please keep the credits
6. //
7. #import "UIImage+3D.h"
8. @implementation UIImage (Extensions)
9. + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth {
10. //calculate the size we will need for our text
11. CGSize expectedSize = [_text sizeWithFont:_font constrainedToSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
12. //increase our size, as we will draw in 3d, so we need extra space for 3d depth + shadow with blur
13. expectedSize.height+=_depth+5;
14. expectedSize.width+=_depth+5;
15. UIColor *_newColor;
16. UIGraphicsBeginImageContextWithOptions(expectedSize, NO, [[UIScreen mainScreen] scale]);
17. CGContextRef context = UIGraphicsGetCurrentContext();
18. //because we want to do a 3d depth effect, we are going to slightly decrease the color as we move back
19. //so here we are going to create a color array that we will use with required depth levels
20. NSMutableArray *_colorsArray = [[NSMutableArray alloc] initWithCapacity:_depth];
21. CGFloat *components =  (CGFloat *)CGColorGetComponents(_foregroundColor.CGColor);
22. //add as a first color in our array the original color
23. [_colorsArray insertObject:_foregroundColor atIndex:0];
24. //create a gradient of our color (darkening in the depth)
25. int _colorStepSize = floor(100/_depth);
26. for (int i=0; i<_depth; i++) {
27. for (int k=0; k<3; k++) {
28. if (components[k]>(_colorStepSize/255.f)) {
29. components[k]-=(_colorStepSize/255.f);
30. }
31. }
32. _newColor = [UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:CGColorGetAlpha(_foregroundColor.CGColor)];
33. //we are inserting always at first index as we want this array of colors to be reversed (darkest color being the last)
34. [_colorsArray insertObject:_newColor atIndex:0];
35. }
36. //we will draw repeated copies of our text, with the outline color and foreground color, starting from the deepest
37. for (int i=0; i<_depth; i++) {
38. //change color
39. _newColor = (UIColor*)[_colorsArray objectAtIndex:i];
40. //draw the text
41. CGContextSaveGState(context);
42. CGContextSetShouldAntialias(context, YES);
43. //draw outline if this is the last layer (front one)
44. if (i+1==_depth) {
45. CGContextSetLineWidth(context, 1);
46. CGContextSetLineJoin(context, kCGLineJoinRound);
47. CGContextSetTextDrawingMode(context, kCGTextStroke);
48. [_outlineColor set];
49. [_text drawAtPoint:CGPointMake(i, i) withFont:_font];
50. }
51. //draw filling
52. [_newColor set];
53. CGContextSetTextDrawingMode(context, kCGTextFill);
54. //if this is the last layer (first one we draw), add the drop shadow too and the outline
55. if (i==0) {
56. CGContextSetShadowWithColor(context, CGSizeMake(-2, -2), 4.0f, _shadowColor.CGColor);
57. }
58. else if (i+1!=_depth){
59. //add glow like blur
60. CGContextSetShadowWithColor(context, CGSizeMake(-1, -1), 3.0f, _newColor.CGColor);
61. }
62. [_text drawAtPoint:CGPointMake(i, i) withFont:_font];
63. CGContextRestoreGState(context);
64. }
65. UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
66. UIGraphicsEndImageContext();
67. return finalImage;
68. }
69. @end

导入category扩展然后如下使用：

复制代码

1. UIImage *my3dImage = [UIImage create3DImageWithText:@"3" Font:[UIFont systemFontOfSize:250] ForegroundColor:[UIColor colorWithRed:(200/255.f) green:(200/255.f) blue:(200/255.f) alpha:1.0] ShadowColor:[UIColor blackColor] outlineColor:[UIColor colorWithRed:(225/255.f) green:(225/255.f) blue:(225/255.f) alpha:1.0] depth:8];
2. UIImageView *imgView = [[UIImageView alloc] initWithImage:my3dImage];
3. [self.view addSubview: imgView];