iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow，Gradient)

原博地址：http://blog.csdn.net/hello_hwc/article/details/49507881

Shadow

Shadow(阴影) 的目的是为了使UI更有立体感，如图

shadow 主要有三个影响因素

x off-set 决定阴影沿着X的偏移量
y off-set 决定阴影沿着y的偏移量
blur value 决定了阴影的边缘区域是不是模糊的

其中不同的blur效果的图

注意：

shadow也是和绘制状态相关的，意味着如果仅仅绘制一个subPath的shadow,注意save和restore

相关函数

CGContextSetShadow
CGContextSetShadowWithColor//唯一区别是设置了阴影颜色

参数

context 绘制画板

offset阴影偏移量，参考context的坐标系

blur 非负数，决定阴影的模糊程度

示例代码

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    //填充边框 当然你可以用layer设置
    CGContextSetStrokeColorWithColor(context, [UIColor darkGrayColor].CGColor);
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillRect(context, rect);
    CGContextStrokeRect(context, rect);
    
    CGContextAddArc(context, 100, 100, 50, 0, M_2_PI, 0);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 3.0);
    CGContextSetShadow(context, CGSizeMake(4.0, 4.0), 1.0);
    //CGContextSetShadowWithColor(context, CGSizeMake(4.0, 4.0), 1.0, [UIColor blueColor].CGColor);
    
    CGContextStrokePath(context);
}

效果

Gradient 渐变色

渐变无非就是从一种颜色逐渐变换到另一种颜色，Quartz 2D提供了两种渐变的模型。

Quartz提供了两个不透明数据odgago创建渐变:CGShadingRef 和 CGGradientRef.我们可以使用任何一个来创建轴向(axial)或径向(radial)渐变。一个渐变是从一个颜色到另外一个颜色的填充。

一个轴向渐变(也称为线性渐变)沿着两个端点连接的轴线渐变。所有位于垂直于轴线的的某条线上的点都具有相同的颜色值。

一个径向渐变也是沿着两个端点连接的轴线渐变，不过路径通常由两个圆来定义。

1> axial gradient 线性渐变(轴向渐变)，使用的时候设置好两个顶点的颜色 (也可以设置中间过渡色)

例如：

轴向渐变由橙色向黄色渐变在这个例子中渐变轴相对于远点倾斜了四十五度角。

Quartz 也允许我们设置一系列的颜色值和位置值，以沿着轴来创建更复杂的轴向渐变。如下图所示，起始点的颜色设置为红色(可以看一下Quartz 的坐标系零点默认就是左下角)，结束点的颜色是紫罗兰色。同时，在轴上有5个位置，它们的颜色分别设置为橙黄绿蓝和靛蓝。我们可以把它看成沿着同一轴线的六段连续的线性渐变。另外轴线的角度有我们设置的两个端点来定义。

2> radial gradient(径向渐变)

这种模式的渐变允许一个圆到另一个圆的渐变

如下图所示，他从一个小的明亮的红色圆渐变到一个大小黑色的圆，

我们可以把一个圆放置到一个径向渐变中来创建各种形状。如果一个圆是另一个的一部分或者完全在另一个的外面，则Quartz创建了圆锥和一个圆柱。径向渐变的一个通常用法就是创建一个球体阴影

一个单一的点(半径为0的圆)位于一个大圆以内。

CGShading 和 CGGradient对象的对比

我们有两个对象类型用于创建渐变，你可能想知道哪一个更好用，看了下面你就会知道了。

CGshadingRef这个不透明的数据类型给我们更多的控制权，以确定如何计算每个端点的颜色，在我们创建CGShading对象之前，我们必须创建一个CGFunction对象(CGFunctionRef)，这个对象定义了一个用于计算渐变色的函数。写一个自定义的函数让我们创建平滑的渐变。

当我们创建一个CGShading对象时，我们指定其是轴向还是径向，除了计算函数以外，我们还需要提供一个颜色空间。起始点结束点或者是半径，这取决于绘制轴向还是径向渐变。在绘制时，我们只是简单的传递CGShading对象以及绘制上下文给CGContextDrawShading函数，Quartz为渐变上的每个点调用渐变计算函数。

