Quartz2D之渐变使用

落日映苍穹つ 2022-03-11 03:55 177阅读 0赞

Quartz2D提供了两种渐变填充方法。第一种是使用Quartz自带的Gradient填充方法；第二种是使用自定义的着色器。

这里将先描述如何使用CGGradient对象来做渐变填充。

`// Drawing code`

`// 创建Quartz上下文`

`CGContextRef context = UIGraphicsGetCurrentContext();`

`// 创建色彩空间对象`

`CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();`

`// 创建起点颜色`

`CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.01f, 0.99f, 0.01f, 1.0f});`

`// 创建终点颜色`

`CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.99f, 0.99f, 0.01f, 1.0f});`

`// 创建颜色数组`

`CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (` `const`  `void` `*[]){beginColor, endColor}, 2, nil);`

`// 创建渐变对象`

`CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){`

`    ` `0.0f,      ` `// 对应起点颜色位置`

`    ` `1.0f       ` `// 对应终点颜色位置`

`});`

`// 释放颜色数组`

`CFRelease(colorArray);`

`// 释放起点和终点颜色`

`CGColorRelease(beginColor);`

`CGColorRelease(endColor);`

`// 释放色彩空间`

`CGColorSpaceRelease(colorSpaceRef);`

`CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);`

`// 释放渐变对象`

`CGGradientRelease(gradientRef);`

上述代码效果将产生一个由绿到蓝的一个渐变填充矩形。

这里使用了CGColor和CFArray来作为设置渐变颜色的参数。另外， CGGradientCreateWithColors的最后一个locations参数可以传空，这样默认为从0.0到1.0。

以上画的是两种颜色的渐变，是由绿到靛蓝。下面我们来看一下三层颜色的渐变：

`// 创建Quartz上下文`

`CGContextRef context = UIGraphicsGetCurrentContext();`

`// 创建色彩空间对象`

`CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();`

`// 创建渐变对象`

`CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef,`

`                                                                ` `(CGFloat[]){`

`                                                                    ` `0.01f, 0.99f, 0.01f, 1.0f,`

`                                                                    ` `0.01f, 0.99f, 0.99f, 1.0f,`

`                                                                    ` `0.99f, 0.99f, 0.01f, 1.0f`

`                                                                ` `},`

`                                                                ` `(CGFloat[]){`

`                                                                    ` `0.0f,`

`                                                                    ` `0.5f,`

`                                                                    ` `1.0f`

`                                                                ` `},`

`                                                                ` `3);`

`// 释放色彩空间`

`CGColorSpaceRelease(colorSpaceRef);`

`// 填充渐变色`

`CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);`

`// 释放渐变对象`

`CGGradientRelease(gradientRef);`

上述代码绘制了三种颜色的渐变色，由绿到靛蓝到黄色。并且在45度轴方向上的颜色都是一样的。

当然，我们也可以通过改变矩形两点坐标的位置来改变渐变轴的方向，并且也可以设置关键颜色的位置：

<table style="border-collapse:collapse;border-spacing:0px;background-image:none;border:0px;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;"> 
 <tbody style="background-image:none;border:0px;line-height:1.1em;vertical-align:baseline;"> 
  <tr style="background-image:none;border:0px;line-height:1.1em;vertical-align:baseline;"> 
   <td style="border-collapse:collapse;background-image:none;border:0px;line-height:1.1em;vertical-align:baseline;font-size:12px;"> 
    <div style="background-image:none;border:0px;line-height:1.1em;vertical-align:baseline;"> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 创建Quartz上下文</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGContextRef context = UIGraphicsGetCurrentContext();</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 创建色彩空间对象</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 创建渐变对象</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef, </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">(CGFloat[]){ </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.01f, 0.99f, 0.01f, 1.0f,</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.01f, 0.99f, 0.99f, 1.0f,</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.99f, 0.99f, 0.01f, 1.0f</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">}, </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">(CGFloat[]){ </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.1f,</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.5f,</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">0.9f</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">}, </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">3);</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 释放色彩空间</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGColorSpaceRelease(colorSpaceRef);</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 填充渐变色</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 460.0f), CGPointMake(320.0f, 0.0f), 0);</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;">
       &nbsp; 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;color:#008200;">// 释放渐变对象</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;"> 
      <code style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;">CGGradientRelease(gradientRef);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

运行上述代码后我们可以发现，渐变轴被旋转了90度。而且蓝色与黄色区域也有所增大，更靠近矩形的中心。