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 alpha1.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 对象来计算颜色值---->>> 要有一个方法去计算这个图形的颜色function2. 创建径向渐变的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);// 保存图形的状态 contextCGContextSaveGState(myContext);// 修剪Clip一个图形CGContextClipToRect(myContext, CGRectMake(0, 0, 1, 1));// 设置填充的RGB颜色CGContextSetRGBFillColor(myContext, 1, 1, 1, 1);// 设置一个填充的图形的frameCGContextFillRect(myContext, CGRectMake(0, 0, 1, 1));// 绘制ShadingCGContextDrawShading(myContext, shading);// 注意 :别忘了 释放 颜色空间colorSpace , shading中间绘制对象, 计算颜色的方法CGFunctionCGColorSpaceRelease(colorspace);// 释放 CGShading的对象CGShadingRelease(shading);// 释放计算颜色值得函数对象CGFunctionRelease(myShadingFunction);// 恢复状态 restore contextCGContextRestoreGState(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>

iOS Quartz2D 渐变图形 CGGradient CGShading相关推荐

iOS：quartz2D绘图（绘制渐变图形）
quartzD可以用来绘制渐变图形,即图形向外或向内发散,会变得越来越模糊. 渐变分为线性渐变和径向渐变,所谓线性渐变,就是图形以线的方式发散,发散后一般呈现出矩形的样子:而径向渐变,就是以半径的大小 ...
html5绘制渐变图形-线性渐变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Canvas3——绘制渐变图形与绘制变形图形
1.Canvas绘制渐变图形 (1)绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方 ...
如何用Photoshop制作渐变图形
如何用Photoshop制作渐变图形 (写作时间:4月7号作者:李嘉城) 首先打开Photoshop,摁住Ctrl+N新建一张新画布,然后点击椭圆工具(椭圆工具快捷键:U),用椭圆工具摁住shift ...
Html5学习------canvas绘制径向渐变图形
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
关东升的《iOS实战：图形图像、动画和多媒体卷（Swift版）》上市了
关东升的<iOS实战:图形图像.动画和多媒体卷(Swift版)>上市了承蒙广大读者的厚爱我的<iOS实战:图形图像.动画和多媒体卷(Swift版)>京东上市了,欢迎广大读者提 ...
ios图像和图形最佳实践（三）
没有前面进度的同学还是从(二)开始,否则会感觉比较突兀 ios图像和图形最佳实践(二) - 对于我们的app所附带的图片苹果强烈建议我们使用图像素材来存储这其中有很多原因图像素材针对基于名称和基 ...
HTML5教程实例-用Canvas制作径向渐变图形
HTML5教程实例-用Canvas制作径向渐变图形上节课,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形.通过上节课的学习,我们知道绘制线性渐变图形用到了一个 ...

iOS Quartz2D 渐变图形 CGGradient CGShading

iOS Quartz2D 渐变图形 CGGradient CGShading相关推荐

最新文章

热门文章