一个CGGRadient对象是CGShading对象的子集，其更容易使用，CGGradientRef不透明类型抑郁作用，因为Quartz在渐变的每一点上计算颜色值。我们不需要提供一个渐变计算函数。当创建好一个渐变对象的时候，我们提供一个位置和颜色的数组。quartz使用对应的颜色值来计算每个梯度的渐变。我们可以使用单一的气势与结束点来设置一个渐变对象。或者提供一组断电来创建一个多颜色渐变的效果。使用CGShading对象可以提供多于两个位置的能力。

当我们创建一个CGGradient对象时，我们需要设置一个颜色空间、位置、和每个位置对应的颜色值。当使用一个渐变对象绘制上下文时，我们指定Quartz是绘制一个轴向还是径向渐变。在绘制时，我们指定开始结束点或半径，这取决于我们是绘制轴向还是径向渐变。而CGShading的几何形状是在创建时定义的，而不是绘制时。

扩展渐变端点外部的颜色

当我们创建一个渐变时，我们可以选择使用纯色来填充渐变端点外部的空间。Quartz使用使用渐变边界上的颜色作为填充颜色。我们可以扩展渐变起点、终点或两端的颜色。我们可以扩展使用CGShading对象或CGGradient对象创建的轴向或径向渐变。

图演示了一个轴向渐变，它扩展了起点和终点两侧的区域。图片中的线段显示了渐变的轴线。我们可以看到，填充颜色与起点和终点的颜色是对应的。

通过这两种渐变的嵌套使用 Quartz 2D能绘制出非常漂亮的图形

渐变的两种绘制模型

CGShading -使用这种数据类型需要自己定义CFFunction来计算每一个点的渐变色，较为复杂，但是能够灵活的绘制。

CGGradient-使用这种数据类型只需要制定两个顶点的颜色，以及绘制模式，其余的Quartz会给绘制，但是渐变的数学模型不灵活。

使用CGGradient对象：

一个CGGradient 对象是一个渐变的抽象定义他简单的质地昂了颜色值和位置，但没有指定任何几何形状，我们可以在轴向和径向几何形状中使用这个对象，作为一个轴向定义，CGGradient对象可能比CGShading对象更容易重用。没有讲任何几何形状存储在CGGradient对象中。这样允许我们使用相同的颜色方案来绘制不同的几何图形，而不需要为多个图形创建多个CGGadient对象。

因为Quartz为我们计算渐变，使用一个CGGradient对象来创建和绘制一个渐变则更直接，只需要以下几步：

1>创建一个CGGradient对象，提供一个颜色空间，一个饱含两个或更多颜色组件的数组，一个包含两个或多个位置的数组，和两个数组中元素的个数。

2>使用CGContextDrawLinearGradient或者CGContentDrawRadialGradient绘制。

3>释放CGGradient对象

一个位置是一个值区间在0.0到1.0之间的CGFloat值，他指定了沿着渐变的轴线的标准化距离值0.0的值指定轴线的起点，1.0的值指定了轴线的重点。其他值指定了一个距离的比例。最低限度情况下，Quartz使用两个位置值。如果我们传递NULL值作为位置数组参数，则Quartz使用0作为第一个位置，1作为第二个位置。

每个颜色的颜色组件的数目取决于颜色空间。对于离屏绘制，我们使用一个RGB颜色空间。因为Quartz使用alpha来绘制，每个离屏颜色都有四个组件—红、绿、蓝和alpha。所以，对于离屏绘制，我们提供的颜色组件数组的元素的数目必须是位置数目的4倍。Quartz的RGBA颜色组件可以在0.0到1.0之间改变。

代码

