对移动开发有帮助iOS图层绘制iOS Developer

iOS 最少代码实现颜色渐变

2016-10-20  本文已影响473人  欧辰_OSR

方法一.使用CAGradientLayer

//初始化颜色渐变图层和图层范围

CAGradientLayer *layer =  [CAGradientLayer new];

layer.frame = CGRectMake(100,100, 100, 100);

//初始化属性 colors数组 设置渐变的颜色   //当前添加四种颜色

layer.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] colorWithAlphaComponent:1].CGColor,(id)[[UIColor yellowColor] colorWithAlphaComponent:1].CGColor,(id)[[UIColor blueColor] colorWithAlphaComponent:1].CGColor,(id)[UIColor clearColor].CGColor, nil];

//初始化属性locations,渐变颜色的区间分布,locations的数组长度和color一致,这个值一般不用管它,默认是nil,会平均分布。

layer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.3],[NSNumber numberWithFloat:0.8],[NSNumber numberWithFloat:1.0], nil];

[self.view.layer addSublayer:layer];

//补充属性说明: 

@property (nonatomic,assign) CGPoint startPoint;  //映射locations中第一个位置,用单位向量表示,比如(0,0)表示从左上角开始变化。默认值是(0.5,0.0)。

@property (nonatomic,assign) CGPoint endPoint;  //映射locations中最后一个位置,用单位向量表示,比如(1,1)表示到右下角变化结束。默认值是(0.5,1.0)。

@property (nonatomic,assign) NSString *type;   //默认值是kCAGradientLayerAxial,表示按像素均匀变化。除了默认值也无其它选项。

其中locations startPoint和endPoint对应的坐标,如下:

运行效果:(适合矩形的颜色渐变)

方法二:通过绘画渐变上下文实现  CGContextDrawLinearGradient

//底部上下渐变效果背景

CGRect frame = self.view.frame;

UIImageView *imgview = [[UIImageView alloc]initWithFrame:frame];

[self.view addSubview:imgview];

// The following methods will only return a 8-bit per channel context in the DeviceRGB color space. 通过图片上下文设置颜色空间间

UIGraphicsBeginImageContext(imgview.frame.size);

//获得当前的上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//创建颜色空间 /* Create a DeviceRGB color space. */

CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

//通过矩阵调整空间变换

CGContextScaleCTM(context, frame.size.width, frame.size.height);

//设置颜色 矩阵

CGFloat colors[] = {

253.0/255.0, 163.0/255.0, 87.0/255.0, 1.0,

253.0/255.0, 163.0/255.0, 87.0/255.0, 0.0,

};

//通过颜色组件获得渐变上下文

CGGradientRef backGradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));

//释放颜色渐变

CGColorSpaceRelease(rgb);

//通过上下文绘画线色渐变

CGContextDrawLinearGradient(context, backGradient, CGPointMake(0.5, 0), CGPointMake(0.5, 1), kCGGradientDrawsBeforeStartLocation);

//通过图片上下文获得照片

imgview.image = UIGraphicsGetImageFromCurrentImageContext();

运行效果:

此方法还可以创建从一个点向周围 渐变的 圆形渐变效果效果

//发散球效果

UIImageView *clearCircleImgView = [[UIImageView alloc]initWithFrame:self.view.bounds];

[self.view addSubview:clearCircleImgView];

UIGraphicsBeginImageContext(clearCircleImgView.frame.size);

CGContextRef clearCircleContext = UIGraphicsGetCurrentContext();

CGColorSpaceRef clearCircleRGB = CGColorSpaceCreateDeviceRGB();

//矩阵 设置颜色的渐变透明度和渐变球的半径大小(矩阵的行数)

CGFloat clearCircleColors[] = {

249.0/255.0, 204.0/255.0, 23.0/255.0, 0.5,

249.0/255.0, 204.0/255.0, 23.0/255.0, 0.35,

249.0/255.0, 204.0/255.0, 23.0/255.0, 0.2,

249.0/255.0, 204.0/255.0, 23.0/255.0, 0.05,

}; 

CGGradientRef clearCircleGradient = CGGradientCreateWithColorComponents(clearCircleRGB, clearCircleColors, NULL, sizeof(clearCircleColors[0]*4));

CGContextDrawRadialGradient(clearCircleContext, clearCircleGradient, CGPointMake(160, 160),20, CGPointMake(160, 160),250, kCGGradientDrawsBeforeStartLocation);

clearCircleImgView.image = UIGraphicsGetImageFromCurrentImageContext();

CGGradientRelease(clearCircleGradient);

运行效果:

上一篇下一篇

猜你喜欢

热点阅读