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);
}