美文网首页高性能iOS应用开发
Quartz 2D编程指南-03图形上下文

Quartz 2D编程指南-03图形上下文

作者: 张芳涛 | 来源:发表于2019-04-03 19:19 被阅读11次

    图形上下文表示绘图目标。它包含绘图参数和绘图系统执行任何后续绘图命令所需的所有特定于设备的信息。图形上下文定义了基本的绘图属性,例如绘图时使用的颜色,剪裁区域,线宽和样式信息,字体信息,合成选项以及其他几种。

    你可以使用Quartz上下文创建函数或使用iOS OS中的某个Mac OS X框架或UIKit框架提供的更高级别函数来获取图形上下文。 Quartz提供各种Quartz图形上下文的功能,包括位图和PDF,你可以使用它们来创建自定义内容。

    本章介绍如何为各种绘图目标创建图形上下文。图形上下文在代码中由数据类型CGContextRef表示,它是一种不透明的数据类型。获取图形上下文后,可以使用Quartz 2D函数绘制上下文,对上下文执行操作(如translations),以及更改图形状态参数,如线宽和填充颜色。

    在iOS中绘制视图图形上下文

    要在iOS应用程序中绘制到屏幕,请设置UIView对象并实现其drawRect:方法以执行绘图。当视图在屏幕上可见并且其内容需要更新时,将调用视图的drawRect:方法。在调用自定义drawRect:方法之前,视图对象会自动配置其绘图环境,以便你的代码可以立即开始绘制。作为此配置的一部分,UIView对象为当前绘图环境创建图形上下文(CGContextRef opaque类型)。你可以通过调用UIKit函数UIGraphicsGetCurrentContextdrawRect:方法中获取此图形上下文。

    整个UIKit使用的默认坐标系与Quartz使用的坐标系不同。在UIKit中,原点位于左上角,正y值指向下方。 UIView对象通过将原点转换为视图的左上角并通过将其乘以-1来反转y轴来修改Quartz图形上下文的CTM以匹配UIKit约定。有关修改坐标系的更多信息以及你自己的绘图代码中的含义,请参阅Quartz 2D Coordinate Systems

    UIView对象在View Programming Guide for iOS中有详细描述。

    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 包含Quartz绘图的Cocoa框架中的视图

    要创建图2-1中的绘图,首先要创建一个Cocoa应用程序Xcode项目。在Interface Builder中,将自定义视图拖到窗口并将其子类化。然后为子类视图编写一个实现,类似于清单2-1所示。对于此示例,子类视图名为MyQuartzView。视图的drawRect:方法包含所有Quartz绘图代码。列表后面会显示每个编号行代码的详细说明。

    注意:每次需要绘制视图时,都会自动调用NSView类的drawRect:方法。要了解有关覆盖drawRect:方法的更多信息,请参阅NSView Class Reference

    清单2-1 绘制到窗口图形上下文

    @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(设置不透明度)的信息,请参阅颜色和颜色空间。

     4: 填充一个矩形,其原点为(0,0),宽度为200,高度为100。有关绘制矩形的信息,请参阅Paths

     5: 设置部分透明的蓝色填充颜色。

     6: 填充原点为(0,0)且宽度为100且高度为200的矩形。

    创建PDF图形上下文

    当你创建PDF图形上下文并绘制到该上下文时,Quartz会将你的绘图记录为一系列写入文件的PDF绘图命令。你提供PDF输出的位置和默认媒体框 - 指定页面边界的矩形。图2-2显示了绘制到PDF图形上下文然后在预览中打开生成的PDF的结果。

    图2-2 使用CGPDFContextCreateWithURL创建的PDF

    Quartz 2D API提供了两个创建PDF图形上下文的函数:

    • CGPDFContextCreateWithURL,当你要将PDF输出的位置指定为Core Foundation URL时使用。清单2-2显示了如何使用此函数创建PDF图形上下文。

    • CGPDFContextCreate,当你希望将PDF输出发送给数据使用者时使用。 (有关更多信息,请参阅Data Management in Quartz 2D)清单2-3显示了如何使用此函数创建PDF图形上下文。

    每个列表后面的每个编号行代码的详细说明。

    iOS笔记:iOS中的PDF图形上下文使用Quartz提供的默认坐标系,而不应用变换来匹配UIKit坐标系。如果你的应用程序计划在PDF图形上下文和UIView对象提供的图形上下文之间共享绘图代码,则应用程序应修改PDF图形上下文的CTM以修改坐标系。请参阅Quartz 2D Coordinate Systems

    清单2-2调用CGPDFContextCreateWithURL来创建PDF图形上下文

    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图形上下文。调用者必须在不再需要时释放图形上下文。

    清单2-3调用CGPDFContextCreate来创建PDF图形上下文

    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图形上下文。调用者必须在不再需要时释放图形上下文。

    清单2-4显示了如何调用MyPDFContextCreate例程并绘制到它。列表后面会显示每个编号行代码的详细说明。

    清单2-4绘制到PDF图形上下文

    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(参见清单2-3)以获取PDF图形上下文,提供媒体框和路径名。宏CFSTR将字符串转换为CFStringRef数据类型。

     4: 使用页面选项设置字典。在此示例中,仅指定了媒体框。你不必传递用于设置PDF图形上下文的相同矩形。你在此处添加的媒体框将取代你传递的矩形以设置PDF图形上下文。

     5: 表示页面的开头。此功能用于面向页面的图形,这是PDF绘图。

     6: 调用Quartz 2D绘图函数。你可以使用适合你的应用程序的绘图代码替换此代码和以下四行代码。

     7: 表示PDF页面的末尾。

     8: 在不再需要字典和PDF图形上下文时释放它们。

    你可以将任何内容写入适合你的应用程序的PDF - 图像,文本,路径绘图 - 并且你可以添加链接和加密。有关更多信息,请参阅PDF Document Creation, Viewing, 和 Transforming

    创建位图图形上下文

    位图图形上下文接受指向包含位图存储空间的内存缓冲区的指针。当你绘制到位图图形上下文时,缓冲区会更新。释放图形上下文后,你将以指定的像素格式获得完全更新的位图。

    注意:位图图形上下文有时用于绘制屏幕外。在你决定使用位图图形上下文之前,请参阅核心图形层绘图。 CGLayer对象(CGLayerRef)针对屏幕外绘制进行了优化,因为只要有可能,Quartz就会在视频卡上缓存图层。

    iOS笔记:iOS应用程序应该使用函数UIGraphicsBeginImageContextWithOptions而不是使用此处描述的低级Quartz函数。如果你的应用程序使用Quartz创建一个屏幕外位图,则位图图形上下文使用的坐标系是默认的Quartz坐标系。相反,如果你的应用程序通过调用函数UIGraphicsBeginImageContextWithOptions来创建图像上下文,则UIKit将相同的变换应用于上下文的坐标系,就像对UIView对象的图形上下文一样。这允许你的应用程序使用相同的绘图代码,而无需担心不同的坐标系。虽然你的应用程序可以手动调整坐标转换矩阵以获得正确的结果,但实际上,这样做没有性能优势。

    你可以使用函数CGBitmapContextCreate来创建位图图形上下文。此函数采用以下参数:

    • data。在内存中提供指向要渲染图形的目标的指针。此内存块的大小应至少为(bytesPerRow * height)字节。

    • width。指定位图的宽度(以像素为单位)。

    • height。指定位图的高度(以像素为单位)。

    • bitsPerComponent。指定内存中像素的每个组件使用的位数。例如,对于32位像素格式和RGB颜色空间,你可以为每个组件指定8位的值。请参阅Supported Pixel Formats

    • bytesPerRow。指定每行位图使用的内存字节数。

    提示:创建位图图形上下文时,如果确保数据和bytesPerRow16字节对齐,则可以获得最佳性能。

    • colorspace。用于位图上下文的颜色空间。创建位图图形上下文时,可以提供灰色,RGBCMYKNULL颜色空间。有关颜色空间和颜色管理原则的详细信息,请参阅Color Management Overview。有关在Quartz中创建和使用颜色空间的信息,请参阅Color and Color Spaces。有关支持的颜色空间的信息,请参阅Color Spaces and Bitmap Layout一章中的Bitmap Images 和 Image Masks
    • bitmapInfo。位图布局信息,表示为CGBitmapInfo常量,指定位图是否应包含alpha分量,像素中alpha分量(如果有)的相对位置,alpha分量是否预乘,以及颜色分量是整数或浮点值。有关这些常量的详细信息,每个常量的使用时间以及位图图形上下文和图像的Quartz支持的像素格式,请参阅Color Spaces and Bitmap LayoutImages and Image Masks章节。

    清单2-5显示了如何创建位图图形上下文。当你绘制到生成的位图图形上下文时,Quartz会将你的绘图记录为指定内存块中的位图数据。列表后面是每个编号行代码的详细说明。

    清单2-5创建位图图形上下文

    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个字节表示;红色,绿色,蓝色和alpha8位。

     2: 创建通用RGB颜色空间。你还可以创建CMYK颜色空间。有关更多信息以及有关通用颜色空间与设备相关颜色空间的讨论,请参阅Color and Color Spaces

     3: 调用calloc函数来创建和清除用于存储位图数据的内存块。此示例创建一个32RGBA位图(即每像素32位的数组,每个像素包含红色,绿色,蓝色和alpha信息各8位)。位图中的每个像素占用4个字节的内存。在Mac OS X 10.6iOS 4中,可以省略此步骤 - 如果将NULL作为位图数据传递,Quartz会自动为位图分配空间。

     4: 创建位图图形上下文,提供位图数据,位图的宽度和高度,每个组件的位数,每行的字节数,颜色空间,以及指定位图是否应包含alpha通道的常量像素中的相对位置。常量kCGImageAlphaPremultipliedLast表示alpha分量存储在每个像素的最后一个字节中,并且颜色分量已经乘以此alpha值。有关预乘alpha的更多信息,请参阅The Alpha Value

     5: 如果由于某种原因未创建上下文,则释放为位图数据分配的内存。

     6: 释放色彩空间。

     7: 返回位图图形上下文。调用者必须在不再需要时释放图形上下文。

    清单2-6显示了调用MyCreateBitmapContext来创建位图图形上下文的代码,使用位图图形上下文创建CGImage对象,然后将生成的图像绘制到窗口图形上下文中。图2-3显示了绘制到窗口的图像。列表后面是每个编号行代码的详细说明。

    清单2-6绘制到位图图形上下文

    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);
    

    上面的代码作用如下:

     1: 声明一个变量来存储边界框的原点和尺寸,Quartz将在其中绘制从位图图形上下文创建的图像。

     2: 将边界框的原点设置为(0,0),将宽度和高度设置为先前声明的变量,但其声明未在此代码中显示。

     3: 调用应用程序提供的函数MyCreateBitmapContext(参见清单2-5),创建一个400像素宽,300像素高的位图上下文。你可以使用适合你的应用程序的任何维度创建位图图形上下文。

     4:调用Quartz 2D函数绘制到位图图形上下文中。你可以使用适合你的应用程序的绘图代码替换此代码和接下来的四行代码。

     5: 从位图图形上下文创建Quartz 2D图像(CGImageRef)。

     6: 将图像绘制到由边界框指定的窗口图形上下文中的位置。边界框指定用户空间中绘制图像的位置和尺寸。

      此示例未显示窗口图形上下文的创建。有关如何创建窗口图形上下文的信息,请参阅在Mac OS X中创建窗口图形上下文。

     7: 获取与位图图形上下文关联的位图数据。

     8: 在不再需要时释放位图图形上下文。

     9: 释放位图数据(如果存在)。

     10: 不再需要时释放图像。

    图2-3 从位图图形上下文创建的图像,并绘制到窗口图形上下文中

    支持的像素格式

    表2-1总结了位图图形上下文支持的像素格式,关联的色彩空间(cs)以及格式首次可用的Mac OS X版本。像素格式被指定为每像素位数(bpp)和每个分量位数(bpc)。该表还包括与该像素格式相关联的位图信息常数。有关每个位图信息格式常量所代表的内容的详细信息,请参阅CGImage Reference

    表2-1位图图形上下文支持的像素格式

    CS 像素格式和位图信息不变 支持的平台
    Null 8 bpp, 8 bpc, kCGImageAlphaOnly  Mac OS X, iOS 
    Gray 8 bpp, 8 bpc, kCGImageAlphaNone Mac OS X, iOS
    Gray 8 bpp, 8 bpc, kCGImageAlphaOnly Mac OS X, iOS
    Gray 16 bpp, 16 bpc, kCGImageAlphaNone Mac OS X
    Gray 32 bpp, 32 bpc, kCGImageAlphaNone | kCGBitmapFloatComponents Mac OS X
    RGB 16 bpp, 5 bpc, kCGImageAlphaNoneSkipFirst Mac OS X, iOS
    RGB 32 bpp, 8 bpc, kCGImageAlphaNoneSkipFirst Mac OS X, iOS
    RGB 32 bpp, 8 bpc, kCGImageAlphaNoneSkipLast Mac OS X, iOS
    RGB 32 bpp, 8 bpc, kCGImageAlphaPremultipliedFirst Mac OS X, iOS
    RGB 32 bpp, 8 bpc,kCGImageAlphaPremultipliedLast Mac OS X, iOS
    RGB 64 bpp, 16 bpc,kCGImageAlphaPremultipliedLast Mac OS X
    RGB 64 bpp, 16 bpc,kCGImageAlphaNoneSkipLast Mac OS X
    RGB 128 bpp, 32 bpc, kCGImageAlphaNoneSkipLast | kCGBitmapFloatComponents Mac OS X
    RGB 128 bpp, 32 bpc,kCGImageAlphaPremultipliedLast|kCGBitmapFloatComponents Mac OS X
    CMYK 32 bpp, 8 bpc,kCGImageAlphaNone Mac OS X
    CMYK 64 bpp, 16 bpc,kCGImageAlphaNone Mac OS X
    CMYK 128 bpp, 32 bpc, kCGImageAlphaNone |kCGBitmapFloatComponents Mac OS X

    抗锯齿

    位图图形上下文支持消除锯齿,这是人工校正在绘制文本或形状时有时在位图图像中看到的锯齿(或锯齿)边缘的过程。当位图的分辨率明显低于眼睛的分辨率时,会出现这些锯齿状边缘。为了使对象在位图中显得平滑,Quartz对围绕形状轮廓的像素使用不同的颜色。通过以这种方式混合颜色,形状看起来光滑。你可以在图2-4中看到使用抗锯齿的效果。你可以通过调用CGContextSetShouldAntialias函数来关闭特定位图图形上下文的抗锯齿。抗锯齿设置是图形状态的一部分。

    你可以使用CGContextSetAllowsAntialiasing函数控制是否允许特定图形上下文的抗锯齿。传递给此函数以允许消除锯齿;是的,不允许它。此设置不是图形状态的一部分。当上下文和图形状态设置设置为true时,Quartz会执行消除锯齿。

    图2-4别名和抗锯齿绘图的比较

    获取用于打印的图形上下文

    Mac OS X中的Cocoa应用程序通过自定义NSView子类实现打印。通过调用print:方法告诉视图进行打印。然后,视图创建一个以打印机为目标的图形上下文,并调用其drawRect:方法。你的应用程序使用相同的绘图代码绘制到用于绘制到屏幕的打印机。它还可以自定义drawRect:调用打印机的图像,该图像与发送到屏幕的图像不同。

    有关在Cocoa中打印的详细讨论,请参阅Printing Programming Guide for Mac

    上一章 目录 下一章

    相关文章

      网友评论

        本文标题:Quartz 2D编程指南-03图形上下文

        本文链接:https://www.haomeiwen.com/subject/nlvzbqtx.html