您的位置: 首页  >  IT文章  >  如何让IOS中的文本实现3D效果

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

分类: IT文章 • 2023-11-23 23:14:31

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

 

 
如何让IOS中的文本实现3D效果深白色
级别: 小白如何让IOS中的文本实现3D效果
发帖
23
云币
45
 
只看该作者沙发  发表于: 2014-06-10
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. //
  8. #import <UIKit/UIKit.h>
  10. @interface UIImage (Extensions)
  12. + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth;
  14. @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. //
  8. #import "UIImage+3D.h"
  10. @implementation UIImage (Extensions)
  12. + (UIImage *)create3DImageWithText:(NSString *)_text Font:(UIFont*)_font ForegroundColor:(UIColor*)_foregroundColor ShadowColor:(UIColor*)_shadowColor outlineColor:(UIColor*)_outlineColor depth:(int)_depth {
  14.     //calculate the size we will need for our text
  15.     CGSize expectedSize = [_text sizeWithFont:_font constrainedToSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
  17.     //increase our size, as we will draw in 3d, so we need extra space for 3d depth + shadow with blur
  18.     expectedSize.height+=_depth+5;
  19.     expectedSize.width+=_depth+5;
  21.     UIColor *_newColor;
  23.     UIGraphicsBeginImageContextWithOptions(expectedSize, NO, [[UIScreen mainScreen] scale]);
  24.     CGContextRef context = UIGraphicsGetCurrentContext();
  26.     //because we want to do a 3d depth effect, we are going to slightly decrease the color as we move back
  27.     //so here we are going to create a color array that we will use with required depth levels
  28.     NSMutableArray *_colorsArray = [[NSMutableArray alloc] initWithCapacity:_depth];
  30.     CGFloat *components =  (CGFloat *)CGColorGetComponents(_foregroundColor.CGColor);
  32.     //add as a first color in our array the original color
  33.     [_colorsArray insertObject:_foregroundColor atIndex:0];
  35.     //create a gradient of our color (darkening in the depth)
  36.     int _colorStepSize = floor(100/_depth);
  38.     for (int i=0; i<_depth; i++) {
  40.         for (int k=0; k<3; k++) {
  41.             if (components[k]>(_colorStepSize/255.f)) {
  42.                 components[k]-=(_colorStepSize/255.f);
  43.             }
  44.         }        
  45.         _newColor = [UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:CGColorGetAlpha(_foregroundColor.CGColor)];
  47.         //we are inserting always at first index as we want this array of colors to be reversed (darkest color being the last)
  48.         [_colorsArray insertObject:_newColor atIndex:0];
  49.     }
  51.     //we will draw repeated copies of our text, with the outline color and foreground color, starting from the deepest
  52.     for (int i=0; i<_depth; i++) {
  54.         //change color
  55.         _newColor = (UIColor*)[_colorsArray objectAtIndex:i];
  57.         //draw the text
  58.         CGContextSaveGState(context);
  60.         CGContextSetShouldAntialias(context, YES);        
  62.         //draw outline if this is the last layer (front one)
  63.         if (i+1==_depth) {
  64.             CGContextSetLineWidth(context, 1);
  65.             CGContextSetLineJoin(context, kCGLineJoinRound);
  67.             CGContextSetTextDrawingMode(context, kCGTextStroke);
  68.             [_outlineColor set];
  69.             [_text drawAtPoint:CGPointMake(i, i) withFont:_font];
  70.         }
  72.         //draw filling        
  73.         [_newColor set];
  75.         CGContextSetTextDrawingMode(context, kCGTextFill);
  77.         //if this is the last layer (first one we draw), add the drop shadow too and the outline
  78.         if (i==0) {
  79.             CGContextSetShadowWithColor(context, CGSizeMake(-2, -2), 4.0f, _shadowColor.CGColor);
  80.         }
  81.         else if (i+1!=_depth){
  82.             //add glow like blur
  83.             CGContextSetShadowWithColor(context, CGSizeMake(-1, -1), 3.0f, _newColor.CGColor);
  84.         }
  86.         [_text drawAtPoint:CGPointMake(i, i) withFont:_font];
  87.         CGContextRestoreGState(context);        
  88.     }
  90.     UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
  91.     UIGraphicsEndImageContext();
  92.     return finalImage;
  93. }
  96. @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];

相关推荐