Shadows

A shadow is an image painted underneath, and offset from, a graphics object such that the shadow mimics the effect of a light source cast on the graphics object, as shown in Figure 7-1. Text can also be shadowed. Shadows can make an image appear three dimensional or as if it’s floating.

阴影是绘制在图像下面且有偏移的图形对象，阴影模拟在图形对象上投射的光源的效果，如图7-1所示。 文字也可以被遮蔽。 阴影可以使图像呈现出三维形状，或者像是浮动的。

Figure7-1 A shadow

Shadows have three characteristics:

• An x-offset, which specifies how far in the horizontal direction the shadow is offset from the image.
• A y-offset, which specifies how far in the vertical direction the shadow is offset from the image.
• A blur value, which specifies whether the image has a hard edge, as seen in the left side of Figure 7-2, or a diffuse edge, as seen in the right side of the figure.
  This chapter describes how shadows work and shows how to use the Quartz 2D API to create them.

阴影有三个特点：

• 一个x-offset，它指定在水平方向上阴影偏离图像的距离。
• y偏移，它指定阴影偏离图像在垂直方向上有多远。
• 模糊值，其指定图像是否具有硬边缘，如图7-2的左侧所示，或者是漫射边缘，如图的右侧所示。
  本章将介绍阴影的工作原理，并介绍如何使用Quartz 2D API来创建它们。

Figure7-2 Figure 7-2 A shadow with no blur and another with a soft edge

How Shadows Work(阴影如何工作)

Shadows in Quartz are part of the graphics state. You call the function CGContextSetShadow, passing a graphics context, offset values, and a blur value. After shadowing is set, any object you draw has a shadow drawn with a black color that has a 1/3 alpha value in the device RGB color space. In other words, the shadow is drawn using RGBA values set to {0, 0, 0, 1.0/3.0}.

Quartz的阴影是图形状态的一部分。您调用函数CGContextSetShadow，传递图形上下文，偏移值和模糊值。设置阴影后，您绘制的任何对象都将在设备RGB颜色空间中绘制一个黑色，具有1/3 alpha值的阴影。换句话说，使用设置为{0,0,0,1.0 / 3.0}的RGBA值绘制阴影。

You can draw colored shadows by calling the function CGContextSetShadowWithColor, passing a graphics context, offset values, a blur value, and a CGColor object. The values to supply for the color depend on the color space you want to draw in.

您可以通过调用函数CGContextSetShadowWithColor，传递图形上下文，偏移值，模糊值和CGColor对象来绘制彩色阴影。提供的颜色值取决于要绘制的颜色空间。

If you save the graphics state before you call CGContextSetShadow or CGContextSetShadowWithColor, you can turn off shadowing by restoring the graphics state. You also disable shadows by setting the shadow color to NULL.

如果在调用CGContextSetShadow或CGContextSetShadowWithColor之前保存图形状态，则可以通过恢复图形状态来关闭阴影。您还可以通过将阴影颜色设置为NULL来禁用阴影。

Shadow Drawing Conventions Vary Based on the Context(阴影绘制规则基于上下文而变化)

The offsets described earlier specify where the shadow is located related to the image that cast the shadow. Those offsets are interpreted by the context and used to calculate the shadow’s location:

• A positive x offset indicates the shadows is to the right of the graphics object.
• In Mac OS X, a positive y offset indicates upward displacement. This matches the default coordinate system for Quartz 2D.
• In iOS, if your application uses Quartz 2D APIs to create a PDF or bitmap context, a positive y offset indicates upwards displacement.
• In iOS, if the graphics context was created by UIKit, such as a graphics context created by a UIView object or a context created by calling the UIGraphicsBeginImageContextWithOptions function, then a positive y offset indicates a downward displacement.
  This matches the drawing conventions of the UIKit coordinate system.
• The shadow-drawing convention is not affected by the current transformation matrix.

前面描述的偏移指定阴影所在的位置与投射阴影的图像有关。 根据上下文解释可计算阴影的位置和偏移量：

• 正x偏移表示阴影在图形对象的右侧。
• 在Mac OS X中，正y偏移表示向上位移。 这与Quartz 2D的默认坐标系匹配。
• 在iOS中，如果您的应用程序使用Quartz 2D API创建PDF或位图上下文，则正y偏移表示向上移位。
• 在iOS中，如果图形上下文是由UIKit创建的，例如由UIView对象创建的图形上下文或通过调用UIGraphicsBeginImageContextWithOptions函数创建的上下文，则正y偏移表示向下的位移。
• 阴影的绘制不受当前变换矩阵的影响。

Painting with Shadows(绘制阴影)

Follow these steps to paint with shadows:

• Save the graphics state.
• Call the function CGContextSetShadow, passing the appropriate values.
• Perform all the drawing to which you want to apply shadows.
• Restore the graphics state.

绘制阴影的步骤：

• 保存图形状态。
• 调用函数CGContextSetShadow,并设置值。
• 绘制阴影。
• 重置图形状态。

Follow these steps to paint with colored shadows:

• Save the graphics state.
• Create a CGColorSpace object to ensure that Quartz interprets the shadow color values correctly.
• Create a CGColor object that specifies the shadow color you want to use.
• Call the function CGContextSetShadowWithColor, passing the appropriate values.
• Perform all the drawing to which you want to apply shadows.
• Restore the graphics state.

绘制彩色阴影的步骤：

• 保存图形状态。
• 创建一个CGColorSpace对象，以确保Quartz正确解释阴影颜色值。
• 创建一个CGColor对象，指定要使用的阴影颜色。
• 调用函数CGContextSetShadowWithColor,并设置值。
• 绘制阴影。
• 重置图形状态。

The two rectangles in Figure 7-3 are drawn with shadows—one with a colored shadow.

Figure 7-3 A colored shadow and a gray shadow

The function in Listing 7-1 shows how to set up shadows to draw the rectangles shown in Figure 7-3. A detailed explanation for each numbered line of code appears following the listing.

Listing 7-1 A function that sets up shadows

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
}

Here’s what the code does:

• Takes three parameters—a graphics context and a width and height to use when constructing the rectangles.
• Declares and creates a CGSize object that contains offset values for the shadow. These values specify a shadow offset 15 units to the left of the object and 20 units above the object.
• Declares an array of color values. This example uses RGBA, but these values won’t take on any meaning until they are passed to Quartz along with a color space, which is necessary for Quartz to interpret the values correctly.
• Declares storage for a color reference.
• Declares storage for a color space reference.
• Saves the current graphics state so that you can restore it later.
• Sets a shadow to have the previously declared offset values and a blur value of 5, which indicates a soft shadow edge. The shadow will appear gray, having an RGBA value of {0, 0, 0, 1/3}.
• The next two lines of code draw the rectangle on the right side of Figure 7-3. You replace these lines with your own drawing code.
• Creates a device RGB color space. You need to supply a color space when you create a CGColor object.
• Creates a CGColor object, supplying the device RGB color space and the RGBA values declared previously. This object specifies the shadow color, which in this case is red with an alpha value of 0.6.
• Sets up a color shadow, supplying the red color you just created. The shadow uses the offset created previously and a blur value of 5, which indicates a soft shadow edge.
• The next two lines of code draw the rectangle on the left side of Figure 7-3. You replace these lines with your own drawing code.
• Releases the color object because it is no longer needed.
• Releases the color space object because it is no longer needed.
• Restores the graphics state to what it was prior to setting up the shadows.