版本记录
版本号 | 时间 |
---|---|
V1.0 | 2018.09.03 |
前言
Quartz 2D
框架相信大家都知道,也都一直在使用。Quartz 2D
的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz 2D
的API来自于Core Graphics
框架,数据类型和函数基本都以CG作为前缀,接下来几篇我们就一起来看一下这个框架。感兴趣可以看上面几篇文章。
1. Quartz 2D编程指南 (一) —— 简介(一)
2. Quartz 2D编程指南 (二) —— Quartz 2D概览(二)
Graphics Contexts - 图形上下文
图形上下文表示绘图目的地。它包含绘图参数和绘图系统执行任何后续绘图命令所需的所有特定于设备的信息。图形上下文定义基本的绘图属性,例如绘制时使用的颜色,剪切区域,线宽和样式信息,字体信息,合成选项以及其他几种。
您可以使用Quartz
上下文创建函数或使用某个Mac OS X框架或iOS中UIKit框架提供的更高级别函数来获取图形上下文。 Quartz提供各种Quartz图形上下文函数,包括位图和PDF,您可以使用它们来创建自定义内容。
本章介绍如何为各种绘图目的地创建图形上下文。图形上下文在代码中由数据类型CGContextRef
表示,它是一种不透明的数据类型。获取图形上下文后,可以使用Quartz 2D
函数绘制上下文,对上下文执行操作(如翻译),以及更改图形状态参数,如线宽和填充颜色。
Drawing to a View Graphics Context in iOS - 在iOS中绘制视图图形上下文
要在iOS应用程序中绘制到屏幕,请设置UIView对象并实现其 drawRect: 方法以执行绘图。当视图在屏幕上可见并且其内容需要更新时,将调用视图的drawRect:
方法。在调用自定义drawRect:
方法之前,视图对象会自动配置其绘图环境,以便您的代码可以立即开始绘制。作为此配置的一部分,UIView对象为当前绘图环境创建图形上下文( CGContextRef opaque类型)。您可以通过调用UIKit函数UIGraphicsGetCurrentContext在drawRect:
方法中获取此图形上下文。
整个UIKit使用的默认坐标系与Quartz使用的坐标系不同。在UIKit中,原点位于左上角,正y值指向下方。 UIView对象通过将原点转换为视图的左上角并通过将其乘以-1来反转y轴来修改Quartz图形上下文的CTM以匹配UIKit约定。有关修改坐标系统的更多信息以及您自己的绘图代码中的含义,请参阅Quartz 2D Coordinate Systems。
UIView对象在适用于View Programming Guide for iOS中有详细描述。
Creating a Window Graphics Context in Mac OS X - 在Mac OS X中创建窗口图形上下文
在Mac OS X
中绘图时,您需要创建适合您正在使用的框架的窗口图形上下文。 Quartz 2D API
本身不提供获取Windows图形上下文的函数。 相反,您使用Cocoa
框架来获取在Cocoa中创建的窗口的上下文。
您可以使用以下代码行从Cocoa应用程序的drawRect:
例程中获取Quartz
图形上下文:
CGContextRef myContext = [[NSGraphicsContext currentContext] graphicsPort];
currentContext
方法返回当前线程的NSGraphicsContext
实例。 方法graphicsPort
返回由接收器表示的低级,特定于平台的图形上下文,这是一个Quartz图形上下文。 (不要对方法名称感到困惑,它们是历史原因。)有关更多信息,请参阅NSGraphicsContext Class Reference。
获取图形上下文后,可以在Cocoa应用程序中调用任何Quartz 2D
绘图函数。 您还可以将Quartz 2D
调用与Cocoa
绘图调用混合使用。 通过查看图2-1,您可以看到Quartz 2D
绘图到Cocoa视图的示例。 该图由两个重叠的矩形组成,一个是不透明的红色,另一个是部分透明的蓝色。您将了解有关Color and Color Spaces的更多信息。 控制多少“透视”颜色的能力是Quartz 2D的标志性功能之一。
要创建图2-1中的绘图,首先要创建一个Cocoa应用程序Xcode项目。 在Interface Builder
中,将自定义视图拖到窗口并将其子类化。 然后为子类视图编写一个实现,类似于LIsting 2-1
所示。 对于此示例,子类视图名为MyQuartzView
。 视图的drawRect:
方法包含所有Quartz绘图代码。 列表后面会显示每个编号行代码的详细说明。
注意:每次需要绘制视图时,都会自动调用
NSView
类的drawRect:
方法。 要了解有关覆盖drawRect:
方法的更多信息,请参阅NSView Class Reference。
// Listing 2-1 Drawing to a window graphics context
@implementation MyQuartzView
- (id)initWithFrame:(NSRect)frameRect
{
self = [super initWithFrame:frameRect];
return self;
}
- (void)drawRect:(NSRect)rect
{
CGContextRef myContext = [[NSGraphicsContext // 1
currentContext] graphicsPort];
// ********** 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
这是代码的作用:
- 1)获取视图的图形上下文。
- 2)这是您插入绘图代码的地方。 下面的四行代码是使用
Quartz 2D
函数的示例。 - 3)设置完全不透明的红色填充颜色。 有关颜色和alpha(设置不透明度)的信息,请参阅Color and Color Spaces。
- 4)填充原点为(0,0)且宽度为200且高度为100的矩形。有关绘制矩形的信息,请参阅Paths。
- 5)设置部分透明的蓝色填充颜色。
- 6)填充一个矩形,其原点为(0,0),宽度为100,高度为200。
Creating a PDF Graphics Context - 创建一个PDF图像上下文
当您创建PDF图形上下文并绘制到该上下文时,Quartz会将您的绘图记录为一系列写入文件的PDF绘图命令。 您提供PDF输出的位置和默认媒体框 - 指定页面边界的矩形。 图2-2显示了绘制到PDF图形上下文然后在预览中打开生成的PDF的结果。
Quartz 2D API
提供了两个创建PDF图形上下文的函数:
-
CGPDFContextCreateWithURL
,当您要将PDF输出的位置指定为Core Foundation URL时使用。Listing 2-2
显示了如何使用此函数创建PDF图形上下文。 -
CGPDFContextCreate
,当您希望将PDF输出发送给数据使用者时使用。 (有关更多信息,请参阅Data Management in Quartz 2D。)Listing 2-3
显示了如何使用此函数创建PDF图形上下文。
每个列表后面的每个编号行代码的详细说明。
iOS注意:iOS中的PDF图形上下文使用Quartz提供的默认坐标系,而不应用变换来匹配UIKit坐标系。如果您的应用程序计划在PDF图形上下文和UIView对象提供的图形上下文之间共享绘图代码,则应用程序应修改PDF图形上下文的
CTM
以修改坐标系。请参见 Quartz 2D Coordinate Systems。
// Listing 2-2 Calling CGPDFContextCreateWithURL to create a PDF graphics context
CGContextRef MyPDFContextCreate (const CGRect *inMediaBox,
CFStringRef path)
{
CGContextRef myOutContext = NULL;
CFURLRef url;
url = CFURLCreateWithFileSystemPath (NULL, // 1
path,
kCFURLPOSIXPathStyle,
false);
if (url != NULL) {
myOutContext = CGPDFContextCreateWithURL (url,// 2
inMediaBox,
NULL);
CFRelease(url);// 3
}
return myOutContext;// 4
}
这是代码的作用:
- 1)调用
Core Foundation
函数从提供给MyPDFContextCreate
函数的CFString
对象创建CFURL
对象。 您将NULL
作为第一个参数传递以使用默认分配器。 您还需要指定路径样式,对于此示例,路径样式是POSIX
样式的路径名。 - 2)调用
Quartz 2D
函数,使用刚刚创建的PDF位置(作为CFURL对象)和指定PDF边界的矩形创建PDF图形上下文。 矩形(CGRect)
已传递给MyPDFContextCreate
函数,并且是PDF的默认页面媒体边界框。 - 3)释放
CFURL
对象。 - 4)返回PDF图形上下文。 调用者必须在不再需要时释放图形上下文。
// Listing 2-3 Calling CGPDFContextCreate to create a PDF graphics context
CGContextRef MyPDFContextCreate (const CGRect *inMediaBox,
CFStringRef path)
{
CGContextRef myOutContext = NULL;
CFURLRef url;
CGDataConsumerRef dataConsumer;
url = CFURLCreateWithFileSystemPath (NULL, // 1
path,
kCFURLPOSIXPathStyle,
false);
if (url != NULL)
{
dataConsumer = CGDataConsumerCreateWithURL (url);// 2
if (dataConsumer != NULL)
{
myOutContext = CGPDFContextCreate (dataConsumer, // 3
inMediaBox,
NULL);
CGDataConsumerRelease (dataConsumer);// 4
}
CFRelease(url);// 5
}
return myOutContext;// 6
}
这是代码的作用:
- 1)调用
Core Foundation
函数从提供给MyPDFContextCreate
函数的CFString
对象创建CFURL对象。您将NULL作为第一个参数传递以使用默认分配器。您还需要指定路径样式,对于此示例,路径样式是POSIX样式的路径名。 - 2)使用CFURL对象创建Quartz数据使用者对象。如果您不想使用CFURL对象(例如,您希望将PDF数据放在CFURL对象无法指定的位置),则可以从您在应用程序中实现的一组回调函数创建数据使用者。有关更多信息,请参阅Data Management in Quartz 2D。
- 3)调用
Quartz 2D
函数创建一个PDF图形上下文,作为参数传递给数据使用者和传递给MyPDFContextCreate
函数的矩形(CGRect类型)。此矩形是PDF的默认页面媒体边界框。 - 4)释放数据使用者。
- 5)释放CFURL对象。
- 6)返回PDF图形上下文。调用者必须在不再需要时释放图形上下文。
Listing 2-4
显示了如何调用MyPDFContextCreate
例程并绘制它。列表后面会显示每个编号行代码的详细说明。
// Listing 2-4 Drawing to a PDF graphics context
CGRect mediaBox;// 1
mediaBox = CGRectMake (0, 0, myPageWidth, myPageHeight);// 2
myPDFContext = MyPDFContextCreate (&mediaBox, CFSTR("test.pdf"));// 3
CFStringRef myKeys[1];// 4
CFTypeRef myValues[1];
myKeys[0] = kCGPDFContextMediaBox;
myValues[0] = (CFTypeRef) CFDataCreate(NULL,(const UInt8 *)&mediaBox, sizeof (CGRect));
CFDictionaryRef pageDictionary = CFDictionaryCreate(NULL, (const void **) myKeys,
(const void **) myValues, 1,
&kCFTypeDictionaryKeyCallBacks,
& kCFTypeDictionaryValueCallBacks);
CGPDFContextBeginPage(myPDFContext, &pageDictionary);// 5
// ********** Your drawing code here **********// 6
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);// 7
CFRelease(pageDictionary);// 8
CFRelease(myValues[0]);
CGContextRelease(myPDFContext);
这是代码的作用:
- 1)声明用于定义PDF媒体框的矩形的变量。
- 2)将媒体框的原点设置为(0,0),将宽度和高度设置为应用程序提供的变量。
- 3)调用函数
MyPDFContextCreate
(参见Listing 2-3)以获取PDF图形上下文,提供媒体框和路径名。宏CFSTR
将字符串转换为CFStringRef
数据类型。 - 4)使用页面选项设置字典。在此示例中,仅指定了媒体框。您不必传递用于设置PDF图形上下文的相同矩形。您在此处添加的媒体框将取代您传递的矩形以设置PDF图形上下文。
- 5)表示页面的开头。此函数用于面向页面的图形,这是PDF绘图。
- 6)调用Quartz 2D绘图函数。您可以使用适合您的应用程序的绘图代码替换此代码和以下四行代码。
- 7)表示PDF页面的结尾。
- 8)在不再需要时候,释放字典和PDF图形上下文。
您可以将任何内容写入适合您的应用程序的PDF - 图像,文本,路径绘图 - 并且您可以添加链接和加密。有关更多信息,请参阅PDF Document Creation, Viewing, and Transforming。
Creating a Bitmap Graphics Context - 创建位图图形上下文
位图图形上下文接受指向包含位图存储空间的内存缓冲区的指针。当您绘制到位图图形上下文时,缓冲区会更新。释放图形上下文后,您将以指定的像素格式获得完全更新的位图。
注意:位图图形上下文有时用于绘制屏幕外。在您决定使用位图图形上下文之前,请参阅Core Graphics Layer Drawing。
CGLayer
对象(CGLayerRef
)针对屏幕外绘图进行了优化,因为只要有可能,Quartz就会在视频卡上缓存图层。
iOS注意:iOS应用程序应使用函数。UIGraphicsBeginImageContextWithOptions而不是使用此处描述的低级Quartz函数。如果您的应用程序使用Quartz创建屏幕外位图,则位图图形上下文使用的坐标系是默认的Quartz坐标系。相反,如果您的应用程序通过调用函数
UIGraphicsBeginImageContextWithOptions
来创建图像上下文,则UIKit将相同的变换应用于上下文的坐标系,就像对UIView对象的图形上下文一样。这允许您的应用程序使用相同的绘图代码,而无需担心不同的坐标系。虽然您的应用程序可以手动调整坐标转换矩阵以获得正确的结果,但实际上,这样做没有性能优势。
您可以使用函数CGBitmapContextCreate
来创建位图图形上下文。此函数采用以下参数:
- 1)
data
。在内存中提供指向要渲染图形的目标的指针。此内存块的大小应至少为(bytesPerRow * height)
字节。 - 2)
width
。指定位图的宽度(以像素为单位)。 - 3)
height
。指定位图的高度(以像素为单位)。 - 4)
bitsPerComponent
。指定内存中像素的每个组件使用的位数。例如,对于32位像素格式和RGB颜色空间,您将为每个组件指定8位的值。请参阅Supported Pixel Formats。 - 5)
bytesPerRow
。指定位图每行使用的内存字节数。
提示:创建位图图形上下文时,如果确保数据和
bytesPerRow
是16字节对齐,则可以获得最佳性能。
6)
colorspace
。用于位图上下文的颜色空间。创建位图图形上下文时,可以提供Gray, RGB, CMYK, 和 NULL
颜色空间。有关颜色空间和颜色管理原则的详细信息,请参阅颜 Color Management Overview。有关在Quartz中创建和使用颜色空间的信息,请参阅Color and Color Spaces。有关支持的颜色空间的信息,请参阅Bitmap Images and Image Masks一章中的Color Spaces and Bitmap Layout。7)
bitmapInfo
。位图布局信息,表示为CGBitmapInfo
常量,指定位图是否应包含alpha分量,像素中alpha分量(如果有)的相对位置,alpha分量是否预乘,以及颜色分量是整数或浮点值。有关这些常量的详细信息,每个常量的使用时间以及位图图形上下文和图像的Quartz支持的像素格式,请参阅Bitmap Images and Image Masks一章中的 Color Spaces and Bitmap Layout。
Listing 2-5
显示了如何创建位图图形上下文。当您绘制到生成的位图图形上下文时,Quartz会将您的绘图记录为指定内存块中的位图数据。列表后面的每个编号行代码的详细说明。
// Listing 2-5 Creating a bitmap graphics context
CGContextRef MyCreateBitmapContext (int pixelsWide,
int pixelsHigh)
{
CGContextRef context = NULL;
CGColorSpaceRef colorSpace;
void * bitmapData;
int bitmapByteCount;
int bitmapBytesPerRow;
bitmapBytesPerRow = (pixelsWide * 4);// 1
bitmapByteCount = (bitmapBytesPerRow * pixelsHigh);
colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);// 2
bitmapData = calloc( bitmapByteCount, sizeof(uint8_t) );// 3
if (bitmapData == NULL)
{
fprintf (stderr, "Memory not allocated!");
return NULL;
}
context = CGBitmapContextCreate (bitmapData,// 4
pixelsWide,
pixelsHigh,
8, // bits per component
bitmapBytesPerRow,
colorSpace,
kCGImageAlphaPremultipliedLast);
if (context== NULL)
{
free (bitmapData);// 5
fprintf (stderr, "Context not created!");
return NULL;
}
CGColorSpaceRelease( colorSpace );// 6
return context;// 7
}
这是代码的作用:
- 1)声明一个变量来表示每行的字节数。本例中位图中的每个像素由4个字节表示:红色,绿色,蓝色和alpha各8位。
- 2)创建通用RGB颜色空间。您还可以创建
CMYK
颜色空间。有关更多信息以及有关通用颜色空间与设备相关颜色空间的讨论,请参阅Color and Color Spaces。 - 3)调用
calloc
函数来创建和清除用于存储位图数据的内存块。此示例创建一个32位RGBA位图(即,每像素32位的数组,每个像素包含红色,绿色,蓝色和alpha信息各8位)。位图中的每个像素占用4个字节的内存。在Mac OS X 10.6和iOS 4中,可以省略此步骤 - 如果将NULL
作为位图数据传递,Quartz
会自动为位图分配空间。 - 4)创建位图图形上下文,提供位图数据,位图的宽度和高度,每个组件的位数,每行的字节数,颜色空间,以及指定位图是否应包含alpha通道的常量以及它在像素中的相对位置。
kCGImageAlphaPremultipliedLast
表示alpha
分量存储在每个像素的最后一个字节中,并且颜色分量已经乘以此alpha值。有关预乘alpha的更多信息,请参阅The Alpha Value。 - 5)如果由于某种原因未创建上下文,则释放为位图数据分配的内存。
- 6)释放色彩空间。
- 7)返回位图图形上下文。调用者必须在不再需要时释放图形上下文。
Listing 2-6
显示了调用MyCreateBitmapContext
来创建位图图形上下文的代码,使用位图图形上下文创建CGImage
对象,然后将生成的图像绘制到窗口图形上下文中。图2-3显示了绘制到窗口的图像。列表后面的每个编号行代码的详细说明。
// Listing 2-6 Drawing to a bitmap graphics context
CGRect myBoundingBox;// 1
myBoundingBox = CGRectMake (0, 0, myWidth, myHeight);// 2
myBitmapContext = MyCreateBitmapContext (400, 300);// 3
// ********** Your drawing code here ********** // 4
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);// 5
CGContextDrawImage(myContext, myBoundingBox, myImage);// 6
char *bitmapData = CGBitmapContextGetData(myBitmapContext); // 7
CGContextRelease (myBitmapContext);// 8
if (bitmapData) free(bitmapData); // 9
CGImageRelease(myImage);// 10
这是代码的作用:
- 1)声明一个变量来存储边界框的原点和尺寸,Quartz将在其中绘制从位图图形上下文创建的图像。
- 2)将边界框的原点设置为(0,0),将宽度和高度设置为先前声明的变量,但其声明未在此代码中显示。
- 3)调用应用程序提供的函数
MyCreateBitmapContext
(参见Listing 2-5
)以创建400像素宽和300像素高的位图上下文。您可以使用适合您的应用程序的任何维度创建位图图形上下文。 - 4)调用
Quartz 2D
函数绘制到位图图形上下文中。您可以使用适合您应用程序的绘图代码替换此代码和接下来的四行代码。 - 5)从位图图形上下文创建
Quartz 2D
图像(CGImageRef)
。 - 6)将图像绘制到由边界框指定的窗口图形上下文中的位置。边界框指定用户空间中绘制图像的位置和尺寸。此示例未显示窗口图形上下文的创建。有关如何创建窗口图形上下文的信息,请参阅Creating a Window Graphics Context in Mac OS X。
- 7)获取与位图图形上下文关联的位图数据。
- 8)在不再需要时释放位图图形上下文。
- 9)释放位图数据(如果存在)。
- 10)不再需要时释放图像。
1. Supported Pixel Formats - 支持像素格式
表2-1总结了位图图形上下文支持的像素格式,关联的色彩空间(cs)
以及格式首次可用的Mac OS X
版本。 像素格式被指定为每像素位数(bpp)
和每个分量位数(bpc)
。 该表还包括与该像素格式相关联的位图信息常量。 有关每个位图信息格式常量所代表的内容的详细信息,请参阅 CGImage Reference。
2. Anti-Aliasing - 抗锯齿
位图图形上下文支持抗锯齿,这是人工校正在绘制文本或形状时有时在位图图像中看到的锯齿(或锯齿)边缘的过程。当位图的分辨率明显低于眼睛的分辨率时,会出现这些锯齿状边缘。为了使对象在位图中显得平滑,Quartz对围绕形状轮廓的像素使用不同的颜色。通过以这种方式混合颜色,形状显得平滑。您可以在图2-4中看到使用抗锯齿的效果。您可以通过调用CGContextSetShouldAntialias
函数来关闭特定位图图形上下文的消除锯齿。抗锯齿设置是图形状态的一部分。
您可以使用CGContextSetAllowsAntialiasing
函数控制是否允许特定图形上下文的抗锯齿。传递给此函数true
以允许消除锯齿;传递false
不允许它。此设置不是图形状态的一部分。当上下文和图形状态设置被设置为true
时,Quartz会执行消除锯齿。
Obtaining a Graphics Context for Printing - 获取用于打印的图形上下文
Mac OS X
中的Cocoa应用程序通过自定义NSView子类实现打印。 通过调用print:
方法告诉视图进行打印。 然后,视图创建一个以打印机为目标的图形上下文,并调用其drawRect:
方法。 您的应用程序使用与用于绘制到屏幕相同的绘图代码绘制到打印机。 它还可以自定义drawRect:
调用打印机的图像,该图像与发送到屏幕的图像不同。
有关在Cocoa中打印的详细讨论,请参阅Printing Programming Guide for Mac。
后记
本篇主要讲述了图形上下文,感兴趣的给个赞或者关注~~~