- (void)drawRect:(CGRect)rect {
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    //使用CGGradient绘制
    CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();
    size_t num_of_locations = 2;
　　//注意每个位置对应一个颜色
    CGFloat locations[2] = {0.0,1.0};
    CGFloat components[8] = {1.0,0.0,0.0,1.0,//红色
        0.0,1.0,0.0,1.0};//绿色
    CGGradientRef gradient = CGGradientCreateWithColorComponents(deviceRGB, components, locations, num_of_locations);
    CGPoint startPoint = CGPointMake(0, 0);
    CGPoint endPoint = CGPointMake(rect.size.width, rect.size.height);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGColorSpaceRelease(deviceRGB);
    CGGradientRelease(gradient);
}

效果

径向渐变

CGContextRef context = UIGraphicsGetCurrentContext();
    //颜色空间
    CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();
    //位置数组和颜色数组包含元素的个数
    size_t num_of_locations = 2;
    CGFloat locations[2] = {0.0,1.0};
    CGFloat components[8] = {0.0,0.0,1.0,1.0,//白色
        0.0,1.0,0.0,1.0};//黑色
    CGGradientRef gradient = CGGradientCreateWithColorComponents(deviceRGB, components, locations, num_of_locations);
    CGPoint startCenter = CGPointMake(100, 100);
    CGPoint endCenter = CGPointMake(125, 125);
    CGFloat startRadius = 0.0;
    CGFloat endRadius = 50.0;
    CGContextDrawRadialGradient(context, gradient, startCenter, startRadius, endCenter, endRadius, 0);
    CGColorSpaceRelease(deviceRGB);
    CGGradientRelease(gradient);

使用CGShading对象

我们通过调用函数CGShadingCreateAxial或者CGShadingCreateRadial创建一个CGShading对象来设置一个渐变，调用这些函数需要提供以下参数。

1.CGColorSpace 对象:颜色空间

2.起始点和终点。对于轴向渐变，有轴向的起始点和和终点的坐标，对于径向渐变，有起始圆和终点圆的中心坐标

3.用于定义渐变区域的圆的启示半径和终止半径

4.一个CGFunction对象，可以通过CGFunctionCreate函数来获取。这个回调例程必须返回绘制到特定点的颜色值。

5.一个布尔值用于指定是否适用纯色来绘制起始点和终点的扩展区域

我们提供给CGShading创建函数的CGFunction对象包含一个回调结构体，及Quartz需要实现这个回调的所有信息。也许设置CGShasing对象的最棘手的部分是创建CGFunction对象。当我们调用CGFunctionCreate函数时，我们提供以下参数：

CGFunctionRef _Nullable CGFunctionCreate (
   void * _Nullable info,
   size_t domainDimension,
   const CGFloat * _Nullable domain,
   size_t rangeDimension,
   const CGFloat * _Nullable range,
   const CGFunctionCallbacks * _Nullable callbacks
);

看到这就很头疼啊？当然，CGGradient对象足矣满足大部分时候的需求，不过有空的话还是耐心下来看看吧。我们先看看参数

info 用来传递到callback的数据（就是指向回调所需要的数据的指针），注意他的生命周期可能不只是方法的生命周期

domainDimesion 输入的数量，quart中，就是1。(回调输入值的个数，Quartz要求回调携带一个输入值)

domain 一组数据确定输入的有效间隔，在Quartz中是0到1，0表示开始，1表示结束（一个浮点数的数组。Quartz只会提供数组中的一个元素给回调函数。一个转入值的范围是0(渐变的开始点的颜色)到1(渐变的结束点的颜色)。）

rangDimension 输出的数量:(回调提供的输出值的数目，对于每一个输入值，我们的回调必须为每个颜色组件提供一个值，以及一个alpha值来指定透明度，颜色组件值由Quartz提供的颜色空间来解释，并提供给CGShading创建函数。例如如果我们使用RGB颜色空间，则我们提供4作为输出值(R,G,B,A)的数目)

rang 输出的有效间隔（一个浮点数的数组，用于指定每个颜色组件的值及alpha值）

callbacks 用来计算的实际方法（一个回调数据结构，包含结构体的版本(设置为0)、生成颜色组件值的回调、一个可选的用于释放回调中info参数表示的数据。）格式如下格式如下void myCalculateShadingValues (void *info, const CGFloat *in, CGFloat *out)

