Quartz 2D

转载自:http://www.cocoachina.com/bbs/u.php?action=topic&uid=38018

苹果官网英语介绍:https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_overview/dq_overview.html#//apple_ref/doc/uid/TP30001066-CH202-TPXREF101

 

iPhone之Quartz 2D系列--编程指南(1)概览

 

Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境。我们可以使用Quartz 2D API来实现许多功能,如基本路径的绘制、透明度、描影、绘制阴影、透明层、颜色管理、反锯齿、PDF文档生成和PDF元数据访问。在需要的时候,Quartz 2D还可以借助图形硬件的功能。
在Mac OS X中,Quartz 2D可以与其它图形图像技术混合使用,如Core Image、Core Video、OpenGL、QuickTime。例如,通过使用 QuickTime的GraphicsImportCreateCGImage函数,可以用 Quartz从一个 QuickTime图形导入器中创建一个图像。

Page
Quartz 2D在图像中使用了绘画者模型(painter’s model)。在绘画者模型中,每个连续的绘制操作都是将一个绘制层(a layer of ‘paint’)放置于一个画布(‘canvas’),我们通常称这个画布为(Page)。 Page上的绘图可以通过额外的绘制操作来叠加更多的绘图。Page上的图形对象只能通过叠加更多的绘图来改变。这个模型允许我们使用小的图元来构建复杂的图形。
图1-1展示了绘画者模型如何工作。从图中可以看出不同的绘制顺序所产生的效果不一样。

Page可以是一张纸(如果输出设备是打印机),也可以是虚拟的纸张(如果输出设备是PDF文件),还可以是bitmap图像。这根据实际使用的graphics context而定。

绘制目标:Graphics Context
Graphics Context是一个数据类型(CGContextRef),用于封装Quartz绘制图像到输出设备的信息。设备可以是PDF文件、bitmap或者显示器的窗口上。Graphics Context中的信息包括在Page中的图像的图形绘制参数和设备相关的表现形式。Quartz中所有的对象都是绘制到一个Graphics Context中。
我们可以将Graphics Context想像成绘制目标,如图1-2所示。当用Quartz绘图时,所有设备相关的特性都包含在我们所使用的Graphics Context中。换句话说,我们可以简单地给Quartz绘图序列指定不同的Graphics Context,就可将相同的图像绘制到不同的设备上。我们不需要任何设备相关的计算;这些都由Quartz替我们完成。


Quartz提供了以下几种类型的Graphics Context,详细的介绍将在后续章节说明。

  • Bitmap Graphics Context
  • PDF Graphics Context
  • Window Graphics Context
  • Layer Context
  • Post Graphics Context


Quartz 2D 数据类型
除了 Graphics Context 之外,Quartz 2D API还定义一些数据类型。由于这些API就Core Graphics框架的一部分,所以这些数据类型都是以CG开头的。
Quartz 2D使用这些数据类型来创建对象,通过操作这些对象来获取特定的图形。图1-3例举了三个使用Quartz 2D的绘制操作所获得的图像。

 
下面列出了Quartz 2D包含的数据类型:

  • CGPathRef:用于向量图,可创建路径,并进行填充或描画(stroke)
  • CGImageRef:用于表示bitmap图像和基于采样数据的bitmap图像遮罩。
  • CGLayerRef:用于表示可用于重复绘制(如背景)和幕后(offscreen)绘制的绘画层
  • CGPatternRef:用于重绘图
  • CGShadingRef、CGGradientRef:用于绘制渐变
  • CGFunctionRef:用于定义回调函数,该函数包含一个随机的浮点值参数。当为阴影创建渐变时使用该类型
  • CGColorRef, CGColorSpaceRef:用于告诉Quartz如何解释颜色
  • CGImageSourceRef,CGImageDestinationRef:用于在Quartz中移入移出数据
  • CGFontRef:用于绘制文本
  • CGPDFDictionaryRef, CGPDFObjectRef, CGPDFPageRef, CGPDFStream, CGPDFStringRef, and CGPDFArrayRef:用于访问PDF的元数据
  • CGPDFScannerRef, CGPDFContentStreamRef:用于解析PDF元数据
  • CGPSConverterRef:用于将PostScript转化成PDF。在iOS中不能使用。


