最开始渐变色这里直接给UI要的一张图放在了上面,后来有时间就研究了一下Quartz2D。
在iOS中常用的绘图框架就是Quartz2D, Quartz2D是CoreGraphics框架的一部分, 强大的二维图像绘制引擎, Quartz2D在UIKit框架中也有很好的集成, UIKit中的组件都是由 CoreGraphics进行绘制的,
iOS中绘图一般分为以下几个步骤:
1. 获取绘图上下文// 绘图只能在此方法中调用, 否则无法得到当前图形上下文 - (void)drawRect:(CGRect)rect
2. 创建并设置路径
3. 将路径添加到上下文
4. 设置上下文的状态
5. 绘制路径
6. 释放路径
功能的简单实现,直接贴代码。
//
// HTQuartz2DView.h
// 网格理财
//
// Created by 侯孟杰 on 2017/4/12.
// Copyright © 2017年迈时科技. All rights reserved.
//
#import
@interface HTQuartz2DView : UIView
@property (nonatomic,assign)CGFloat height;
@end
//
// HTQuartz2DView.m
// 网格理财
//
// Created by 侯孟杰 on 2017/4/12.
// Copyright © 2017年迈时科技. All rights reserved.
//
#import "HTQuartz2DView.h"
@implementation HTQuartz2DView
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
[self drawLinearGradient:context];
}
//线性渐变色
- (void)drawLinearGradient:(CGContextRef) context{
//使用RGB颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
/*指定渐变色
space:颜色空间
components:颜色数组,注意由于指定了RGB颜色空间,那么四个数组元素表示一个颜色(red、green、blue、alpha),
设计给了两个颜色则这个数组有4*2个元素
locations:颜色所在位置(范围0~1),这个数组的个数不小于components中存放颜色的个数
count:渐变个数,等于locations的个数
*/
CGFloat compoents[8] = {240.0/255.0,118.0/255.0,92.0/255.0,1,
242.0/255.0,96.0/255.0,111.0/255.0,1,
};
CGFloat locations[2] = {0,1.0};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, compoents, locations,2);
/*绘制线性渐变
context:图形上下文
gradient:渐变色
startPoint:起始位置
endPoint:终止位置
options:绘制方式,kCGGradientDrawsBeforeStartLocation开始位置之前就进行绘制,到结束位置之后不再绘制,
kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制,到结束点之后继续填充
*/
CGContextDrawLinearGradient(context, gradient,CGPointMake(UI_IOS_WINDOW_WIDTH/2,0), CGPointMake(UI_IOS_WINDOW_WIDTH/2,self.height), kCGGradientDrawsAfterEndLocation);
//释放颜色空间
CGColorSpaceRelease(colorSpace);
}
//径向渐变色
- (void)drawRadialGradient:(CGContextRef) context{
//使用rgb颜色渐变空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
/*指定渐变色
space:颜色空间
components:颜色数组,注意由于指定了RGB颜色空间,那么四个数组元素表示一个颜色(red、green、blue、alpha),
设计给了两个颜色则这个数组有4*2个元素
locations:颜色所在位置(范围0~1),这个数组的个数不小于components中存放颜色的个数
count:渐变个数,等于locations的个数
*/
CGFloat compoents[8]={
242.0/255.0,144.0/255.0,100.0/255.0,1,
242.0/255.0,96.0/255.0,111.0/255.0,1
};
CGFloat locations[2]={1.0,0.5};
CGGradientRef gradient= CGGradientCreateWithColorComponents(colorSpace, compoents, locations,2);
/*绘制径向渐变
context:图形上下文
gradient:渐变色
startCenter:起始点位置
startRadius:起始半径(通常为0,否则在此半径范围内容无任何填充)
endCenter:终点位置(通常和起始点相同,否则会有偏移)
endRadius:终点半径(也就是渐变的扩散长度)
options:绘制方式,kCGGradientDrawsBeforeStartLocation开始位置之前就进行绘制,但是到结束位置之后不再绘制,
kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制,但到结束点之后继续填充
CGContextDrawRadialGradient(CGContextRef cg_nullable c,
CGGradientRef cg_nullable gradient, CGPoint startCenter, CGFloat startRadius,
CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)
*/
CGContextDrawRadialGradient(context, gradient, CGPointMake(UI_IOS_WINDOW_WIDTH/2,0),0, CGPointMake(UI_IOS_WINDOW_WIDTH/2,self.height), self.height, kCGGradientDrawsAfterEndLocation);
//释放颜色空间
CGColorSpaceRelease(colorSpace);
}
@end