ios绘图系列五:绘制渐变CGContextDrawLinearGradient, CGContextDrawRadialGradient, CAGradientLayer
2014-12-03 13:03
2031 查看
iOS Core Graphics 的渐变可以分成径向渐变和辐射渐变.可以实现如下的图形:
可以在view 的 - (void)drawRect:(CGRect)rect实现
UIKit提供一个CALayer的子类,专门绘制渐变,但是只支持线性渐变
可以在view 的 - (void)drawRect:(CGRect)rect实现
CGContextRef ctx = UIGraphicsGetCurrentContext(); //创建一个RGB的颜色空间 CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB(); //定义渐变颜色数组 CGFloat colors[] = { 204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00, 29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00, 0.0 / 255.0, 50.0 / 255.0, 126.0 / 255.0, 1.00, }; //创建一个渐变的色值 1:颜色空间 2:渐变的色数组 3:位置数组,如果为NULL,则为平均渐变,否则颜色和位置一一对应 4:位置的个数 CGGradientRef _gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4)); CGColorSpaceRelease(rgb); //获得一个CGRect CGRect clip = CGRectInset(CGContextGetClipBoundingBox(ctx), 20.0, 20.0); //剪切到合适的大小 CGContextClipToRect(ctx, clip); //定义起始点和终止点 CGPoint start = CGPointMake(20, 20); CGPoint end = CGPointMake(20, 100); //绘制渐变, 颜色的0对应start点,颜色的1对应end点,第四个参数是定义渐变是否超越起始点和终止点 CGContextDrawLinearGradient(ctx, _gradient, start, end, kCGGradientDrawsBeforeStartLocation); //辐射渐变 start = CGPointMake(100, 80);//起始点 end = CGPointMake(100, 140); //终结点 //辐射渐变 start:起始点 20:起始点的半径 end:终止点 40: 终止点的半径 这个辐射渐变 CGContextDrawRadialGradient(ctx, _gradient, start, 20, end, 40, 0);
UIKit提供一个CALayer的子类,专门绘制渐变,但是只支持线性渐变
CAGradientLayer *gradient = [CAGradientLayer layer];//创建渐变层 gradient.frame = CGRectMake(20, 20, 100, 100); [self.view.layer addSublayer:gradient]; //渐变层的颜色梯度数组 gradient.colors = @[(__bridge id)[UIColor colorWithRed:204.0 / 255.0 green:224.0 / 255.0 blue:244.0 / 255.0 alpha:1].CGColor, (__bridge id)[UIColor colorWithRed:29.0 / 255.0 green:156.0 / 255.0 blue:215.0 / 255.0 alpha:1].CGColor, (__bridge id)[UIColor colorWithRed:0.0 / 255.0 green:50.0 / 255.0 blue:126.0 / 255.0 alpha:1].CGColor]; //渐变层的相对位置,起始点为0,终止点为1,中间点为 (point-startpoint)/(endpoint-startpoint) gradient.locations = @[@0,@.5,@1]; //渐变方向 gradient.startPoint = CGPointMake(0, 0); gradient.endPoint = CGPointMake(0, 1);
相关文章推荐
- ios绘图系列五:绘制渐变CGContextDrawLinearGradient, CGContextDrawRadialGradient, CAGradientLayer
- iOS绘图系列四:绘制文字和图像CGContextDrawImage,drawInRect:,drawAtPoint:, UIGraphicsBeginImageContext
- iOS绘图系列四:绘制文字和图像CGContextDrawImage,drawInRect:,drawAtPoint:, UIGraphicsBeginImageContext
- iOS绘图系列二:画直线 CGContextMoveToPoint,CGContextAddLineToPoint,CGContextAddLines,
- iOS绘图系列三:画弧线CGContextAddArc ,CGContextAddArcToPoint,CGContextAddCurveToPoint,UIBezierPath
- iOS绘图系列二:画直线 CGContextMoveToPoint,CGContextAddLineToPoint,CGContextAddLines,
- iOS: CGContext的函数CGContextAddLineToPoint
- iOS - CGContextAddLineToPoint 绘图崩溃:
- [iOS] 绘制虚线CGContextSetLineDash的使用
- IOS之Quartz2D绘图5.绘制UITableViewCell渐变背景
- ios CGContext 学习1 画线 画矩形 渐变效果
- ios 绘制虚线 CGContextSetLineDash的使用
- iOS:quartz2D绘图(绘制渐变图形)
- iOS Quartz2D 渐变图形 CGGradient CGShading
- iOS: CGContext的函数CGContextAddEllipseInRect
- iOS 2D绘图详解(Quartz 2D)之阴影和渐变(Shadow,Gradient)
- iOS- CALayer绘图,如何绘制渐变效果图
- iOS: CGContext的函数CGContextBeginTransparencyLayerWithRect
- iOS: CGContext的函数CGContextBeginPage
- ios 渐进色绘制 CGGradient(一)