iOS中的绘图教程品读后的顿悟篇(二)

UIKit框架Core Graphics

作为初学者,很容易被UIKit和Core Graphics两个支持绘图的框架迷惑。

UIKit

像UIImage、NSString(绘制文本)、UIBezierPath(绘制形状)、UIColor都知道如何绘制自己。这些类提供了功能有限但使用方便的方法来让我们完成绘图任务。一般情况下,UIKit就是我们所需要的。

使用UiKit,你只能在当前上下文中绘图,所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect:方法中,你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context:参数,那么使用UIKit提供的方法之前,必须将该上下文参数转化为当前上下文。幸运的是,调用UIGraphicsPushContext 函数可以方便的将context:参数转化为当前上下文,记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

从第一段话开始就重要了,这给我很大启示,UIKit框架中都是像UIImage、NSString(绘制文本)、UIBezierPath(绘制形状)、UIColor,这些类的调用方法,我就想起在上一篇中我们发现CoreGraphics是基于C的一套API.这样我们就可以大致区分起来.用UI,NS 开头都这些类.调用的方法就属于UIKIt框架.

第二段话就可以和我们上一篇最后一个问题对上了,这个Context参数到底怎么用?

调用UIGraphicsPushContext 函数可以方便的将context:参数转化为当前上下文,记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

代码具体怎么写? 我们接着品读....

Core Graphics

这是一个绘图专用的API族,它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石,包括UIKit。

使用Core Graphics之前需要指定一个用于绘图的图形上下文(CGContextRef),这个图形上下文会在每个绘图函数中都会被用到。如果你持有一个图形上下文context:参数,那么你等同于有了一个图形上下文,这个上下文也许就是你需要用来绘图的那个。如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect:方法中,并没有引用一个上下文。为了使用Core Graphics,你可以调用UIGraphicsGetCurrentContext函数获得当前的图形上下文。

至此,我们有了两大绘图框架的支持以及三种获得图形上下文的方法(drawRect:、drawRect: inContext:、UIGraphicsBeginImageContextWithOptions)。那么我们就有6种绘图的形式。如果你有些困惑了,不用怕,我接下来将说明这6种情况。无需担心还没有具体的绘图命令,你只需关注上下文如何被创建以及我们是在使用UIKit还是Core Graphics。

从这里感觉就没什么说的,思绪捋通了,跟着教程一步一步来.也有可能有什么遗漏了,由于我目前的水平,无法看出什么门道.

下面绘图方法的具体的代码了:

第一种绘图形式:在UIView的子类方法drawRect:中绘制一个蓝色圆,使用UIKit在Cocoa为我们提供的当前上下文中完成绘图任务。

- (void) drawRect: (CGRect) rect { 
UIBezierPath* p = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 
 [[UIColor blueColor] setFill]; 
 [p fill]; 
 } 

这个代码要注意:
1.使用的cocoa提供给我们的上下文.
2.这里我们使用的是UIKit框架中两个类UIBezierPath , UIColor
3.以及这两个结构 组合的时候,没有出现上下文的影子.但确实是有上下文存在.在回看本篇开头对UIKIt框架绘图APi的介绍.可以直接使用API进行绘制.可以理解这里对上下文进行了封装.

第二种绘图形式:使用Core Graphics实现绘制蓝色圆。

- (void) drawRect: (CGRect) rect { 
  //这里我对代码稍微注释下:
CGContextRef con = UIGraphicsGetCurrentContext(); 

CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); 
 //设定规则 绘制上下文的形状
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); 
 //设定规则 绘制上下文的颜色
CGContextFillPath(con); 
//Paints the area within the current path, using the nonzero winding number rule.
//就是说使用前面设定的规则,来绘制当前path内的区域.
//Quartz treats each subpath as if it were closed by calling CGContextClosePath. The nonzero winding number rule is described in Filling a Path in Quartz 2D Programming Guide. 
As a side effect when you call this function, Quartz clears the current path.
//一般用的是CGContextClosePath 这个方法,现在这个代码会有一个副作用,会清除当前的路径.大家使用的时候要注意.看各种情况下使用吧.
} 

第二种和第一种对比着看,就很清晰了.这个使用的是Core Graphics框架绘图.这时候我们再回头看本篇中Core Graphics中介绍,

使用Core Graphics之前需要指定一个用于绘图的图形上下文(CGContextRef)

所以,我就懂了,绘制的时候第一步要先获取上下文的应用.
说下,上面两个方法的效果是一样的,都是一个蓝色的填充的圆.

第三种绘图形式:我将在UIView子类的drawLayer:inContext:方法中实现绘图任务。drawLayer:inContext:方法是一个绘制图层内容的代理方法。为了能够调用drawLayer:inContext:方法,我们需要设定图层的代理对象。但要注意,不应该将UIView对象设置为显示层的委托对象,这是因为UIView对象已经是隐式层的代理对象,再将它设置为另一个层的委托对象就会出问题。轻量级的做法是:编写负责绘图形的代理类。在MyView.h文件中声明如下代码:

@interface MyLayerDelegate : NSObject 

@end 

然后MyView.m文件中实现接口代码:

@implementation MyLayerDelegate 

