IOS之Quartz2D绘图4.径向渐变和线性渐变

Quartz2D渐变

绘制渐变的一般步骤

创建颜色空间

 CGColorSpaceRefcolorSpaceRef=CGColorSpaceCreateDeviceRGB();

 渐变的色谱

 CGFloatcolors[8]={1.0,0.0,0.0,1.0,1.0,1.0,1.0,1.0};

 渐变的开始到结束比例0-－1

 CGFloat locations[2]={0.0,1.0};

 创建渐变

 CGGradientRef gradient=CGGradientCreateWithColorComponents

线性渐变演示

-(void) drawLineGradient{

   CGContextRef context=UIGraphicsGetCurrentContext();

   //创建颜色空间

   CGColorSpaceRef colorSpaceRef=CGColorSpaceCreateDeviceRGB();

   //渐变的色谱

   CGFloat colors[8]={1.0,0.0,0.0,1.0,1.0,1.0,1.0,1.0};

   //渐变的开始到结束比例0-－1

   CGFloat locations[2]={0.0,1.0};

   //创建渐变

   CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpaceRef, colors, locations, 2);

   CGRect rct=CGRectMake(0,40,320,100);

   CGContextClipToRect(context, rct);

   CGContextDrawLinearGradient(context, gradient,CGPointMake(0,0),CGPointMake(320,0),kCGGradientDrawsAfterEndLocation);

   CGColorSpaceRelease(colorSpaceRef);

   CGGradientRelease(gradient);

}

上下文的裁切

在绘图中，可以选择上下文的一部分进行裁切。

1.   创建要裁切的Rect

CGRect rct=CGRectMake(0,40,320,100);

2.   开始裁切

CGContextClipToRect(context, rct);

 

镜像渐变演示

绘制镜像渐变需要的关键参数

//径像渐变的起点

 CGPoint startPoint=CGPointMake(160,200);

 //径像渐变的起点半径

CGFloat startRadius=10;

//终点

CGPoint endPoint=CGPointMake(160,120);

//终点半径

CGFloat endRadius=100;

这些参数其实是构成两个圆，为了更好的理解径向渐变，我把这两个圆也绘在画布上

 

-(void)drawRadiaGradient{

   CGContextRefcontext=UIGraphicsGetCurrentContext();

   //创建颜色空间

   CGColorSpaceRef colorSpaceRef=CGColorSpaceCreateDeviceRGB();

   //渐变的色谱

   CGFloat colors[8]={1.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0};

   //渐变的开始到结束比例0-－1

   CGFloat locations[2]={0.0,1.0};

   //创建渐变

   CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpaceRef, colors, locations, 2);

   //径像渐变的起点

   CGPoint startPoint=CGPointMake(160,200);

   //径像渐变的起点半径

   CGFloat startRadius=10;

   //终点

   CGPoint endPoint=CGPointMake(160,120);

   //终点半径

   CGFloat endRadius=100;

   //绘制径像渐变

   CGContextDrawRadialGradient(context, gradient, startPoint, startRadius,endPoint, endRadius, kCGGradientDrawsAfterEndLocation);

   //辅助理解径像渐变代码

   [[UIColoryellowColor]set];

   CGContextAddEllipseInRect(context,CGRectMake(startPoint.x-startRadius, startPoint.y-startRadius,startRadius*2, startRadius*2));

   

   CGContextAddEllipseInRect(context,CGRectMake(endPoint.x-endRadius, endPoint.y-endRadius,endRadius*2, endRadius*2));

   CGContextDrawPath(context,kCGPathStroke);

   CGColorSpaceRelease(colorSpaceRef);

   CGGradientRelease(gradient);

}

完整代码下载