iPhone之Quartz 2D系列--阴影和透明层（6）Shadows&Transparency Layers

苹果官网英语介绍：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系列--阴影和透明度（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中的图像。

复制代码 Listing 7-1  A function that sets up shadows void MyDrawWithShadows (CGContextRef myContext, float wd, float ht); {     CGSize          myShadowOffset = CGSizeMake (-15,  20);     float           myColorValues[] = {1, 0, 0, .6};     CGColorRef      myColor;     CGColorSpaceRef myColorSpace;     CGContextSaveGState(myContext);     CGContextSetShadow (myContext, myShadowOffset, 5);      // Your drawing code here     CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);     CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));     myColorSpace = CGColorSpaceCreateDeviceRGB ();     myColor = CGColorCreate (myColorSpace, myColorValues);     CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);     // Your drawing code here     CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);     CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));     CGColorRelease (myColor);     CGColorSpaceRelease (myColorSpace);      CGContextRestoreGState(myContext); }

透明层

透明层 (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 所示的矩形。

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