在iOS中系统框架提供了好多方法来供我们绘图,今天我们就研究渐变色.
1 用CAGradientLayer来实现
我们可以用CAGradientLayer来实现给试图添加渐变色.关于CAGradientLayer我们点击进去会发现主要有以下几个属性
@interface CAGradientLayer : CALayer
@property(nullable, copy) NSArray *colors;
@property(nullable, copy) NSArray <NSNumber *>*locations;
@property CGPoint startPoint;
@property CGPoint endPoint;
@property(copy) NSString *type;
@end
解释下各个属性
colors 渐变的颜色
locations 渐变颜色的分割点
startPoint&endPoint 颜色渐变的方向，范围在(0,0)与(1.0,1.0)之间，如(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变
CAGradientLayer 继承于CALayer ,所以CAlayer得各个方法我们也可以使用.好了知识复习完毕 我们开始操作,先上代码
#pragma mark 渐变色
-(void)gradineViewOne
{
CAGradientLayer* gradinentlayer=[CAGradientLayer layer];
gradinentlayer.colors=@[(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor];
//分割点 设置 风电设置不同渐变的效果也不相同
gradinentlayer.locations=@[@0.2,@0.4,@1.0];
gradinentlayer.startPoint=CGPointMake(0, 0);
gradinentlayer.endPoint=CGPointMake(1.0, 0);
gradinentlayer.frame=CGRectMake(20, 100, 300, 400);
[self.view.layer addSublayer:gradinentlayer];
}
效果图
CAGradientLayer实现渐变标间简单直观，但存在一定的局限性，比如无法自定义整个渐变区域的形状，如环形、曲线形的渐变。
很显然知识这样并不能满足我们实际生活中所需要面对的需求.那么还有其他方法吗?答案是肯定的.
下面我们用另外的方法实现
2 Core Graphics相关方法实现渐变
OS Core Graphics中有两个方法用于绘制渐变颜色，CGContextDrawLinearGradient可以用于生成线性渐变，CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。
我们先完成线性渐变的处理 上代码
线性渐变
//线性渐变
-(void)makeLineGradient
{
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
//创建绘图上下文
CGContextRef gcontext = UIGraphicsGetCurrentContext();
//创建CGMutablePathRef
CGMutablePathRef path = CGPathCreateMutable();
//绘制Path
CGRect rect = CGRectMake(20, 100, 300, 300);
CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
CGPathCloseSubpath(path);
//渐变绘制
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
CGColorRef startColor =[UIColor greenColor].CGColor;
CGColorRef endColor =[UIColor redColor].CGColor;
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(gcontext);
CGContextAddPath(gcontext, path);
CGContextClip(gcontext);
CGContextDrawLinearGradient(gcontext, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(gcontext);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
//注意释放CGMutablePathRef
CGPathRelease(path);
//从Context中获取图像，并显示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
}
上效果图
半径渐变
//半径渐变
-(void)makeradisGradient
{
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
//创建绘图上下文
CGContextRef gcontext = UIGraphicsGetCurrentContext();
//创建CGMutablePathRef
CGMutablePathRef path = CGPathCreateMutable();
//绘制Path
CGRect rect = CGRectMake(50, 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);
//渐变绘制
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
CGColorRef startColor =[UIColor greenColor].CGColor;
CGColorRef endColor =[UIColor blackColor].CGColor;
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(gcontext);
CGContextAddPath(gcontext, path);
CGContextEOClip(gcontext);
CGContextDrawRadialGradient(gcontext, gradient, center, 0, center, radius, 0);
CGContextRestoreGState(gcontext);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
//注意释放CGMutablePathRef
CGPathRelease(path);
//从Context中获取图像，并显示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
}
效果图
使用 CAShapeLayer 来实现
原理就是利用CALayer的mask属性
可以作为遮罩让layer显示mask遮住(非透明)的部分；CAShapeLayer为CALayer的子类，通过path属性可以生成不同的形状，将CAShapeLayer对象用作layer的mask属性的话，就可以生成不同形状的图层
这样做的前提是先有一个渐变色的图片 然后利用CAShapeLayer 来自定义形状mask遮住不想要的部分,显示出我们想要的样式.
上代码
//使用cashapelayer 实现渐变
-(void)gradineViewTwo
{
UIImageView *gCircle=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];
[self.view addSubview:gCircle];
gCircle.layer.masksToBounds = YES;
gCircle.alpha = 1.0;
gCircle.frame=CGRectMake(0, 0, 200, 200);
gCircle.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);
CGFloat lineWidth = 5;
//生成shapelayer
CAShapeLayer *wavelinelayer = [CAShapeLayer layer];
wavelinelayer.lineCap = kCALineCapButt;
wavelinelayer.lineJoin = kCALineJoinRound;
wavelinelayer.strokeColor = [UIColor redColor].CGColor;
wavelinelayer.fillColor = [[UIColor clearColor] CGColor];
wavelinelayer.lineWidth = lineWidth;
wavelinelayer.backgroundColor = [UIColor clearColor].CGColor;
//生成path 自定义形状
CGPoint center =CGPointMake(100, 100);
//调整半径和中心点的位置 遮住的部分不一样
CGFloat radius=95;
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];
wavelinelayer.path=circlePath.CGPath;
//CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)部分
gCircle.layer.mask=wavelinelayer;
}
上原来的渐变图 和效果图
效果图
总结 实现渐变色其实还是主要是对Core Graphics 这个绘图框架的底层运用,涉及到CAShapeLayer等相关知识点.
