文档章节

iOS 图形处理 翻译

孙启超
 孙启超
发布于 2014/04/09 21:45
字数 2289
阅读 103
收藏 1

原文的题目是 Designing for iOS: Graphics & Performance

 

---Begin---

之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样。但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同。

 

【在屏幕背后的东西】

为了了解性能是如何受到影响的,我们需要进一步地观察iOS里图形实现背后的一些内容。下面这张图呈现了不同的frameworks和libraries之间的一些联系:

在最顶层的就是UIKit,一个在iOS中用来管理用户图形交互的Objc高级的框架,它由一系列的集合类构成,例如UIButton、UILabel,每一个都负责他们指定的UI Control角色。UIKit本身构建在一个叫Core Animation的框架之上,它因为被用于处理更为强大的平滑的转场效果而引入OS X Leopard和iOS而出名。

 

再往下深入一点就是OpenGL ES了,一个用在移动设备上绘制2D和3D计算机图形的标准开源库,它广泛地被用在游戏的图形绘制上,同样在Core Animation和UIKit中发挥着强大的作用。

 

最后一部分就是Core Graphics,曾经在Quartz(一个基于CPU的绘制引擎,在OS X系统上初次露脸)中被引入。这两个较为底层的框架都是用C语言编写的。

 

上图中的最底下一行是硬件层,由GPU和CPU组成。

 

我们经常说到的硬件加速其实是指OpenGL,Core Animation/UIKit基于GPU之上对计算机图形合成以及绘制的实现,直到目前为止,iOS上的硬件加速能力还是大大领先与android,后者由于依赖CPU的绘制,绝大多数的动画实现都会让人感觉明显的卡顿。

 

而离屏绘制(Offscreen drawing)的话就是指GPU一边在当前屏幕上进行绘制,而另一边在屏幕还没有处理图像信息之前通过CPU来生成图像信息的处理过程。在iOS当中,离屏绘制在以下的情况下会自动触发:

* Core Graphics(任何以CG开头的类)
* 在drawRect方法里,甚至是空方法实现
* 所有shouldRasterize属性是YES的CALayers对象    
* 所有用了masks(setMasksToBounds)和动态阴影的(setShadow*)的CALayers对象
* 所有文字的绘制,包括CoreText
* Group opacity(UIViewGroupOpacity)

总地来说,当有涉及到动画的时候离屏绘制就会影响到性能,你可以通过Instruments进行真机调试,从而检测到底是哪部分UI正在进行离屏绘制:

1.接入设备

 

2.在XCode的Developer Applications里打开Instruments(Command+Shift+i)   

3.选择iOS>Graphics>Core Animation template 

4.打开详情面板,选择适当的窗口模式 

5.选择你的target设备

 

6.检查Color Offscreen-Rendered Yellow的debug选项

 

7.在你设备上所有的离屏绘制都会呈现出黄色的色调

现在让我们逐一检查上一篇文章里涉及的一些技术点的性能表现。

 

【预资源加载绘制】

使用UIImage来加载原先就在磁盘中的图片作为自定义UIButton的背景图片的话,完全依赖与GPU的绘制。而且如果用可resizable的图片,也可适当避免当背景大小动态变换的时候需要不同大小的图片,这样可以让我们App的bundle做得更小,而且在绘制像素的图的时候也重复地利用了硬件加速。

 

【使用CALayer】

因为基于CALayer实现的方法里我们使用到了遮罩去绘制圆角的效果,所以这里会涉及到离屏绘制。当我们使用Core Animation框架的时候,如果上面提到的用遮罩绘制圆角的属性是开启的话,我们也必须明确地禁止使用动画效果。作为底线,除非你非要进行一个动画转场效果,否则这种方法并不适用。

 

【使用drawRect】

drawRect方法依赖Core Graphics框架来进行自定义的绘制,但这种方法主要的缺点就是它处理touch事件的方式:每次按钮被点击后,都会用setNeddsDisplay进行强制重绘;而且不止一次,每次单点事件触发两次执行。这样的话从性能的角度来说,对CPU和内存来说都是欠佳的。特别是如果在我们的界面上有多个这样的UIButton实例。

 

【技巧混合 hybrid approach】