图形状态
Quartz通过修改当前图形状态(current graphics state)来修改绘制操作的结果。图形状态包含用于绘制程序的参数。绘制程序根据这些绘图状态来决定如何渲染结果。例如,当你调用设置填充颜色的函数时,你将改变存储在当前绘图状态中的颜色值。
Graphics Context包含一个绘图状态栈。当Quartz创建一个Graphics Context时,栈为空。当保存图形状态时,Quartz将当前图形状态的一个副本压入栈中。当还原图形状态时,Quartz将栈顶的图形状态出栈。出栈的状态成为当前图形状态。
可使用函数CGContextSaveGState来保存图形状态,CGContextRestoreGState来还原图形状态。
注意:并不是当前绘制环境的所有方面都是图形状态的元素。如,图形状态不包含当前路径(current path)。下面列出了图形状态相关的参数:

  • Current transformation matrix (CTM):当前转换矩阵
  • Clipping area:裁剪区域
  • Line: 线
  • Accuracy of curve estimation (flatness):曲线平滑度
  • Anti-aliasing setting:反锯齿设置
  • Color: 颜色
  • Alpha value (transparency):透明度
  • Rendering intent:渲染目标
  • Color space: 颜色空间
  • Text: 文本
  • Blend mode:混合模式


Quartz 2D 坐标系统
坐标系统定义是被绘制到Page上的对象的位置及大小范围,如图1-4所示。我们在用户空间坐标系统(user-space coordination system,简称用户空间)中指定图形的位置及大小。坐标值是用浮点数来定义的。

 
由于不同的设备有不同的图形功能,所以图像的位置及大小依赖于设备。例如,一个显示设备可能每英寸只能显示少于96个像素,而打印机可能每英寸能显示300个像素。如果在设备级别上定义坐标系统,则在一个设备上绘制的图形无法在其它设备上正常显示。
Quartz通过使用当前转换矩阵(current transformation matrix, CTM)将一个独立的坐标系统(user space)映射到输出设备的坐标系统(device space),以此来解决设备依赖问题。 CTM是一种特殊类型的矩阵(affine transform, 仿射矩阵),通过平移(translation)、旋转(rotation)、缩放(scale)操作将点从一个坐标空间映射到另外一个坐标空间。
CTM还有另外一个目的:允许你通过转换来决定对象如何被绘制。例如,为了绘制一个旋转了45度的盒子,我们可以在绘制盒子之前旋转Page的坐标系统。Quartz使用旋转过的坐标系统来将盒子绘制到输出设备中。
用户空间的点用坐标对(x, y)来表示,(0, 0)表示坐标原点。Quartz中默认的坐标系统是:沿着x轴从左到右坐标值逐渐增大;沿着y轴从下到上坐标值逐渐增大。
有一些技术在设置它们的graphics context时使用了不同于Quartz的默认坐标系统。相对于Quartz来说,这些坐标系统是修改的坐标系统(modified coordinate system),当在这些坐标系统中显示Quartz绘制的图形时,必须进行转换。最常见的一种修改的坐标系统是原点位于左上角,而沿着y轴从上到下坐标值逐渐增大。我们可以在如下一些地方见到这种坐标系统:

  • 在Mac OS X中,重写过isFlipped方法以返回yes的NSView类的子类
  • 在IOS中,由UIView返回的绘图上下文 
  • 在IOS中,通过调用UIGraphicsBeginImageContextWithOptions函数返回的绘图上下文 

如果应用程序想以相同的绘制程序在一个UIView对象和PDF Graphics Context上进行绘制,需要做一个变换以使PDF Graphics Context使用与UIView相同的坐标系。要达到这一目的,只需要对PDF的上下文的原点做一个平移(移到左上角)和用-1对y坐标值进行缩放。图1-5显示了这种变换操作:

 

我们的应用程序负责调整Quartz调用以确保有一个转换应用到上下文中。例如,如果你想要一个图片或PDF正确的绘制到一个Graphics Context中,你的应用程序可能需要临时调整Graphics Context的CTM。在IOS中,如果使用UIImage对象来包裹创建的CGImage对象,可以不需要修改CTM。UIImage将自动进行补偿以适用UIKit的坐标系统。



