iOS Quartz2D 渐变图形 CGGradient CGShading
最近在学习iOS Quartz2D二维图形绘制--->渐变效果
Quartz2D 渐变
Quartz提供了两个不透明数据odgago创建渐变: CGShadingRef 和 CGGradientRef
可以使用任何一种来创建轴向(axial)或径向(radial)渐变.一个渐变是从一个颜色到另一个颜色的填充
一个轴向渐变(也成为线性渐变)
不说废话直接上干货, 代码和注释还算全,不懂的自行百度吧
<span style="font-size:18px;">// Quartz2DViewThree.m
// Quartz2DDemoOne
//
// Created by 帝炎魔 on 16/5/22.
// Copyright © 2016年 帝炎魔. All rights reserved.
//
#import "Quartz2DViewThree.h"
@implementation Quartz2DViewThree
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
/**
* Quartz2D 渐变
Quartz提供了两个不透明数据odgago创建渐变: CGShadingRef 和 CGGradientRef
可以使用任何一种来创建轴向(axial)或径向(radial)渐变.一个渐变是从一个颜色到另一个颜色的填充
一个轴向渐变(也成为线性渐变)
*/
// [self myGradientWithstartPoint:CGPointMake(self.bounds.size.width, 0) endPoint:CGPointMake(0, self.bounds.size.height)];
// gradientColor(context, self.bounds);
myPaintRadialShading(context, self.bounds);
}
#pragma mark ----- CGGradientCreateWithColorComponents 创建渐变图层
- (void)myGradientWithstartPoint:(CGPoint )startPoint endPoint:(CGPoint )endPoint
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint myStartPoint, myEndPoint;
myStartPoint.x = startPoint.x;
myStartPoint.y = startPoint.y;
myEndPoint.x = endPoint.x;
myEndPoint.y = endPoint.y;
CGGradientRef myGradient;
CGColorSpaceRef mycolorSpace;
size_t num_locations = 4;
CGFloat locations[4] = {0.0, 0.33, 0.66, 1.0}; // 设置4个点
CGFloat components[16] = {0.1, 1.0, 0.2, 1.0, // RGB alpha
1.0, 0.1, 0.1, 1.0,
0.1, 0.1, 1.0, 1.0,
1.0, 1.0, 1.0, 1.0
};
mycolorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
/**
* CGGradient
*
* @param mycolorSpace 设置颜色空间 色调
* @param components 设置关键点颜色的数组
* @param locations 设置关键点的位置和个数
* @param num_locations 设置点的个数
*
* @return CGGradient
*/
myGradient = CGGradientCreateWithColorComponents(mycolorSpace, components, locations, num_locations);
// CGContextDrawRadialGradient(context, myGradient, myStartPoint, 300, myEndPoint, 300, kCGGradientDrawsBeforeStartLocation);
CGContextDrawLinearGradient(context, myGradient, myStartPoint, myEndPoint, kCGGradientDrawsBeforeStartLocation);
// 释放颜色空间对象
CGColorSpaceRelease(mycolorSpace);
}
/**
* 使用CGShading对象绘制一个径向渐变
*
* 使用CGShading对象来生成如下的图形
为了绘制一个径向渐变, 需要如下的步骤:
1. 设置CGFunction 对象来计算颜色值---->>> 要有一个方法去计算这个图形的颜色function
2. 创建径向渐变的CGShading对象 ----->>>> 创建CGShading对象来绘制渐变图形
3. 使用CGShading对象来绘制径向渐变
4, 释放对象 -----> 别忘了释放对象CGShading对象
*/
#pragma mark ---- 渐变的圆的效果---> CGShading 绘制径向渐变的效果图案
void myPaintRadialShading(CGContextRef myContext, CGRect bounds) {
CGPoint startPoint, // 渐变的起始点坐标
endPoint; // 渐变的终止的点坐标
CGFloat startRadius,
endRadius;
CGAffineTransform myTransform;
CGFloat width = bounds.size.width;
CGFloat height = bounds.size.height;
/**
* 初始点的坐标和终止点坐标
都是系统的坐标系标准
通过设置起始点和终止点的坐标和半径可以绘制各种图形
通过设置颜色function 可以得到五颜六色的图形
*
*
*/
startPoint = CGPointMake(.4,.4);
startRadius = 1.;
endPoint = CGPointMake(.5,.5);
endRadius = .01;
// CMYK的模式的状态下 颜色会偏暗一点
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
// 创建一个一个CGFunctionRef 的对象, 来计算颜色值
CGFunctionRef myShadingFunction = myGetFunction(colorspace);
// 创建一个CGShadingRef来绘制径向渐变
/**
* CGShadingRef
*
* @param colorspace CGColorSpace对象 颜色空间
* @param startPoint 起始点坐标 对于轴向的渐变, 有轴线的起始点和终止点, 对于径向渐变, 有起始圆和终止圆中心的坐标
* @param startRadius 起始点圆的半径--->用于定义渐变区域的圆的起始半径
* @param endPoint 终止点坐标
* @param endRadius 终止点圆的半径----> 用于定义渐变区域的圆的终止半径
* @param myShadingFunction CGFunction 用于计算颜色的函数 单独计算的函数
* @param extendStart false ----> 是否延伸到初始点
* @param extendEnd false ---> 是否延伸到终止点
*
* @return 返回的是一个CGShadingRef的对象 配置好渐变的颜色空间, 起始点, 起始点圆的半径, 终止点, 终止点的圆半径, 颜色的返回函数, 得到这个对象之后, 开始绘制渐变图形
*/
CGShadingRef shading = CGShadingCreateRadial(colorspace,
startPoint, startRadius,
endPoint, endRadius,
myShadingFunction,
false, false);
// 取得图形的变换的CTM 矩阵
myTransform = CGAffineTransformMakeScale(width, height);
CGContextConcatCTM(myContext, myTransform);
// 保存图形的状态 context
CGContextSaveGState(myContext);
// 修剪Clip一个图形
CGContextClipToRect(myContext, CGRectMake(0, 0, 1, 1));
// 设置填充的RGB颜色
CGContextSetRGBFillColor(myContext, 1, 1, 1, 1);
// 设置一个填充的图形的frame
CGContextFillRect(myContext, CGRectMake(0, 0, 1, 1));
// 绘制Shading
CGContextDrawShading(myContext, shading);
// 注意 :别忘了 释放 颜色空间colorSpace , shading中间绘制对象, 计算颜色的方法CGFunction
CGColorSpaceRelease(colorspace);
// 释放 CGShading的对象
CGShadingRelease(shading);
// 释放计算颜色值得函数对象
CGFunctionRelease(myShadingFunction);
// 恢复状态 restore context
CGContextRestoreGState(myContext);
}
/**
* 设置CGFunction 对象来计算颜色值
*
* 计算径向渐变和轴向渐变颜色值函数并没有什么区别, 我们可以按照上面的轴向的设置CGFunction对象来计算颜色值,
函数遵循相同的原型, 每个函数获取一个输入值并计算N个值, 即颜色空间的每个颜色组件加一个alpha值
写完颜色计算函数后调用它, 需要创建一个CGFunction对象, 如在轴向中设置CGFunction对象来计算颜色值
*/
static void myCalculateShadingValues(void *info, const CGFloat *in, CGFloat *out) {
size_t k, components;
/**
* double值数组 控制颜色 对组中对应的R,G,B,alpha等值
*/
double frequency[4] = {220, 220, 220, 0};
components = (size_t)info;
for(k = 0; k < components - 1; k++)
// 通过一个sin函数给颜色空间一个RGB的值
*out++ = (1 + sin(*in * frequency[k])) / 2;
*out = 1;
}
/**
* myGetFunction 创建myFunction 给Shading一个颜色回调函数
*
*
*/
static CGFunctionRef myGetFunction(CGColorSpaceRef colorspace) {
// 创建一个CGFloat数组, value的值
static const CGFloat input_value_range[2] = {0, 1};
static const CGFloat output_value_ranges[8] = {0, 1, 0, 1, 0, 1, 0, 1};
static const CGFunctionCallbacks callbacks = {0, &myCalculateShadingValues, NULL};
size_t numComponents = 1 + CGColorSpaceGetNumberOfComponents(colorspace);
/**
* CGFunctionCreate函数
* 1. 指向回调所需要的数据的指针,
2. 回调的输入值的个数, Quartz要求回调携带一个输入值
*/
// 返回一个创建CGFunctionCreate CGFunction的方法
return CGFunctionCreate((void *)numComponents,
1, input_value_range,
numComponents, output_value_ranges,
&callbacks);
}
#pragma mark --- CGShading 轴向的渐变的效果
void gradientColor (CGContextRef myContext, CGRect bounds)
{
CGPoint startPoint, endPoint;
CGAffineTransform myTransform;
CGFloat width = bounds.size.width;
CGFloat height = bounds.size.height;
startPoint = CGPointMake(0,0.5);
endPoint = CGPointMake(1,0.5);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFunctionRef myShadingFunction = myGetGradientFunction(colorspace);
CGShadingRef shading = CGShadingCreateAxial(colorspace,
startPoint, endPoint,
myShadingFunction,
false, false);
myTransform = CGAffineTransformMakeScale(width, height);
CGContextConcatCTM(myContext, myTransform);
CGContextSaveGState(myContext);
CGContextClipToRect(myContext, CGRectMake(0, 0, 1, 1));
CGContextSetRGBFillColor(myContext, 1, 1, 1, 1);
CGContextFillRect(myContext, CGRectMake(0, 0, 1, 1));
CGContextBeginPath(myContext);
CGContextAddArc(myContext, .5, .5, .3, 0, M_PI, 0);
CGContextClosePath(myContext);
CGContextClip(myContext);
CGContextDrawShading(myContext, shading);
CGColorSpaceRelease(colorspace);
CGShadingRelease(shading);
CGFunctionRelease(myShadingFunction);
CGContextRestoreGState(myContext);
}
static CGFunctionRef myGetGradientFunction (CGColorSpaceRef colorspace) {
static const CGFloat input_value_range[2] = {0, 1};
static const CGFloat output_value_ranges[8] = {0, 1, 0, 1, 0, 1, 0, 1};
static const CGFunctionCallbacks callbacks = {0, &myGradientCalculateShadingValues, NULL};
size_t numComponents = 1 + CGColorSpaceGetNumberOfComponents (colorspace);
return CGFunctionCreate((void *)numComponents,
1, input_value_range,
numComponents, output_value_ranges,
&callbacks);
}
static void myGradientCalculateShadingValues(void *info, const CGFloat *in, CGFloat *out) {
CGFloat v;
size_t k, components;
static const CGFloat c[] = {1, 0, .5, 0};
components = (size_t)info;
v = *in;
for(k = 0; k < components -1; k++)
*out++ = c[k] * v;
*out = 1;
}
@end</span>