- (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx { 

  UIGraphicsPushContext(ctx); 

  UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 

  [[UIColor blueColor] setFill]; 

  [p fill]; 

  UIGraphicsPopContext(); 

} 

@end 

直接将代理类的实现代码放在MyView.m文件的#import代码的下面,这样感觉好像在使用私有类完成绘图任务(虽然这不是私有类)。需要注意的是,我们所引用的上下文并不是当前上下文,所以为了能够使用UIKit,我们需要将引用的上下文转变成当前上下文。
因为图层的代理是assign内存管理策略,那么这里就不能以局部变量的形式创建MyLayerDelegate实例对象赋值给图层代理。这里选择在MyView.m中增加一个实例变量,因为实例变量默认是strong:

@interface MyView () { 

MyLayerDelegate* _layerDeleagete; 

} 

@end 

使用该图层代理:

MyView *myView = [[MyView alloc] initWithFrame: CGRectMake(0, 0, 320, 480)]; 

CALayer *myLayer = [CALayer layer]; 

_layerDelegate = [[MyLayerDelegate alloc] init]; 

myLayer.delegate = _layerDelegate; 

[myView.layer addSublayer:myLayer]; 

[myView setNeedsDisplay]; // 调用此方法,drawLayer: inContext:方法才会被调用。 

为了保证教程的完整性,我把三种方法的代码和说明一起复制过来,来说明.第三种方法看似这么复杂,如果仅说明绘制这部分.
我来说简单点的步骤:

第一步.在我们自定义的UIVIew----MyDrawView中重写

-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
UIGraphicsPushContext(ctx);

UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];

[[UIColor blueColor] setFill];

[p fill];

UIGraphicsPopContext();

}

第二步.在ViewController中使用

- (void)viewDidLoad {
[super viewDidLoad];

MyDrawView *mydrayView = [[MyDrawView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
[self.view addSubview:mydrayView];
[mydrayView.layer setNeedsDisplay];

// Do any additional setup after loading the view, typically from a nib.
}

然后品读这段教程中的代码:
大致是封装一个MyView的自定义View类.
新建了一个图层,添加在视图上,并为这个图层设置了一个代理.并重写了绘制图层的方法.这里重写的方法的代码也就回答了,context引用转换成真正的画布的context上下文.如何写代码的问题了.
这里需要注意的是:
1.要有图层的概念.在view调用[myView setNeedsDisplay]这个的时候,新加的图层也会被重绘,并调用我们重写的代理方法.
2.我们在interface 中增加一个实例变量的默认属性是Strong.

第四种绘图形式: 使用Core Graphics在drawLayer:inContext:方法中实现同样操作,代码如下:

- (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con { 

CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); 

CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); 

CGContextFillPath(con); 

} 

这个我感觉没什么说的,替换了UIKit绘图的框架,类比第二种方法.

第五种绘图形式: 使用UIKit实现:
最后,演示UIGraphicsBeginImageContextWithOptions的用法,并从上下文中生成一个UIImage对象。生成UIImage对象的代码并不需要等待某些方法被调用后或在UIView的子类中才能去做。

UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0); 

UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)]; 

[[UIColor blueColor] setFill]; 

[p fill]; 

UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); 

UIGraphicsEndImageContext(); 

解释一下UIGraphicsBeginImageContextWithOptions函数参数的含义:第一个参数表示所要创建的图片的尺寸;第二个参数用来指定所生成图片的背景是否为不透明,如上我们使用YES而不是NO,则我们得到的图片背景将会是黑色,显然这不是我想要的;第三个参数指定生成图片的缩放因子,这个缩放因子与UIImage的scale属性所指的含义是一致的。传入0则表示让图片的缩放因子根据屏幕的分辨率而变化,所以我们得到的图片不管是在单分辨率还是视网膜屏上看起来都会很好。

这段话,作者自己有解释.我们要注意的是
UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); 这行代码是从当前上下文中回去图片,我们是否可以在其他地方例如cocoa提供的上下文中使用呢?

答案是否定的.看方法注释
You should call this function only when a bitmap-based graphics context is the current graphics context. If the current context is nil or was not created by a call to UIGraphicsBeginImageContext, this function returns nil.
前一句只有是位图图形的上下文才可以.我还不是很懂,但是下面一句,如果这个上下文,不是用UIGraphicsBeginImageContext 创建的,那么这个方法就会返回nil,所以这个方法使用有限定,大家要注意了.

第六种绘图形式: 使用Core Graphics实现:

UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0); 

CGContextRef con = UIGraphicsGetCurrentContext(); 

CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100)); 

CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor); 

CGContextFillPath(con); 

UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); 

UIGraphicsEndImageContext(); 

UIKit和Core Graphics可以在相同的图形上下文中混合使用。在iOS 4.0之前,使用UIKit和UIGraphicsGetCurrentContext被认为是线程不安全的。而在iOS4.0以后苹果让绘图操作在第二个线程中执行解决了此问题。

第六种绘图方法也没有什么说的,就是下面这种说两个框架可以混合使用,这种操作一般是没有什么问题,从我的感觉上来说,要不断地进行县城交叉渲染的时候尽量避免双重框架混合使用.避免不必要的bug.也就是没事别惹事.有事先看这里.出bug,看看是不是混合使用的问题.

下面的教程就是一些使用的例子.
等下篇,我再一一品读.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎。它提供了低...
    ShanJiJi阅读 1,505评论 0 20
  • 原文地址:http://www.cocoachina.com/industry/20140115/7703.htm...
    默默_David阅读 6,094评论 0 1
  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,690评论 2 10
  • 微信公众号支付分为三类 以下主要介绍公众号H5授权支付 首先看一下微信支付的业务逻辑 大部分微信支付逻辑在于服务器...
    撩人C小罗阅读 2,638评论 0 0
  • 感恩每天的生活,使我越来越成熟!
    宝贵的爱阅读 239评论 0 0