内存管理:对象所有权
Quartz使用Core Foundation内存管理模型(引用计数)。所以,对象的创建与销毁与通常的方式是一样的。在Quartz中,需要记住如下一些规则:

    • 如果创建或拷贝一个对象,你将拥有它,因此你必须释放它。通常,如果使用含有”Create”或“Copy”单词的函数获取一个对象,当使用完后必须释放,否则将导致内存泄露。
    • 如果使用不含有”Create”或“Copy”单词的函数获取一个对象,你将不会拥有对象的引用,不需要释放它。
    • 如果你不拥有一个对象而打算保持它,则必须retain它并且在不需要时release掉。可以使用Quartz 2D的函数来指定retain和release一个对象。例如,如果创建了一个CGColorspace对象,则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。同样,可以使用Core Foundation的CFRetain和CFRelease,但是注意不能传递NULL值给这些函数。
    • ========================================================
    • iPhone之Quartz 2D系列--图形上下文(2)(Graphics Contexts)

      一个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,如下代码所示:
      复制代码
      1. CGContextRef myContext = [[NSGraphicsContext currentContext] graphicsPort];

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

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


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

      复制代码
      1. Listing 2-1  Drawing to a window graphics context
      2. @implementation MyQuartzView
      3. - (id)initWithFrame:(NSRect)frameRect
      4. {
      5.     self = [super initWithFrame:frameRect];
      6.     return self;
      7. }
      8. - (void)drawRect:(NSRect)rec
      9. {
      10.     CGContextRef myContext = [[NSGraphicsContext  currentContext] graphicsPort]; //1
      11.    // ********** Your drawing code here **********       //2
      12.     CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);     //3
      13.     CGContextFillRect (myContext, CGRectMake (0, 0, 200, 100 ));   //4
      14.     CGContextSetRGBFillColor (myContext, 0, 0, 1, .5);     //5
      15.     CGContextFillRect (myContext, CGRectMake (0, 0, 100, 200));   //6
      16. }
      17. @end

      代码说明:
      1.为视图获取一个Graphics Context
      2.插入绘图代码的地方。以下四行是使用Quartz 2D函数的例子
      3.设置完全不透明的红色填充色。
      4.填充一个长方形,其原点为(0, 0), 大小为(200, 100)
      5.设置半透明的蓝色填充色。
      6.填充一个长方形,其原点为(0, 0), 大小为(100, 200)

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


      Quartz 2D API提供了两个函数来创建PDF Graphics Context:
      • CGPDFContextCreateWithURL:当你需要用Core Foundation URL指定pdf输出的位置时使用该函数。代码清单2-2显示了该函数的使用方法(代码2-2及后面代码的详细解释略):
      复制代码
      1. Listing 2-2  Calling CGPDFContextCreateWithURL to create a PDF graphics context
      2. CGContextRef MyPDFContextCreate (const CGRect *inMediaBox, CFStringRef path)
      3. {
      4.     CGContextRef myOutContext = NULL;
      5.     CFURLRef url;
      6.     url = CFURLCreateWithFileSystemPath (NULL, path, kCFURLPOSIXPathStyle, false);
      7.     if (url != NULL) {
      8.         myOutContext = CGPDFContextCreateWithURL (url,  inMediaBox,  NULL);
      9.         CFRelease(url);
      10.     }
      11.     return myOutContext;
      12. }

      • CGPDFContextCreate:当需要将pdf输出发送给数据用户时使用该方法。代码清单2-3显示了该函数的使用方法:
      复制代码
      1. Listing 2-3  Calling CGPDFContextCreate to create a PDF graphics context
      2. CGContextRef MyPDFContextCreate (const CGRect *inMediaBox, CFStringRef path)
      3. {
      4.     CGContextRef        myOutContext = NULL;
      5.     CFURLRef            url;
      6.     CGDataConsumerRef   dataConsumer;
      7.     url = CFURLCreateWithFileSystemPath (NULL,  path, kCFURLPOSIXPathStyle, false);
      8.     if (url != NULL)
      9.     {
      10.         dataConsumer = CGDataConsumerCreateWithURL (url);
      11.         if (dataConsumer != NULL)
      12.         {
      13.             myOutContext = CGPDFContextCreate (dataConsumer, inMediaBox, NULL);
      14.             CGDataConsumerRelease (dataConsumer);
      15.         }
      16.         CFRelease(url);
      17.     }
      18.     return myOutContext;
      19. }

      代码清单2-4显示是如何调用MyPDFContextCreate程序及绘制操作。
      复制代码
      1. Listing 2-4  Drawing to a PDF graphics context
      2.     CGRect mediaBox;
      3.     mediaBox = CGRectMake (0, 0, myPageWidth, myPageHeight);
      4.     myPDFContext = MyPDFContextCreate (&mediaBox, CFSTR("test.pdf"));
      5.     CFStringRef myKeys[1];
      6.     CFTypeRef myValues[1];
      7.     myKeys[0] = kCGPDFContextMediaBox;
      8.     myValues[0] = (CFTypeRef) CFDataCreate(NULL,(const UInt8 *)&mediaBox, sizeof (CGRect));
      9.     CFDictionaryRef pageDictionary = CFDictionaryCreate(NULL, (const void **) myKeys,
      10.                                                         (const void **) myValues, 1,
      11.                                                         &kCFTypeDictionaryKeyCallBacks,
      12.                                                         & kCFTypeDictionaryValueCallBacks);
      13.     CGPDFContextBeginPage(myPDFContext, &pageDictionary);
      14.         // ********** Your drawing code here **********
      15.         CGContextSetRGBFillColor (myPDFContext, 1, 0, 0, 1);
      16.         CGContextFillRect (myPDFContext, CGRectMake (0, 0, 200, 100 ));
      17.         CGContextSetRGBFillColor (myPDFContext, 0, 0, 1, .5);
      18.         CGContextFillRect (myPDFContext, CGRectMake (0, 0, 100, 200 ));
      19.     CGPDFContextEndPage(myPDFContext);
      20.     CFRelease(pageDictionary);
      21.     CFRelease(myValues[0]);
      22.     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将绘图记录到内存中指定的块中。
      复制代码
      1. Listing 2-5  Creating a bitmap graphics context
      2. CGContextRef MyCreateBitmapContext (int pixelsWide, int pixelsHigh)
      3. {
      4.     CGContextRef    context = NULL;
      5.     CGColorSpaceRef colorSpace;
      6.     void *          bitmapData;
      7.     int             bitmapByteCount;
      8.     int             bitmapBytesPerRow;
      9.     bitmapBytesPerRow   = (pixelsWide * 4);
      10.     bitmapByteCount     = (bitmapBytesPerRow * pixelsHigh);
      11.     colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
      12.     bitmapData = calloc( bitmapByteCount );
      13.     if (bitmapData == NULL)
      14.     {
      15.         fprintf (stderr, "Memory not allocated!");
      16.         return NULL;
      17.     }
      18.     context = CGBitmapContextCreate (bitmapData, pixelsWide, pixelsHigh, 8, bitmapBytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast);
      19.     if (context== NULL)
      20.     {
      21.         free (bitmapData);
      22.         fprintf (stderr, "Context not created!");
      23.         return NULL;
      24.     }
      25.     CGColorSpaceRelease( colorSpace );
      26.     return context;
      27. }

      代码清单2-6显示了调用MyCreateBitmapContext 创建一个位图Graphics Context,使用位图Graphics Context来创建CGImage对象,然后将图片绘制到窗口Graphics Context中。绘制结果如图2-3所示:
      复制代码
      1. Listing 2-6  Drawing to a bitmap graphics context
      2.     CGRect myBoundingBox;
      3.     myBoundingBox = CGRectMake (0, 0, myWidth, myHeight);
      4.     myBitmapContext = MyCreateBitmapContext (400, 300);
      5.     // ********** Your drawing code here ********** 
      6.     CGContextSetRGBFillColor (myBitmapContext, 1, 0, 0, 1);
      7.     CGContextFillRect (myBitmapContext, CGRectMake (0, 0, 200, 100 ));
      8.     CGContextSetRGBFillColor (myBitmapContext, 0, 0, 1, .5);
      9.     CGContextFillRect (myBitmapContext, CGRectMake (0, 0, 100, 200 ));
      10.     myImage = CGBitmapContextCreateImage (myBitmapContext);
      11.     CGContextDrawImage(myContext, myBoundingBox, myImage);
      12.     char *bitmapData = CGBitmapContextGetData(myBitmapContext); 
      13.     CGContextRelease (myBitmapContext);
      14.     if (bitmapData) free(bitmapData); 
      15.     CGImageRelease(myImage);





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

      表2-1:位图Graphics Context支持的像素格式
      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

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



      获取打印的Graphics Context

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

    • ======================================================
    • iPhone之Quartz 2D系列--变换(5)Transforms

      Quartz 2D 绘制模型定义了两种独立的坐标空间:用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率)。用户坐标空间用浮点数表示坐标,与设备空间的像素分辨率没有关系。当我们需要一个点或者显示文档时, Quartz会将用户空间坐标系统映射到设备空间坐标系统。因此,我们不需要重写应用程序或添加额外的代码来调整应用程序的输出以适应不同的设备。

      我们可以通过操作CTM(current transformation matrix)来修改默认的用户空间。在创建图形上下文后,CTM是单位矩阵,我们可以使用 Quartz的变换函数来修改CTM,从而修改用户空间中的绘制操作。
      本章内容包括:
      • 变换操作函数概览
      • 如何修改CTM
      • 如何创建一个仿射变换
      • 如何选择两个相同的变换
      • 如何获取user-to-device-space变换
      Quartz变换函数
      我们可能使用Quartz内置的变换函数方便的平移、旋转和缩放我们的绘图。只需要短短几行代码,我们便可以按顺序应用变换或结合使用变换。图5-1显示了缩放和旋转一幅图片的效果。我们使用的每个变换操作都更新了CTM。CTM总是用于表示用户空间和设备空间的当前映射关系。这种映射确保了应用程序的输出在任何显示器或打印机上看上去都很棒。

       
      Quartz 2D API提供了5个函数,以允许我们获取和修改CTM。我们可以旋转、平移、缩放CTM。我们还可以联结一个仿射变换矩阵。
      有时我们可以不想操作用户空间,直到我们决定将变换应用到CTM时,Quartz为此允许我们创建应用于此的仿射矩阵。我们可以使用另外一组函数来创建仿射变换,这些变换可以与CTM联结在一起。
      我们可以不需要了解矩阵的数学含义而使用这些函数。
      修改CTM
      我们在绘制图像前操作CTM来旋转、缩放或平移page,从而变换我们将要绘制的对象。以变换CTM之前,我们需要保存图形状态,以便绘制后能恢复。我们同样能用仿射矩阵来联结CTM。在本节中,我们将介绍与CTM函数相关的四种操作--平移、旋转、缩放和联结。
      假设我们提供了一个可用的图形上下文、一个指向可绘制图像的矩形的指针和一个可用的CGImage对象,则下面一行代码绘制了一个图像。该行代码可以绘制如图5-2所示的图片。在阅读了本节余下的部分后,我们将看到如何将变换应用于图像。
       
      复制代码
      1. CGContextDrawImage (myContext, rect, myImage);


       
      平移变换根据我们指定的x, y轴的值移动坐标系统的原点。我们通过调用CGContextTranslateCTM函数来修改每个点的x, y坐标值。如图5-3显示了一幅图片沿x轴移动了100个单位,沿y轴移动了50个单位。具体代码如下:
       
      复制代码
      1. CGContextTranslateCTM (myContext, 100, 50);


       
      旋转变换根据指定的角度来移动坐标空间。我们调用CGContextRotateCTM函数来指定旋转角度(以弧度为单位)。图5-4显示了图片以原点(左下角)为中心旋转45度,代码所下所示:
       
      复制代码
      1. CGContextRotateCTM (myContext, radians(–45.));


       
      由于旋转操作使图片的部分区域置于上下文之外,所以区域外的部分被裁减。我们用弧度来指定旋转角度。如果需要进行旋转操作,下面的代码将会很有用
       
      复制代码
      1. #include <math.h>
      2. static inline double radians (double degrees) {return degrees * M_PI/180;}
      缩放操作根据指定的x, y因子来改变坐标空间的大小,从而放大或缩小图像。x, y因子的大小决定了新的坐标空间是否比原始坐标空间大或者小。另外,通过指定x因子为负数,可以倒转x轴,同样可以指定y因子为负数来倒转y轴。通过调用CGContextScaleCTM函数来指定x, y缩放因子。图5-5显示了指定x因子为0.5,y因子为0.75后的缩放效果。代码如下:
       
      复制代码
      1. CGContextScaleCTM (myContext, .5, .75);


       
      联合变换将两个矩阵相乘来联接现价变换操作。我们可以联接多个矩阵来得到一个包含所有矩阵累积效果矩阵。通过调用CGContextConcatCTM来联接CTM和仿射矩阵。
      另外一种得到累积效果的方式是执行两个或多个变换操作而不恢复图形状态。图5-6显示了先平移后旋转一幅图片的效果,代码如下:

       
      复制代码
      1. CGContextTranslateCTM (myContext, w,h);
      2. CGContextRotateCTM (myContext, radians(-180.));


       
      图5-7显示了平移、缩放和旋转一幅图片,代码如下:

       
      复制代码
      1. CGContextTranslateCTM (myContext, w/4, 0);
      2. CGContextScaleCTM (myContext, .25,  .5);
      3. CGContextRotateCTM (myContext, radians ( 22.));


       
      变换操作的顺序会影响到最终的效果。如果调换顺序,将得到不同的结果。调换上面代码的顺序将得到如图5-8所示的效果,代码如下:

       
      复制代码
      1. CGContextRotateCTM (myContext, radians ( 22.));
      2. CGContextScaleCTM (myContext, .25,  .5);
      3. CGContextTranslateCTM (myContext, w/4, 0);


       
      创建仿射变换
      仿射变换操作在矩阵上,而不是在CTM上。我们可以使用这些函数来构造一个之后用于CTM(调用函数CGContextConcatCTM)的矩阵。仿射变换函数使用或者返回一个CGAffineTransform数据对象。我们可以构建简单或复杂的仿射变换。
      仿射变换函数能实现与CTM函数相同的操作--平移、旋转、缩放、联合。表5-1列出了仿射变换函数及其用途。注意每种变换都有两个函数。
      表5-1 仿射变换函数
      函数 用途
      CGAffineTransformMakeTranslation 通过指定x, y值来创建一个平移矩阵
      CGAffineTransformTranslate 在已存在的矩阵中使用平移
      CGAffineTransformMakeRotation 通过指定角度来创建一个旋转矩阵
      CGAffineTransformRotate 在已存在的矩阵中使用旋转
      CGAffineTransformMakeScale 通过指定x, y缩放因子来创建一个缩放矩阵
      CGAffineTransformScale 在已存在的矩阵中使用缩放
      Quartz同样提供了一个仿射变换函数(CGAffineTransformInvert)来倒置矩阵。倒置操作通常用于在变换对象中提供点的倒置变换。当我们需要恢复一个被矩阵变换的值时,可以使用倒置操作。将值与倒置矩阵相乘,就可得到原先的值。我们通常不需要倒置操作,因为我们可以通过保存和恢复图形状态来倒置CTM的效果。
      在一些情况下,我们可能不需要变换整修空间,而只是一个点或一个大小。我们通过调用CGPointApplyAffineTransform在CGPoint结构上执行变换操作。调用CGSizeApplyAffineTransform在CGSize结构上执行变换操作。调用CGRectApplyAffineTransform在CGRect结构上执行变换操作。CGRectApplyAffineTransform返回一个最小的矩形,该矩形包含了被传递给CGRectApplyAffineTransform的矩形对象的角点。如果矩形上的仿射变换操作只有缩放和平移操作,则返回的矩形与四个变换后的角组成的矩形是一致的。
      可以通过调用函数CGAffineTransformMake来创建一个新的仿射变换,但与其它函数不同的是,它需要提供一个矩阵实体。


      评价仿射变换
      我们可以通过调用CGAffineTransformEqualToTransform函数来决定一个仿射变换是否与另一个相同。如果两个变换相同,则返回true;否则返回false。
      函数CGAffineTransformIsIdentity用于确认一个变换是否是单位变换。单位变换没有平移、缩放和旋转操作。Quartz常量CGAffineTransformIdentity表示一个单位变换。
      获取用户空间到设备空间的变换
      当使用Quartz 2D时,我们只是在用户空间下工作。Quartz为我们处理用户空间和设备空间的转换。如果我们的应用程序需要获取Quartz转换用户空间和设备空间的仿射变换,我们可以调用函数CGContextGetUserSpaceToDeviceSpaceTransform。
      Quartz提供了一系列的函数来转换用户空间和设备空间的几何体。我们会发现这些函数使用赶来比使用CGContextGetUserSpaceToDeviceSpaceTransform函数返回的仿射变换更好用。
      • 点:函数CGContextConvertPointToDeviceSpace和CGContextConvertPointToUserSpace将一个CGPoint数据结构从一个空间变换到另一个空间。
      • 大小:函数CGContextConvertSizeToDeviceSpace和CGContextConvertSizeToUserSpace将一个CGSize数据结构从一个空间变换到另一个空间。
      • 矩形:函数CGContextConvertRectToDeviceSpace和CGContextConvertRectToUserSpace将一个CGPoint数据结构从一个空间变换到另一个空间。
    • ========================================================
    • iPhone之Quartz 2D系列--阴影和透明度(5)Shadows&物Transparency Layers
       
      阴影是绘制在一个图形对象下的且有一定偏移的图片,它用于模拟光源照射到图形对象上所形成的阴影效果,如果7-1所示。文本也可以有阴影。阴影可以让一幅图像看上去是立体的或者是浮动的。

       

      阴影有三个属性:
      • x偏移值,用于指定阴影相对于图片在水平方向上的偏移值。
      • y偏移值,用于指定阴影相对于图片在竖直方向上的偏移值。
      • 模糊(blur)值,用于指定图像是有一个硬边(hard edge,如图7-2左边图片所示),还是一个漫射边(diffuse edge,如图7-1右边图片所示)


       

      本章将描述阴影是如何工作的及如何用Quartz 2D API来创建阴影。


      阴影是如何工作的
      Quartz中的阴影是图形状态的一部分。我们可以调用函数CGContextSetShadow来创建,并传入一个图形上下文、偏移值及模糊值。阴影被设置后,任何绘制的对象都有一个阴影,且该阴影在设备RGB颜色空间中呈现出黑色的且alpha值为1/3。换句话说,阴影是用RGBA值{0, 0, 0, 1.0/3.0}设置的。
      我们可以调用函数CGContextSetShadowWithColor来设置彩色阴影,并传递一个图形上下文、 偏移值、模糊值有CGColor颜色对象。颜色值依赖于颜色空间。
      如何在调用CGContextSetShadow或CGContextSetShadowWithColor之前保存了图形状态,我们可以通过恢复图形状态来关闭阴影。我们也可以通过设置阴影颜色为NULL来关闭阴影。

      基于图形上下文的阴影绘制惯例
      偏移值指定了阴影相对于相关图像的位置。这些偏移值由图形上下文来描述,并用于计算阴影的位置:
      • 一个正值的x偏移量指定阴影位于图形对象的右侧。
      • 在Mac OS X中,正值的y指定阴影位于图形对象的上边,这与Quartz 2D默认的坐标值匹配。
      • 在iOS中,如果我们用Quartz 2D API来创建PDF或者位图图形上下文,则正值的y指定阴影位于图形对象的上边。
      • 在iOS中,如果图形上下文是由UIKit创建的,则正值的y指定阴影位于图形对象的下边。这与UIKit坐标系统相匹配。阴影绘制惯例不受CTM影响
      绘制阴影
      按照如下步骤来绘制阴影
      1. 保存图形状态
      2. 调用函数CGContextSetShadow,传递相应的值
      3. 使用阴影绘制所有的对象
      4. 恢复图形状态
      按照如下步骤来绘制彩色阴影
      1. 保存图形状态
      2. 创建一个CGColorSpace对象,确保Quartz能正确地解析阴影颜色
      3. 创建一个CGColor对象来指定阴影的颜色
      4. 调用CGContextSetShadowWithColor,并传递相应的值
      5. 使用阴影绘制所有的对象
      6. 恢复图形状态
      图7-3显示了两个带有阴影的矩形,其中一个是彩色阴影。

       

      列表清单显示了如何创建图7-3中的图像。
       
      复制代码
      1. Listing 7-1  A function that sets up shadows
      2. void MyDrawWithShadows (CGContextRef myContext, float wd, float ht);
      3. {
      4.     CGSize          myShadowOffset = CGSizeMake (-15,  20);
      5.     float           myColorValues[] = {1, 0, 0, .6};
      6.     CGColorRef      myColor;
      7.     CGColorSpaceRef myColorSpace;
      8.     CGContextSaveGState(myContext);
      9.     CGContextSetShadow (myContext, myShadowOffset, 5); 
      10.     // Your drawing code here
      11.     CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
      12.     CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));
      13.     myColorSpace = CGColorSpaceCreateDeviceRGB ();
      14.     myColor = CGColorCreate (myColorSpace, myColorValues);
      15.     CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);
      16.     // Your drawing code here
      17.     CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
      18.     CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));
      19.     CGColorRelease (myColor);
      20.     CGColorSpaceRelease (myColorSpace); 
      21.     CGContextRestoreGState(myContext);
      22. }

      透明层
       
      透明层(TransparencyLayers)通过组合两个或多个对象来生成一个组合图形。组合图形被看成是单一对象。当需要在一组对象上使用特效时,透明层非常有用,如图9-1所示的给三个圆使用阴影的效果。

       

      如果没有使用透明层来渲染图9-1中的三个圆,对它们使用阴影的效果将是如图9-2所示:

       

      透明层的工作方式
      Quartz的透明层类似于许多流行的图形应用中的层。层是独立的实体。Quartz维护为每个上下文维护一个透明层栈,并且透明层是可以嵌套的。但由于层通常是栈的一部分,所以我们不能单独操作它们。

      我们通过调用函数CGContextBeginTransparencyLayer来开始一个透明层,该函数需要两个参数:图形上下文与CFDictionary对象。字典中包含我们所提供的指定层额外信息的选项,但由于Quartz 2D API中没有使用字典,所以我们传递一个NULL。在调用这个函数后,图形状态参数保持不变,除了alpha值[默认设置为1]、阴影[默认关闭]、混合模式[默认设置为normal]、及其它影响最终组合的参数。

      在开始透明层操作后,我们可以绘制任何想显示在层上的对象。指定上下文中的绘制操作将被当成一个组合对象绘制到一个透明背景上。这个背景被当作一个独立于图形上下文的目标缓存。

      当绘制完成后,我们调用函数CGContextEndTransparencyLayer。Quartz将结合对象放入上下文,并使用上下文的全局alpha值、阴影状态及裁减区域作用于组合对象。

      在透明层中进行绘制


      在透明层中绘制需要三步:
      1. 调用函数CGContextBeginTransparencyLayer
      2. 在透明层中绘制需要组合的对象
      3. 调用函数CGContextEndTransparencyLayer

      图9-3显示了在透明层中绘制三个矩形,其中将这三个矩形当成一个整体来渲染阴影。

       

      代码清单9-1显示了如何利用透明层生成图9-3所示的矩形。

       
      复制代码
      1. void MyDrawTransparencyLayer (CGContext myContext, float wd,float ht)
      2. {
      3.     CGSize          myShadowOffset = CGSizeMake (10, -20);
      4.     CGContextSetShadow (myContext, myShadowOffset, 10);   
      5.     CGContextBeginTransparencyLayer (myContext, NULL);
      6.     // Your drawing code here
      7.     CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
      8.     CGContextFillRect (myContext, CGRectMake (wd/3+ 50,ht/2 ,wd/4,ht/4));
      9.     CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
      10.     CGContextFillRect (myContext, CGRectMake (wd/3-50,ht/2-100,wd/4,ht/4));
      11.     CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
      12.     CGContextFillRect (myContext, CGRectMake (wd/3,ht/2-50,wd/4,ht/4));
      13.     CGContextEndTransparencyLayer (myContext);
      14. }

posted on 2016-11-30 23:23  &#127774;Bob  阅读(281)  评论(0编辑  收藏  举报

导航