这样来说的话,是不是就意味着使用预资源加载进行绘制就是唯一可行的方案了呢?答案是否定的。如果你坚持需要用代码来灵活地进行绘制的话,还是有一些优化代码还有减少性能消耗方面的技巧的。有一种可行的方案就是创建stretchable的位图并在多个实例对象之间进行重用。

 

我们按照在之前的教程的相同步骤创建一个新的UIButton的子类,然后如下定义一些静态变量

 // In CBHybrid.m
 #import "CBHybrid.h"
 @implementation CBHybrid
    
// Resizable background image for normal state static UIImage *gBackgroundImage;
    
// Resizable background image for highlighted state static UIImage *gBackgroundImageHighlighted;
    
// Background image border radius and height
 static int borderRadius = 5;
 static int height = 37;

接下来我们把CBBezie内drawRect里的代码换个地方,通过一系列的改变之后:我们可以创建一个resizable的Image用来取代之前固定尺寸的Image,然后我们可以持有该静态对象并便于重用

    - (UIImage *)drawBackgroundImageHighlighted:(BOOL)highlighted {
        // Drawing code goes here    }

首先,我们需要知道我们resizable Image的宽,为了优化性能,我们应该在图片的中间保留一个像素的宽

float width = 1 + (borderRadius * 2);

高的话在这个case里就不是非常重要了,因为这个按钮的高度对渐变层来说已经足够可见,设置为37pt的话也是出于和其余几个按钮的高度相同的原因。

搞定之后,我们需要一个bitmap context来进行绘制,搞起~

UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

UIGraphicsBeginImageContextWithOptions第二个参数为NO的话确保我们创建的Image context是透明的(带Alpha),最后的参数是scale factor(屏幕密度),如果是0的话就是当前设备的默认scale factor。

接下来的代码就和我们之前用Core Graphics来实现CBBezier的Demo里用到的非常相像了。我们用highlighted参数替换默认的self.highlighted属性,把用作更新界面的图像的信息值保存下来。

// Gradient Declarations
// NSArray *gradientColors = ...
    
// Draw rounded rectangle bezier path
UIBezierPath *roundedRectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0, 0, width, height) cornerRadius: borderRadius];
    
// Use the bezier as a clipping path
[roundedRectanglePath addClip];
    
// Use one of the two gradients depending on the state of the button
CGGradientRef background = highlighted? highlightedGradient : gradient;
    
// Draw gradient within the path
CGContextDrawLinearGradient(context, background, CGPointMake(140, 0), CGPointMake(140, height-1), 0);
    
// Draw border
// [borderColor setStroke...
    
// Draw Inner Glow
// UIBezierPath *innerGlowRect...

我们唯一需要添加的步骤就是,用UIGraphicsEndImageContext来保存图像信息,并且放到UIImage对象中。

UIImage* backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
    
// Cleanup
UIGraphicsEndImageContext();

现在我们已经完成了创建背景图片的方法,接下来我们必须实现一个通用的初始化方法用来实例化Images,并且把他们设置为CBHybird实例真正的背景。

- (void)setupBackgrounds {
 
// Generate background images if necessary
    if (!gBackgroundImage &&!gBackgroundImageHighlighted) {
        gBackgroundImage = [[self drawBackgroundImageHighlighted:NO] resizableImageWithCapInsets:UIEdgeInsetsMake(borderRadius, borderRadius, borderRadius, borderRadius) resizingMode:UIImageResizingModeStretch];
        gBackgroundImageHighlighted = [[self drawBackgroundImageHighlighted:YES] resizableImageWithCapInsets:UIEdgeInsetsMake(borderRadius, borderRadius, borderRadius, borderRadius) resizingMode:UIImageResizingModeStretch];
    }
 
// Set background for the button instance
    [self setBackgroundImage:gBackgroundImage forState:UIControlStateNormal];
    [self setBackgroundImage:gBackgroundImageHighlighted                     forState:UIControlStateHighlighted];
}

我们可以用custom的类型来实例化我们的CBHybird,当然也可以用initWithCoder,如果想用在代码里实现的话我们还可以用initWithFrame(···其实这里我是不想翻译的,原作者写得真是太详细了,第一次翻译技术文章,还是彻底点吧。。。)

    
+ (CBHybrid *)buttonWithType:(UIButtonType)type
{
   return [super buttonWithType:UIButtonTypeCustom];
}
    
