总结iOS实现渐变颜⾊的三种⽅法
在iOS开发过程中有的时候会需要⽤到渐变的颜⾊，这篇⽂章总结了三种⽅法来实现，有需要的朋友们下⾯来⼀起看看吧。
⼀、CAGradientLayer实现渐变
CAGradientLayer是CALayer的⼀个特殊⼦类，⽤于⽣成颜⾊渐变的图层，使⽤较为⽅便
下⾯介绍下它的相关属性：
colors 渐变的颜⾊
locations 渐变颜⾊的分割点
startPoint&endPoint 颜⾊渐变的⽅向，范围在(0,0)与(1.0,1.0)之间，如(0,0)(1.0,0)代表⽔平⽅向渐变,(0,0)(0,1.0)代表竖直⽅向渐变
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
GColor, (__bridge id)[UIColor blueColor].CGColor]; gradientLayer.locations = @[@0.3, @0.5, @1.0];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.frame = CGRectMake(0, 100, 300, 100);
[self.view.layer addSublayer:gradientLayer];
CAGradientLayer实现渐变标间简单直观，但存在⼀定的局限性，⽐如⽆法⾃定义整个渐变区域的形状，如环形、曲线形的渐变。
⼆、Core Graphics相关⽅法实现渐变
iOS Core Graphics中有两个⽅法⽤于绘制渐变颜⾊，CGContextDrawLinearGradient可以⽤于⽣成线性渐
变，CGContextDrawRadialGradient⽤于⽣成圆半径⽅向颜⾊渐变。函数可以⾃定义path，⽆论是什么形状都可以，原理都是⽤来做Clip，所以需要在CGContextClip函数前调⽤CGContextAddPath函数把CGPathRef加⼊到Context中。
另外⼀个需要注意的地⽅是渐变的⽅向，⽅向是由两个点控制的，点的单位就是坐标。因此需要正确从CGPathRef中到正确的点，⽅法当然有很多种看具体实现，本例中，我就是简单得通过调⽤CGPathGetBoundingBox函数，返回CGPathRef的矩形区域，然后根据这个矩形取两个点，读者可以根据⾃⾏需求修改具体代码。
1-> 线性渐变
- (void)drawLinearGradient:(CGContextRef)context
path:(CGPathRef)path
startColor:(CGColorRef)startColor
endColor:(CGColorRef)endColor
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGRect pathRect = CGPathGetBoundingBox(path);
//具体⽅向可根据需求修改
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
CGContextRef gc = UIGraphicsGetCurrentContext();
//创建CGMutablePathRef
CGMutablePathRef path = CGPathCreateMutable();
//绘制Path
CGRect rect = CGRectMake(0, 100, 300, 200);
CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
CGPathCloseSubpath(path);
//绘制渐变
[self drawLinearGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor]; //注意释放CGMutablePathRef
CGPathRelease(path);
//从Context中获取图像，并显⽰在界⾯上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
}
2-> 圆半径⽅向渐变
- (void)drawRadialGradient:(CGContextRef)context
path:(CGPathRef)path
startColor:(CGColorRef)startColor
endColor:(CGColorRef)endColor
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));
CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextEOClip(context);
CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
CGContextRef gc = UIGraphicsGetCurrentContext();
/
/创建CGMutablePathRef
CGMutablePathRef path = CGPathCreateMutable();
//绘制Path
CGRect rect = CGRectMake(0, 100, 300, 200);
CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMinY(rect));
CGPathCloseSubpath(path);
//绘制渐变
[self drawRadialGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];
渐变颜代码大全
//注意释放CGMutablePathRef
CGPathRelease(path);
//从Context中获取图像，并显⽰在界⾯上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
}
三、以CAShapeLayer作为layer的mask属性
CALayer的mask属性可以作为遮罩让layer显⽰mask遮住(⾮透明)的部分；CAShapeLayer为CALayer的⼦类，通过path属性可以⽣成不同的形状，将CAShapeLayer对象⽤作layer的mask属性的话，就可以⽣成不同形状的图层。
故⽣成颜⾊渐变有以下⼏个步骤：
1、⽣成⼀个imageView(也可以为layer)，image的属性为颜⾊渐变的图⽚
2、⽣成⼀个CAShapeLayer对象，根据path属性指定所需的形状
3、将CAShapeLayer对象赋值给imageView的mask属性
- (void)viewDidLoad
{
[super viewDidLoad];
[self.view addSubview:self.firstCircle];
_firstCircle.frame = CGRectMake(0, 0, 200, 200);
_ = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);
CGFloat firsCircleWidth = 5;
self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth:firsCircleWidth];
_firstCircleShapeLayer.path = [self generateBezierPathWithCenter:CGPointMake(100, 100) radius:100].CGPath;
_firstCircle.layer.mask = _firstCircleShapeLayer;
}
- (CAShapeLayer *)generateShapeLayerWithLineWidth:(CGFloat)lineWidth
{
CAShapeLayer *waveline = [CAShapeLayer layer];
waveline.lineCap = kCALineCapButt;
waveline.lineJoin = kCALineJoinRound;
waveline.strokeColor = [UIColor redColor].CGColor;
waveline.fillColor = [[UIColor clearColor] CGColor];
waveline.lineWidth = lineWidth;
waveline.backgroundColor = [UIColor clearColor].CGColor;
return waveline;
}
- (UIBezierPath *)generateBezierPathWithCenter:(CGPoint)center radius:(CGFloat)radius
{
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];
return circlePath;
}
- (UIImageView *)firstCircle
{
if (!_firstCircle) {
self.firstCircle = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];
_firstCircle.layer.masksToBounds = YES;
_firstCircle.alpha = 1.0;
}
return _firstCircle;
}
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对各位iOS开发者们能有所帮助，如果有疑问⼤家可以留⾔交流。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论