版本记录
版本号 | 时间 |
---|---|
V1.0 | 2018.09.05 |
前言
Quartz 2D
框架相信大家都知道,也都一直在使用。Quartz 2D
的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz 2D
的API来自于Core Graphics
框架,数据类型和函数基本都以CG作为前缀,接下来几篇我们就一起来看一下这个框架。感兴趣可以看上面几篇文章。
1. Quartz 2D编程指南 (一) —— 简介(一)
2. Quartz 2D编程指南 (二) —— Quartz 2D概览(二)
3. Quartz 2D编程指南 (三) —— 图形上下文(三)
4. Quartz 2D编程指南 (四) —— Paths路径(一)
5. Quartz 2D编程指南 (五) —— Paths路径(二)
6. Quartz 2D编程指南 (六) —— 颜色和颜色空间(一)
7. Quartz 2D编程指南 (七) —— 变换(一)
8. Quartz 2D编程指南 (八) —— Patterns图案样式(一)
Shadows - 阴影
阴影是在图形对象下面绘制并偏移的图像,使得阴影模仿投射在图形对象上的光源的效果,如图7-1所示。 文本也可以有阴影。 阴影可以使图像看起来是三维的,或者就像浮动一样。
阴影有三个特征:
- x偏移量,指定阴影从图像偏移到水平方向的距离。
- y偏移量,指定阴影在垂直方向上与图像偏移的距离。
- 一个模糊值,指定图像是否具有硬边缘(如图7-2左侧所示)或漫反射边缘(如图右侧所示)。
本章介绍阴影的工作原理,并说明如何使用Quartz 2D API
创建阴影。
How Shadows Work - 阴影工作原理
Quartz
中的阴影是图形状态的一部分。 您调用函数CGContextSetShadow
,传递图形上下文,偏移值和模糊值。 设置阴影后,您绘制的任何对象都会使用黑色绘制阴影,该颜色在设备RGB颜色空间中具有1/3 alpha值。 换句话说,使用设置为{0,0,0,1.0 / 3.0}
的RGBA值绘制阴影。
您可以通过调用CGContextSetShadowWithColor
函数绘制彩色阴影,传递图形上下文,偏移值,模糊值和CGColor
对象。 要为颜色提供的值取决于要绘制的颜色空间。
如果在调用CGContextSetShadow
或CGContextSetShadowWithColor
之前保存图形状态,则可以通过恢复图形状态来关闭阴影。 您还可以通过将阴影颜色设置为NULL
来禁用阴影。
Shadow Drawing Conventions Vary Based on the Context - 阴影绘制约定基于上下文变化
前面描述的偏移量指定阴影所在的位置与投射阴影的图像相关。 这些偏移由上下文解释并用于计算阴影的位置:
- 正x偏移表示阴影位于图形对象的右侧。
- 在
Mac OS X
中,正y偏移表示向上位移。 这与Quartz 2D的默认坐标系匹配。 - 在iOS中,如果您的应用程序使用
Quartz 2D API
创建PDF或位图上下文,则正y偏移表示向上位移。 - 在iOS中,如果图形上下文是由UIKit创建的,例如由UIView对象创建的图形上下文或通过调用UIGraphicsBeginImageContextWithOptions函数创建的上下文,则正y偏移表示向下位移。 这符合UIKit坐标系的绘图惯例。
- 阴影绘制约定不受当前转换矩阵的影响。
Painting with Shadows - 绘制阴影
按照以下步骤绘制阴影:
- 1) 保存图形状态。
- 2) 调用函数
CGContextSetShadow
,传递适当的值。 - 3) 执行要应用阴影的所有绘图。
- 4) 恢复图形状态。
按照以下步骤绘制彩色阴影:
- 1) 保存图形状态。
- 2) 创建
CGColorSpace
对象以确保Quartz正确解释阴影颜色值。 - 3) 创建一个
CGColor
对象,指定要使用的阴影颜色。 - 4) 调用函数
CGContextSetShadowWithColor
,传递适当的值。 - 5) 执行要应用阴影的所有绘图。
- 6) 恢复图形状态。
图7-3中的两个矩形用阴影绘制 - 一个带有彩色阴影。
Listing 7-1
中的函数显示了如何设置阴影以绘制图7-3中所示的矩形。 列表后面会显示每个编号行代码的详细说明。
// 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
}
这是代码的作用:
- 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颜色空间和先前声明的RGBA值。此对象指定阴影颜色,在本例中为红色,alpha值为0.6。 - 11) 设置颜色阴影,提供刚刚创建的红色。阴影使用先前创建的偏移量和模糊值5,表示软阴影边缘。
- 12) 接下来的两行代码在图7-3的左侧绘制矩形。您可以使用自己的绘图代码替换这些行。
- 13) 释放颜色对象,因为不再需要它。
- 14) 释放颜色空间对象,因为不再需要它。
- 15) 将图形状态恢复为设置阴影之前的状态。
后记
本篇主要讲述了阴影,感兴趣的给个赞或者关注~~~