在创建CGShading对象后，如果需要我们可以设置额外的裁减操作。然后调用CGContextDrawShading函数来使用渐变来绘制上下文的裁减区域。当调用这个函数时，Quartz调用回调函数来获取从起点到终点这个范围内的颜色值。

当不再需要CGShading对象时，我们调用CGShadingRelease来释放它。

首先设置CGFunction对象来计算颜色值

我们可以以我们想要的方式来计算颜色值，我们的颜色计算函数包含以下三个参数：

1.void *info 这个值可以为NULL 或者是一个指向传递给CGShading创建函数的数据

2.const CGFloat *in Quartz传递in数组给回调。数组中的值必须在为CGFunction对象定义的输入值范围内

3.我们的回调函数传递out数组给Quartz。它包含用于颜色空间中每个颜色组件的元素及一个alpha值。输出值应该在CGFunction对象中定义的输出值的范围内

static void myCalculateShadingValues (void *info,
                            const CGFloat *in,
                            CGFloat *out)
{
CGFloat v;
    size_t k, components;
    static const CGFloat c[] = {1, 0, 0.5, 0 };
    components = (size_t)info;
    v = *in;
    for (k = 0; k < components -1; k++)
        *out++ = c[k] * v;
     *out++ = 1;
}

这里的三个参数，函数很简单out的值（r,g,b,a）分别为(in*1,in*0.in*0.5,1)

创建一个CGFuction

static CGFunctionRef myGetFunction (CGColorSpaceRef colorspace) //1 {
size_t numComponents;
static const CGFloat input_value_range [2] = { 0, 1 };
static const CGFloat output_value_ranges [8] = { 0, 1, 0, 1, 0, 1, 0, 1 }; static const CGFunctionCallbacks callbacks = { 0, //2
                                &myCalculateShadingValues,
                                NULL };
numComponents = 1 + CGColorSpaceGetNumberOfComponents (colorspace); //3
 return CGFunctionCreate ((void *) numComponents,  1,  input_value_range,  numComponents, output_value_ranges,  &callbacks); 
}

其中，每一行分别为

以colorspace作为参数
定义callback函数
计算颜色域中的颜色组建的个数，例如RGB就是三个，然后加一，表示alpha通道

用CGShading绘制Axial Gradient

CGPoint     startPoint,
            endPoint;
CGFunctionRef myFunctionObject;
CGShadingRef myShading;
startPoint = CGPointMake(0,0.5);
endPoint = CGPointMake(1,0.5);
colorspace = CGColorSpaceCreateDeviceRGB();
myFunctionObject = myGetFunction (colorspace);
myShading = CGShadingCreateAxial (colorspace,
                        startPoint, endPoint,
                        myFunctionObject,
                        false, false)
CGContextDrawShading (myContext, myShading);
CGShadingRelease (myShading);
CGColorSpaceRelease (colorspace);
CGFunctionRelease (myFunctionObject);

用CGShading绘制Radial Gradient

callback

static void  myCalculateShadingValues (void *info,
                                const CGFloat *in,
                                CGFloat *out)
{
    size_t k, components;
    double frequency[4] = { 55, 220, 110, 0 };
    components = (size_t)info;
    for (k = 0; k < components - 1; k++)
        *out++ = (1 + sin(*in * frequency[k]))/2;
     *out++ = 1; // alpha
}

CGPoint startPoint, endPoint;
      CGFloat startRadius, endRadius;
      startPoint = CGPointMake(0.25,0.3);
      startRadius = .1;
      endPoint = CGPointMake(.7,0.7);
      endRadius = .25;
      colorspace = CGColorSpaceCreateDeviceRGB();
      myShadingFunction = myGetFunction (colorspace);
      CGShadingCreateRadial (colorspace,
                      startPoint,
                      startRadius,
                      endPoint,
                      endRadius,
                      myShadingFunction,
                      false,
                      false)
 CGContextDrawShading (myContext, shading);
 CGShadingRelease (myShading);
 CGColorSpaceRelease (colorspace);
 CGFunctionRelease (myFunctionObject);

具体效果请看这里 http://www.tuicool.com/articles/biieum

我的水平还是有点看不懂啊