Quartz 2D编程指南之二:图形上下文(Graphics Contexts)

本文转载自:http://southpeak.github.io/2014/11/11/quartz2d-2/

一个Graphics Context表示一个绘制目标。它包含绘制系统用于完成绘制指令的绘制参数和设备相关信息。Graphics Context定义了基本的绘制属性,如颜色、裁减区域、线条宽度和样式信息、字体信息、混合模式等。

我们可以通过几种方式来获取Graphics Context:Quartz提供的创建函数、Mac OS X框架或IOS的UIKit框架提供的函数。Quartz提供了多种Graphics Context的创建函数,包括bitmap和PDF,我们可以使用这些Graphics Context创建自定义的内容。

本章介绍了如何为不同的绘制目标创建Graphics Context。在代码中,我们用CGContextRef来表示一个Graphics Context。当获得一个Graphics Context后,可以使用Quartz 2D函数在上下文(context)中进行绘制、完成操作(如平移)、修改图形状态参数(如线宽和填充颜色)等。

在iOS中的视图Graphics Context进行绘制

在iOS应用程序中,如果要在屏幕上进行绘制,需要创建一个UIView对象,并实现它的drawRect:方法。视图的drawRect:方法在视图显示在屏幕上及它的内容需要更新时被调用。在调用自定义的drawRect:后,视图对象自动配置绘图环境以便代码能立即执行绘图操作。作为配置的一部分,视图对象将为当前的绘图环境创建一个Graphics Context。我们可以通过调用UIGraphicsGetCurrentContext函数来获取这个Graphics Context。

UIKit默认的坐标系统与Quartz不同。在UIKit中,原点位于左上角,y轴正方向为向下。UIView通过将修改Quartz的Graphics Context的CTM[原点平移到左下角,同时将y轴反转(y值乘以-1)]以使其与UIView匹配。

在Mac OS X中创建一个窗口Graphics Context

在Mac OS X中绘制时,我们需要创建一个窗口Graphics Context。Quartz 2D API 没有提供函数来获取窗口Graphics Context。取而代之的是用Cocoa框架来获取一个窗口上下文。

我们可以在Cocoa应用程序的drawRect:中获取一个Quartz Graphics Context,如下代码所示:

CGContextRefmyContext = [[NSGraphicsContextcurrentContext] graphicsPort];

currentContext方法在当前线程中返回NSGraphicsContext实例。graphicsPort方法返回一个低级别、平台相关的Graphics Context(Quartz Graphics Context)。

在获取到Graphics Context后,我们可以在Cocoa应用程序中调用任何Quartz 2D的绘制函数。我们同样可以将Quartz 2D与Cocoa绘制操作混合使用。如图2-1是一个在Cocoa视图中用Quartz 2D绘制的实例。绘图由两个长方形组成(一个不透明的红色长方形和半透明的蓝色长方形)。

Figure 2-1 A view in the Cocoa framework that contains Quartz drawing

为了实现图2-1实例,需要先创建一个Cocoa应用程序。在Interface Builder中,拖动一个Custom View到窗口中,并子类化。然后实现子类视图的,如代码清单2-1所示。视图的drawRect:包含了所有的Quartz绘制代码。

注:NSView的drawRect:方法在每次视图需要绘制时自动调用。

Listing 2-1 Drawing to a window graphics context

@implementationMyQuartzView

- (id)initWithFrame:(NSRect)frameRect

{

self= [superinitWithFrame:frameRect];

returnself;

}

- (void)drawRect:(NSRect)rec

{

CGContextRefmyContext = [[NSGraphicsContextcurrentContext] graphicsPort];//1

// ********** Your drawing code here **********      //2

CGContextSetRGBFillColor(myContext,1,0,0,1);//3

CGContextFillRect(myContext,CGRectMake(0,0,200,100));//4

CGContextSetRGBFillColor(myContext,0,0,1,.5);//5

CGContextFillRect(myContext,CGRectMake(0,0,100,200));//6

}

@end

代码说明:

为视图获取一个Graphics Context

插入绘图代码的地方。以下四行是使用Quartz 2D函数的例子

设置完全不透明的红色填充色。

填充一个长方形,其原点为(0, 0), 大小为(200, 100)

设置半透明的蓝色填充色。

填充一个长方形,其原点为(0, 0), 大小为(100, 200)

创建一个PDF Graphics Context

当创建一个PDF Graphics Context并绘制时,Quartz将绘制操作记录为一系列的PDF绘制命令并写入文件中。我们需要提供一个PDF输出的位置及一个默认的media box(用于指定页面边界的长方形)。图2-2显示了在PDF Graphics Context中绘制及在preview打开PDF的结果。