- (id)initWithCoder:(NSCoder *)aDecoder 
{
    self = [super initWithCoder:aDecoder];
    if (self) 
       [self setupBackgrounds];
    return self;
}

为了确保我们新建的BHybird类能正常使用,在Interface Builder里我们赋值一个button,把实现类改成CBHybird后,把button的content内容改为CGContext-generated image(便于区分)。是驴是马,咱们cmd+R跑起来试试。

 

完整的子类实现代码在这里~~~

 

【结束语】

所有都搞定之后,我们发现用预资源加载绘制仍然比任何一种基于代码实现的方案表现得更为出色。然而,Core Graphicsis在效率和灵活性上更有优势。因此,基于两种技巧的混合方案在现在看来包含了以上两个的长处,而且在性能上也并没有明显的影响。

---Over---


© 著作权归作者所有

共有 人打赏支持
孙启超
粉丝 122
博文 172
码字总数 276126
作品 0
浦东
高级程序员
私信 提问
基于 GPU 加速的图形和视频处理库 - GPUImage 3

GPUImage 3 是 GPUImage 的第三次迭代,这是一个用于在 Mac 和 iOS 上执行 GPU 加速的图形和视频处理库。原始的 GPUImage 库是用 Objective-C 编写的,适用于 Mac 和 iOS;第二代使用 Swift ...

匿名
2018/07/17
0
0
iOS 学习资料整理

视频教程(英文) Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS SDK 的使用, 属于 iOS 基础视频 iPad and iPhone Applic...

拉偶有所依
2015/01/19
2.2K
4
Libgdx 1.6.1 发布,开源跨平台游戏开发框架

Libgdx 1.6.1 发布,更新内容如下: - Net.newServerSocket方法中添加可选的主机名,允许gdx开发的服务器程序进行特定的IP绑定。 - 更改iOS本地库的处理方式。从ios/build.gradle中移除updat...

宋志辉
2015/06/05
2.4K
12
iOS 7开发快速入门随书资料

《iOS 7开发快速入门》全面、系统地介绍了iOS 7开发技术。全书共分3篇17章。 第1篇 包括第1~4章,介绍了iOS 7的新功能、iOS 7的开发工具Xcode 5、第一个iOS 7应用程序的开发、Objective-C语...

请叫我院长
2014/02/19
812
1
GPU vs CPU in iOS

一直以来,我们做产品的时候并没有特别的去考虑CPU/GPU的使用,最近为了提升可视化功能的性能,发现合理使用GPU也是一个可以好好研究的部分,这里总结一下一些有用的信息。 中央处理器 CPU ...

雨_树
2018/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

生产者消费者问题(PV操作)

一、明确定义 要理解生产消费者问题,首先应弄清PV操作的含义:PV操作是由P操作原语和V操作原语组成(原语是不可中断的过程),对信号量进行操作,具体定义如下: P(S):①将信号量S的值减...

shzwork
19分钟前
0
0
重新认识网络通信协议

OSI网络分层 应用层 http, smtp,pop3这些都属于应用层协议 为用户的应用程序提供服务 表示层 确保一个系统的应用层发送的信息被另一个系统的应用层接收到 会话层 通过传输层建立数据传输的通...

最胖的瘦子
30分钟前
0
0
【转】分布式数据流的轻量级异步快照

本篇翻译自论文:Lightweight Asynchronous Snapshots for Distributed Dataflows,Flink的容错快照模型即来源于该论文。原文地址:https://arxiv.org/pdf/1506.08603.pdf 分布式数据流的轻量...

yiduwangkai
32分钟前
0
0
java使用反射机制设置私有成员变量的值

写一个方法:public void setProperty(Objectobj, String propertyName, Object value){}, 此方法可将obj对象中名为propertyName的属性的值设置为value。(这里不知道obj对象的propertyNam...

群星纪元
38分钟前
0
0
用 Tapestry 的方式在页面模板中加入注释

<span jwcid="$remove$">这里是注释</span>

LeoXu
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部