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

 
 
 

级别: 帮帮团
发帖
487
云币
430
 
只看楼主 更多操作楼主  发表于: 2014-06-10
 
 
 
我想要在IOS中对一些文本进行3D效果渲染,使用了UIKit和标准视图控制器。 
实现之的效果大概能成为这样: 
 
 
能不能通过iOS和UIKit实现?我只用了一个静态PNG图片,文本内容根据用户数据变化。
 
 
 
关键词: ios开发 3D效果

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

 
 
 

级别: 小白
发帖
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. //
  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];

如何让IOS中的文本实现3D效果的更多相关文章

  1. 关于ios中的文本操作-简介

    来源:About Text Handling in iOS 官方文档 iOS平台为我们提供了许多在app中展示文本和让用户编辑文本的方式.同时,它也允许你在app视图中展示格式化的文本和网页内容.你可 ...

  2. iOS中textbox文本框清除圆角

    在iOS.Mac safari中,所有的textbox, select, checkbox都会被强制美化为圆角.但在特殊情况下需要清除圆角时发现iOS中使用以下传统的css无效: border-rad ...

  3. 关于iOS中的文本操作-管理text fields 和 text views

    Managing Text Fields and Text Views 管理UITextField和UITextView实例 UITextField和UITextView的实例拥有两个最主要的功能:展 ...

  4. iOS中 UITextView文本视图 技术分享

    UITextView: 文本视图相比与UITextField直观的区别就是UITextView可以输入多行文字并且可以滚动显示浏览全文. UITextField的用处多,UITextView的用法也不 ...

  5. IOS中一个简单的粒子效果实现

    1.效果图展示 2.实现思路 1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现 2> 关于粒 ...

  6. 谈谈iOS中粘性动画以及果冻效果的实现

    在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: https://github.c ...

  7. 转:谈谈iOS中粘性动画以及果冻效果的实现

    在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是 ...

  8. ios中仿蚂蚁森林动画效果

    参考链接:https://www.jianshu.com/p/0ba9d80f8e77 demo下载链接:https://gitee.com/ovix/TreeWithRandomFruitBtn

  9. 文本的3D效果

    HTML <div class="g-box"> <h1>CSS的世界很美</h1> </div> CSS .g-box { wid ...

随机推荐

  1. iOS Reachability检测网络状态

    一.整体介绍 前面已经介绍了网络访问的NSURLSession.NSURLConnection,还有网页加载有关的webview,基本满足通常的网络相关的开发.其实在网络开发中还有比较常用的就是网络状 ...

  2. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  3. 【C#/WPF】用Thumb做可拖拽的UI控件

    需求:简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台: <Canvas x:Name="g"> < ...

  4. 【WPF】XAML实现按钮背景图片的点击切换

    原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...

  5. java的static块执行时机<转>

    一.误区:简单认为JAVA静态代码块在类被加载时就会自动执行.证错如下: class MyClass1 { static {//静态块 System.out.println("static  ...

  6. warning: ignoring option PermSize=256m; support was removed in 8.0

    使用jdk1.8后,控制台出现下面提示信息: Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=256m; sup ...

  7. nginx日志分析利器GoAccess(转)

    面试的时候一定会被面到的问题是:给出web服务器的访问日志,请写一个脚本来统计访问前10的IP有哪些?访问前10的请求有哪些?当你领略过goaccess之后,你就明白,这些问题,除了考验你的脚本背诵记 ...

  8. Ajax-ajax实例4-多级联动菜单

    项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 .选项的动态创建与删除document 对象的 createElement 方法可以 ...

  9. mysql 修改数据库存储地址

    默认目录/var/lib/mysql systemctl stop mysqld cp -pr /var/lib/mysql /data/mysql Create a backup of /etc/m ...

  10. PHP注释的艺术——phpDoc规范

    用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释   /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...