Figure 2-2 A PDF created by using CGPDFContextCreateWithURL

Quartz 2D API提供了两个函数来创建PDF Graphics Context:

CGPDFContextCreateWithURL:当你需要用Core Foundation URL指定pdf输出的位置时使用该函数。代码清单2-2显示了该函数的使用方法(代码2-2及后面代码的详细解释略):

Listing 2-2 Calling CGPDFContextCreateWithURL to create a PDF graphics context

CGContextRefMyPDFContextCreate (constCGRect*inMediaBox,CFStringRefpath)

{

CGContextRefmyOutContext =NULL;

CFURLRefurl;

url =CFURLCreateWithFileSystemPath(NULL, path, kCFURLPOSIXPathStyle,false);

if(url !=NULL) {

myOutContext =CGPDFContextCreateWithURL(url,  inMediaBox,NULL);

CFRelease(url);

}

returnmyOutContext;

}

CGPDFContextCreate:当需要将pdf输出发送给数据用户时使用该方法。代码清单2-3显示了该函数的使用方法:

Listing 2-3 Calling CGPDFContextCreate to create a PDF graphics context

CGContextRefMyPDFContextCreate (constCGRect*inMediaBox,CFStringRefpath)

{

CGContextRefmyOutContext =NULL;

CFURLRefurl;

CGDataConsumerRefdataConsumer;

url =CFURLCreateWithFileSystemPath(NULL,  path, kCFURLPOSIXPathStyle,false);

if(url !=NULL)

{

dataConsumer =CGDataConsumerCreateWithURL(url);

if(dataConsumer !=NULL)

{

myOutContext =CGPDFContextCreate(dataConsumer, inMediaBox,NULL);

CGDataConsumerRelease(dataConsumer);

}

CFRelease(url);

}

returnmyOutContext;

}

代码清单2-4显示是如何调用MyPDFContextCreate程序及绘制操作。

Listing 2-4 Drawing to a PDF graphics context

CGRectmediaBox;

mediaBox =CGRectMake(0,0, myPageWidth, myPageHeight);

myPDFContext = MyPDFContextCreate (&mediaBox,CFSTR("test.pdf"));

CFStringRefmyKeys[1];

CFTypeRefmyValues[1];

myKeys[0] = kCGPDFContextMediaBox;

myValues[0] = (CFTypeRef)CFDataCreate(NULL,(constUInt8*)&mediaBox,sizeof(CGRect));

CFDictionaryRefpageDictionary =CFDictionaryCreate(NULL, (constvoid**) myKeys,

(constvoid**) myValues,1,

&kCFTypeDictionaryKeyCallBacks,

& kCFTypeDictionaryValueCallBacks);

CGPDFContextBeginPage(myPDFContext, &pageDictionary);

// ********** Your drawing code here **********

CGContextSetRGBFillColor(myPDFContext,1,0,0,1);

CGContextFillRect(myPDFContext,CGRectMake(0,0,200,100));

CGContextSetRGBFillColor(myPDFContext,0,0,1,.5);

CGContextFillRect(myPDFContext,CGRectMake(0,0,100,200));

CGPDFContextEndPage(myPDFContext);

CFRelease(pageDictionary);

CFRelease(myValues[0]);

CGContextRelease(myPDFContext);

我们可以将任何内容(图片,文本,绘制路径)绘制到pdf中,并能添加链接及加密。

创建位图Graphics Context

一个位图Graphics Context接受一个指向内存缓存(包含位图存储空间)的指针,当我们绘制一个位图Graphics Context时,该缓存被更新。在释放Graphics Context后,我们将得到一个我们指定像素格式的全新的位图。

注:位图Graphics Context有时用于后台绘制。CGLayer对象优化了后台绘制,因为Quartz在显卡上缓存了层。

iOS提示:iOS应用程序使用了UIGraphicsBeginImageContextWithOptions取代Quartz低层函数。如果使用Quartz创建一下后台bitmap,bitmap Graphics Context使用的坐标系统是Quartz默认的坐标系统。而使用UIGraphicsBeginImageContextWithOptions创建图形上下文,UIKit将会对坐标系统使用与UIView对象的图形上下文一样的转换。这允许应用程序使用相同的绘制代码而不需要担心坐标系统问题。虽然我们的应用程序可以手动调整CTM达到相同的效果,但这种做没有任何好处。

我们使用CGBitmapContextCreate来创建位图Graphics Context,该函数有如下参数:

data:一个指向内存目标的指针,该内存用于存储需要渲染的图形数据。内存块的大小至少需要(bytePerRow * height)字节。

