阴影 (Shadows)

官方文档直通车

阴影是画在图形之下并与之偏移的图像,阴影模拟光源投射到图形对象上的效果.
文本也可以有阴影效果,阴影可以使图像看起来是三维的,看起来好像是漂浮的.

image.png

阴影有三个特点:

• x 偏移,指定阴影在水平方向上与图像的距离
• y 偏移,指定阴影在竖直方向上与图像的距离
• 模糊值(A blur value), 指定图像是否有硬边(hard edge, 7-2图的左边,镜面反射) 或者漫反射边(diffuse edge,7-2图的右边)

本章介绍阴影的工作原理,并且演示如何用 Quartz API 创建阴影.

image.png

阴影的工作原理(How Shadows Work)

Quartz 中阴影是图形状态的一部分.调用CGContextSetShadow 函数,传递图形上下文(a graphics context),偏移值(offset value) 和 模糊值(blur value). 在阴影设置之后,你绘制的任何对象都有阴影,并且阴影使用设备RGB颜色空间 1/3 alpha的黑色绘制.换句话说,阴影使用 RGBA 颜色并且设置为 {0, 0, 0, 1.0/3.0}

可以调用CGContextSetShadowWithColor 绘制彩色阴影, 传递图形上下文(a graphics context),偏移值(offset value) 和 模糊值(blur value) 和 CGColor对象.颜色的值取决于要绘制的颜色空间.

如果在调用CGContextSetShadow 或者 CGContextSetShadowWithColor 之前保存了图形状态,你可以还原图形状态关闭阴影.也可以禁用颜色设置阴影颜色为NULL.

不同上下文绘制阴影的差异 (Shadow Drawing Conventions Vary Based on the Context)

前面描述的偏移量指定阴影相对于投下阴影的图片的位置.这个偏移是由上下文解释和计算阴影位置.

• 正 x 偏移代表阴影在图形对象右边
• 在 Mac OS X 上, 正的y偏移表示向上移动,这是 Quartz 的默认行为
• 在 iOS 上,如果你的应用程序使用 Quartz API 创建PDF 或者 位图上下文(bitmap context),正 y 偏移代表向上位移.
• 在 iOS 上,如果图形上下文是由UIKit 创建, 例如 图形上下文由 UIView 创建或者调用了 UIGraphicsBeginImageContextWithOptions 创建,那么 一个 正的 y 偏移表示向下位移.这与UIKit 坐标相匹配.
• 阴影绘制不受当前变换矩阵(current transformation matrix)的影响.

绘制阴影(Painting with Shadows)

按照以下步骤绘制阴影:
1.保存图形状态
2.调用CGContextSetShadow 传递相应的值
3.执行所有要应用阴影的所有绘图
4.恢复图形状态

按照以下步骤绘制彩色阴影:
1.保存图形状态
2.创建 CGColorSpace 对象确保 Quartz 正确的解释阴影颜色
3.创建 CGColor对象指定你想要的阴影颜色
4.调用CGContextSetShadowWithColor 传递相应的值
5.执行所有要应用阴影的所有绘图
6.恢复图形状态

image.png

实现上述效果的代码

void MyDrawWithShadows (CGContextRef myContext, // 1
                         CGFloat wd, CGFloat ht);
{
    CGSize          myShadowOffset = CGSizeMake (-15,  20);// 2
    CGFloat           myColorValues[] = {1, 0, 0, .6};// 3
    CGColorRef      myColor;// 4
    CGColorSpaceRef myColorSpace;// 5
 
    CGContextSaveGState(myContext);// 6
 
    CGContextSetShadow (myContext, myShadowOffset, 5); // 7
    // Your drawing code here// 8
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));
 
    myColorSpace = CGColorSpaceCreateDeviceRGB ();// 9
    myColor = CGColorCreate (myColorSpace, myColorValues);// 10
    CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);// 11
    // Your drawing code here// 12
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));
 
    CGColorRelease (myColor);// 13
    CGColorSpaceRelease (myColorSpace); // 14
 
    CGContextRestoreGState(myContext);// 15
}

下面是代码的作用:
1.采用三个参数-图形上下文以及在构造矩形时要使用的宽度和高度。
2.声明并创建包含阴影偏移值的cgsize对象。这些值指定对象左侧15个单位和对象上方20个单位的阴影偏移。
3.声明颜色值数组。本例使用rgba，但这些值在与颜色空间一起传递给quartz之前不会有任何意义，这是quartz正确解释这些值所必需的。
4.声明颜色引用的存储。
5.声明颜色空间引用的存储。
6.保存当前图形状态，以便以后可以还原它。
7.将阴影设置为具有先前声明的偏移值和5的模糊值，这表示软阴影边。阴影将显示为灰色，rgba值为{0，0，0，1/3}。
8.接下来的两行代码在图7-3的右侧绘制矩形。用自己的绘图代码替换这些行。
9.创建设备RGB颜色空间。创建cgcolor对象时需要提供颜色空间。
10.创建cgcolor对象，提供设备rgb颜色空间和先前声明的rgb a值。此对象指定阴影颜色，在本例中为红色，alpha值为0.6。
11.设置颜色阴影，提供刚创建的红色。阴影使用先前创建的偏移和5的模糊值，这表示软阴影边。
12.接下来的两行代码在图7-3的左侧绘制矩形。用自己的绘图代码替换这些行。
13.释放颜色对象，因为不再需要它。
14.释放颜色空间对象，因为不再需要它。
15.将图形状态还原为设置阴影之前的状态。