IOSbugiOS-swift互联网热门

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

2015-08-23  本文已影响3495人  司马捷

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,看看是不是混合使用的问题.

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

上一篇下一篇

猜你喜欢

热点阅读