如何讓IOS中的文本實現3D效果

標籤：

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

zhedianshi層級: 幫幫團 發帖 487 雲幣 430 加關注 寫私信	只看樓主 更多操作樓主  發表於: 2014-06-10    我想要在IOS中對一些文本進行3D效果渲染，使用了UIKit和標準視圖控制器。  實現之的效果大概能成為這樣：      能不能通過iOS和UIKit實現？我只用了一個靜態PNG圖片，常值內容根據使用者資料變化。
	關鍵詞: ios開發 3D效果第46期：北京雲棲大會、DingTalk、快速黑洞、碼農成長日記 分享到淘江湖新浪QQ微博QQ空間開心人人豆瓣網易微博百度鮮果白社會飛信回複引用舉報

深白色層級: 小白 發帖 23 雲幣 45 加關注 寫私信

只看該作者沙發  發表於: 2014-06-10Re如何讓IOS中的文本實現3D效果  提供一個方法，不斷的重複畫文本的layer,建立有層次的效果：  建立UIImage Category,命名為UIImage+3d.h檔案：複製代碼 // //  UIImage+3D.h // //  Created by Lefteris Haritou on 12/10/12. //  Feel Free to use this code, but please keep the credits // #import <UIKit/UIKit.h> @interface UIImage (Extensions) + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth; @end .m檔案：  複製代碼 // //  UIImage+3D.m // //  Created by Lefteris Haritou on 12/10/12. //  Feel Free to use this code, but please keep the credits // #import "UIImage+3D.h" @implementation UIImage (Extensions) + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth {     //calculate the size we will need for our text     CGSize expectedSize = [_text sizeWithFont:_font constrainedToSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];     //increase our size, as we will draw in 3d, so we need extra space for 3d depth + shadow with blur     expectedSize.height+=_depth+5;     expectedSize.width+=_depth+5;     UIColor *_newColor;     UIGraphicsBeginImageContextWithOptions(expectedSize, NO, [[UIScreen mainScreen] scale]);     CGContextRef context = UIGraphicsGetCurrentContext();     //because we want to do a 3d depth effect, we are going to slightly decrease the color as we move back     //so here we are going to create a color array that we will use with required depth levels     NSMutableArray *_colorsArray = [[NSMutableArray alloc] initWithCapacity:_depth];     CGFloat *components =  (CGFloat *)CGColorGetComponents(_foregroundColor.CGColor);     //add as a first color in our array the original color     [_colorsArray insertObject:_foregroundColor atIndex:0];     //create a gradient of our color (darkening in the depth)     int _colorStepSize = floor(100/_depth);     for (int i=0; i<_depth; i++) {         for (int k=0; k<3; k++) {             if (components[k]>(_colorStepSize/255.f)) {                 components[k]-=(_colorStepSize/255.f);             }         }                 _newColor = [UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:CGColorGetAlpha(_foregroundColor.CGColor)];         //we are inserting always at first index as we want this array of colors to be reversed (darkest color being the last)         [_colorsArray insertObject:_newColor atIndex:0];     }     //we will draw repeated copies of our text, with the outline color and foreground color, starting from the deepest     for (int i=0; i<_depth; i++) {         //change color         _newColor = (UIColor*)[_colorsArray objectAtIndex:i];         //draw the text         CGContextSaveGState(context);         CGContextSetShouldAntialias(context, YES);                 //draw outline if this is the last layer (front one)         if (i+1==_depth) {             CGContextSetLineWidth(context, 1);             CGContextSetLineJoin(context, kCGLineJoinRound);             CGContextSetTextDrawingMode(context, kCGTextStroke);             [_outlineColor set];             [_text drawAtPoint:CGPointMake(i, i) withFont:_font];         }         //draw filling                 [_newColor set];         CGContextSetTextDrawingMode(context, kCGTextFill);         //if this is the last layer (first one we draw), add the drop shadow too and the outline         if (i==0) {             CGContextSetShadowWithColor(context, CGSizeMake(-2, -2), 4.0f, _shadowColor.CGColor);         }         else if (i+1!=_depth){             //add glow like blur             CGContextSetShadowWithColor(context, CGSizeMake(-1, -1), 3.0f, _newColor.CGColor);         }         [_text drawAtPoint:CGPointMake(i, i) withFont:_font];         CGContextRestoreGState(context);             }     UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();     UIGraphicsEndImageContext();     return finalImage; } @end   匯入category擴充然後如下使用：    複製代碼 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]; UIImageView *imgView = [[UIImageView alloc] initWithImage:my3dImage]; [self.view addSubview: imgView];

如何讓IOS中的文本實現3D效果