width:指定位图的宽度,单位是像素(pixel)。

height:指定位图的高度, 单位是像素(pixel)。

bitsPerComponent:指定内存中一个像素的每个组件使用的位数。例如,一个32位的像素格式和一个rgb颜色空间,我们可以指定每个组件为8位。

bytesPerRow:指定位图每行的字节数。

colorspace:颜色空间用于位图上下文。在创建位图Graphics Context时,我们可以使用灰度(gray), RGB, CMYK, NULL颜色空间。

bitmapInfo:位图的信息,这些信息用于指定位图是否需要包含alpha组件,像素中alpha组件的相对位置(如果有的话),alpha组件是否是预乘的,及颜色组件是整型值还是浮点值。

代码清单2-5显示了如何创建位图Graphics Context。当向位图Graphics Context绘图时,Quartz将绘图记录到内存中指定的块中。

Listing 2-5 Creating a bitmap graphics context

CGContextRefMyCreateBitmapContext (intpixelsWide,intpixelsHigh)

{

CGContextRefcontext =NULL;

CGColorSpaceRefcolorSpace;

void*          bitmapData;

intbitmapByteCount;

intbitmapBytesPerRow;

bitmapBytesPerRow  = (pixelsWide *4);

bitmapByteCount    = (bitmapBytesPerRow * pixelsHigh);

colorSpace =CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);

bitmapData = calloc( bitmapByteCount );

if(bitmapData ==NULL)

{

fprintf (stderr,"Memory not allocated!");

returnNULL;

}

context =CGBitmapContextCreate(bitmapData, pixelsWide, pixelsHigh,8, bitmapBytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);

if(context==NULL)

{

free (bitmapData);

fprintf (stderr,"Context not created!");

returnNULL;

}

CGColorSpaceRelease( colorSpace );

returncontext;

}

代码清单2-6显示了调用MyCreateBitmapContext 创建一个位图Graphics Context,使用位图Graphics Context来创建CGImage对象,然后将图片绘制到窗口Graphics Context中。绘制结果如图2-3所示:

Listing 2-6 Drawing to a bitmap graphics context

CGRectmyBoundingBox;

myBoundingBox =CGRectMake(0,0, myWidth, myHeight);

myBitmapContext = MyCreateBitmapContext (400,300);

// ********** Your drawing code here **********

CGContextSetRGBFillColor(myBitmapContext,1,0,0,1);

CGContextFillRect(myBitmapContext,CGRectMake(0,0,200,100));

CGContextSetRGBFillColor(myBitmapContext,0,0,1,.5);

CGContextFillRect(myBitmapContext,CGRectMake(0,0,100,200));

myImage =CGBitmapContextCreateImage(myBitmapContext);

CGContextDrawImage(myContext, myBoundingBox, myImage);

char*bitmapData =CGBitmapContextGetData(myBitmapContext);

CGContextRelease(myBitmapContext);

if(bitmapData) free(bitmapData);

CGImageRelease(myImage);

Figure 2-3 An image created from a bitmap graphics context and drawn to a window graphics context

支持的像素格式

表2-1总结了位图Graphics Context支持的像素格式,相关的颜色空间及像素格式支持的Mac OS X最早版本。像素格式用bpp(每像素的位数)和bpc(每个组件的位数)来表示。表格同时也包含与像素格式相关的位图信息常量。

表2-1:位图Graphics Context支持的像素格式

反锯齿

位图Graphics Context支持反锯齿,这一操作是人为的较正在位图中绘制文本或形状时产生的锯齿边缘。当位图的分辩率明显低于人眼的分辩率时就会产生锯齿。为了使位图中的对象显得平滑,Quartz使用不同的颜色来填充形状周边的像素。通过这种方式来混合颜色,使形状看起来更平滑。如图2-4显示的效果。我们可以通过调用CGContextSetShouldAntialias来关闭位图Graphics Context的反锯齿效果。反锯齿设置是图形状态的一部分。

可以调用函数CGContextSetAllowsAntialiasing来控制一个特定Graphics Context是否支持反锯齿;false表示不支持。该设置不是图形状态的一部分。当上下文及图形状态设置为true时,Quartz执行反锯齿。

Figure 2-4 A comparison of aliased and anti-aliasing drawing

获取打印的Graphics Context

Mac OS X中的Cocoa应用程序通过自定义的NSView子类来实现打印。一个视图通过调用print:方法来进行打印。然后视图以打印机为目标创建一个Graphics Context,并调用drawRect:方法。应用程序使用与在屏幕进行绘制相同的绘制代码。我们同样可以自定义drawRect: 方法将图形绘制到打印机。

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

推荐阅读更多精彩内容