Quartz 2D CGGradient与CGShading实现渐变的绘制

Quartz 提供了两种不透明的数据类型来创建渐变CGShading 和 CGGradient，你可以使用其中任何一个来创建轴向或径向渐变。

轴向渐变：沿着一个轴方向线性渐变

径向渐变：一个点为原型，指定半径的范围内辐射渐变

我们用两个图来理解一下这两个概念：

1、轴向渐变（轴：沿着左上角到右下角）

2、径向渐变（以中心点为圆心，向半径为50的四周方向辐射渐变）

CGShading与CGGradient之间的关系，以及使用的不同。

CGGradient是CGShading的子集，CGGradient封装了对CGShading的渐变实现函数，因此CGGradient使用起来会比CGShading简单。

下面介绍一下两者的不同：

CGGradient	CGShading
使用同一个CGGradient实例可以同时绘制轴向渐变和径向渐变	在绘制轴向渐变和径向渐变时，需要分别实例化不同的对象
在绘制时创建渐变的几何形状	在创建对象时创建渐变的几何形状
Quartz自动完成计算渐变中每个点的颜色变化	你需要提供一个回调函数，来计算渐变中每个点的颜色
使用简单，定义两个点和对应的颜色即可	需要在回调函数中计算，使用比较麻烦

我们先来介绍一下CGGradient的使用，它使用起来很简单，我们通过它来实现上面介绍的轴向渐变和径向渐变的例子

实例化方法：

// 参数

// 1、颜色空间

// 2、指定渐变中的颜色（需要与locations个数对应，每组颜色值为rgba（根据颜色空间决定），例如：1,0,0,1，表示一个红色，透明度为1）

// 3、指定渐变的过度位置（值范围：[0,1]，0:几何开始的位置；1:几何结束的位置；0.5：几何中间的位置）

init?(colorSpace space: CGColorSpace,

      colorComponents components: UnsafePointer<CGFloat>,

      locations: UnsafePointer<CGFloat>?, count: Int)

// 参数

// 1、颜色空间

// 2、指定渐变中的颜色（需要与locations个数对应，每组颜色值为：CGColor）

// 3、指定渐变的过度位置（值范围：[0,1]，0:几何开始的位置；1:几何结束的位置；0.5：几何中间的位置）

init?(colorsSpace space: CGColorSpace?, colors: CFArray, locations: UnsafePointer<CGFloat>?)

具体实现代码：

override func draw(_ rect: CGRect) {

    guard let context = UIGraphicsGetCurrentContext() else { return }

    // 初始化颜色空间，有两种方法，一般采用第一种（下面两个颜色空间是一样的）

    // 方法1:

    let space = CGColorSpaceCreateDeviceRGB()

    // 方法2:

//        let space = CGColorSpace(name: CGColorSpace.sRGB)!

    // 设置渐变的过度位置，范围：[0, 1]

    var locations: [CGFloat] = [0, 0.5, 1]

    // 设置过度的颜色组件集合，因为我们的颜色空间是RGB，因此每组的颜色值为rgba，即：[r, g, b, a]

    // 注意：每组的颜色是在数组中连续的，即：[r,g,b,a, r,g,b,a, r,g,b,a]

    var colors: [CGFloat] = [1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1]

    // 初始化渐变对象CGGradient

    guard let gradient = CGGradient(colorSpace: space,

                                    colorComponents: &colors,

                                    locations: &locations,

                                    count: locations.count) else {

        print("gradient create fail")

        return

    }

    // 绘制轴向渐变

    // 参数：

    // 1、渐变对象实例

    // 2、渐变的几何开始点坐标

    // 3、渐变的几何结束点坐标

    // 4、绘制选项，包括：

    // (1)drawsBeforeStartLocation：在几何开始点的位置之前的空间部分（超出边界不绘制），用第一个颜色值扩散颜色

    // (2)drawsAfterEndLocation：在几何结束点的位置之后的空间部分（超出边界不绘制），用最后一个颜色值扩散颜色

    context.drawLinearGradient(gradient,

                               start: .init(x: 0, y: 0),

                               end: .init(x: bounds.width, y: bounds.height),

                               options: .drawsBeforeStartLocation)

    // 绘制径向渐变

    // 参数：

    // 1、渐变对象实例

    // 2、渐变开始的圆心点坐标

    // 3、渐变开始的圆半径（辐射半径）

    // 4、渐变结束的圆心点坐标

    // 5、渐变结束的圆半径（辐射半径）

    // 6、绘制选项，跟上面的一样

//        context.drawRadialGradient(gradient,

//                                   startCenter: .init(x:bounds.width/2, y:bounds.height/2),

//                                   startRadius: 10,

//                                   endCenter: .init(x: bounds.width/2, y: bounds.height/2),

//                                   endRadius: 50,

//                                   options: .drawsBeforeStartLocation)

}

代码中注释介绍的已经很详细了，这里我给大家着重介绍一下options参数。我们看下图便一目了然：

红色区域：是渐变开始点绘制之前的颜色填充部分。

蓝色区域：是渐变结束点绘制之后的颜色填充部分。

options选项决定在渐变的开始点之前还是结束点之后的区域内进行颜色填，填充的颜色色值为：

1、开始点之前绘制（drawsBeforeStartLocation）：填充色为颜色数组中第一个颜色值

2、结束点之后绘制（drawsAfterEndLocation）：填充色为颜色数组中最后一个颜色值

下面是两种options的轴向渐变的绘图结果：（径向渐变也是如此）

drawsBeforeStartLocation：（开始点前采用红色填充，结束点后无填充）

drawsAfterEndLocation：（开始点前无填充，结束点后采用蓝色填充）

接下来介绍CGShading的使用，它在绘制渐变时用起来比CGGradient要复杂，因为需要我们自己来计算渐变过程中每个点的颜色。使用时涉及到以下几个关键对象：

CGFunctionCallbacks：用于提供计算渐变过程中每个点的颜色的回调函数，这就是我们实现渐变的关键点。

CGFunction：为上面的回调函数设置初始值，以及相关值的范围的对象。

CGShading：定义渐变的规则，例如：颜色空间、从几何区域的哪里开始渐变到哪里结束渐变等。

实现轴向渐变与径向渐变的实例化方法不一样，下面是对应这两种实现的实例化方法：

// 初始化轴向渐变对象

init?(axialSpace space: CGColorSpace,

      start: CGPoint,

      end: CGPoint,

      function: CGFunction,

      extendStart: Bool,

      extendEnd: Bool)

// 初始化径向渐变对象

init?(radialSpace space: CGColorSpace,

      start: CGPoint,

      startRadius: CGFloat,

      end: CGPoint,

      endRadius: CGFloat,

      function: CGFunction,

      extendStart: Bool,

      extendEnd: Bool)

下面是一个利用CGShading实现轴向渐变的具体实现的demo，代码中注释写的很详细，大家可以参考。

override func draw(_ rect: CGRect) {

    guard let context = UIGraphicsGetCurrentContext() else { return }

    // 初始化一个回调函数，用于计算每个点的颜色值

    // 参数：

    // 1、CGFunction初始化传入的第一个参数info（指针类型）

    // 2、输入值

    // 3、输出值

    // 4、释放info指针的回调函数

    var callback = CGFunctionCallbacks(version: 0) { info, inVal, outVal in

        let numberOfComponents: Int

        if let info = info {

            // 注意这里不能用takeRetainedValue()取值，否则会提前释放info的内存，导致下次访问info时出错

            numberOfComponents = Unmanaged<NSNumber>.fromOpaque(info).takeUnretainedValue().intValue

        }else{

            numberOfComponents = 0

        }

        // 渐变开始的颜色值

        let startColor: [CGFloat] = [1, 0, 0, 1]

        // 渐变结束的颜色值

        let endColor: [CGFloat] = [0, 1, 0, 1]

        let aInVal = inVal.pointee // 获取每次迭代的输入值，下面指定了输入值范围在[0, 1]，因此aInVal的值范围在[0, 1]

        var out = outVal

        // 下面指定了输出值包含的分量个数为numberOfComponents（即：out中应返回numberOfComponents个元素）

        for i in 0..<numberOfComponents {

            // 注意：下面指定了输出值中每个分量（每个元素）的值范围[0, 1]，因此这里的计算结果不要超出这个范围

            if aInVal < 0.5 {

                // 计算渐变开始点到中间点区间的颜色分量值

                out.pointee = startColor[i] * (0.8 - aInVal)

            }else{

                // 计算渐变中间点到结束点区间的颜色分量值

                out.pointee = endColor[i] * (aInVal - 0.2)

            }

            out = out.successor()

        }

    } releaseInfo: { info in

        guard let info = info else { return }

        // 释放info指针内存

        Unmanaged<NSNumber>.fromOpaque(info).release()

    }

    // 初始化颜色空间

    let space = CGColorSpaceCreateDeviceRGB()

    // 获取通道颜色分量的个数，这里要加一个alpha

    let numberOfComponents = space.numberOfComponents + 1 // rgb + a

    // 指定上面callback中输入值的递增迭代次数，这里设置1，即：输入值会从domain的范围内，迭代一次（0, 0.0.00167, ..., 1）终止

    // 如果设置为2，会迭代两次：第一次（0, 0.0.00167, ..., 1），第二次（0, 0.0.00167, ..., 1）

    let domainDimension = 1

    // 输入值的变化范围，这里指定从0到1，即输入值会根据渐变的开始点到结束点的变化，从0开始递增到1，如（0, 0.0.00167, ..., 1）

    // 如果设置为[1, 10]，则输入值会从1开始递增到10

    let domain: [CGFloat] = [0, 1] // 注意：这里的范围必须是递增的

    // 指定上面callback中输出值包含的分量个数，如果为4，那么上面callback的输出值out指针应该包含4个分量值(即：rgba)。

    // 可以理解为输出值数组的size

    let rangeDimension = numberOfComponents

    // 输出值每个分量的范围，即r值的范围[0, 1]，g值的范围[0, 1], b值的范围[0, 1], a值的范围[0, 1]

    // 可以理解为输出值数组中每个元素值的取值范围

    let range: [CGFloat] = [0, 1, 0, 1, 0, 1, 0, 1] // 数组下标0和1代表第一个值的范围，一次类推

    guard let function = CGFunction(info: Unmanaged<NSNumber>.passRetained(NSNumber(integerLiteral: numberOfComponents)).toOpaque(),

                                    domainDimension: domainDimension,

                                    domain: domain,

                                    rangeDimension: rangeDimension,

                                    range: range,

                                    callbacks: &callback) else {

        print("function create fail")

        return

    }

    // 渐变的开始点坐标

    let start = CGPoint(x: bounds.width/4, y: bounds.height/4)

    // 渐变的结束点坐标

    let end = CGPoint(x: bounds.width * 3 / 4, y: bounds.height * 3 / 4)

    // 指定渐变开始点之前的区域是否执行填充颜色，相当于使用CGGradient绘制渐变时，调用drawLinearGradient方法时设置的：drawsBeforeStartLocation

    let extendStart = true

    // 指定渐变结束点之后的区域是否执行填充颜色，相当于使用CGGradient绘制渐变时，调用drawLinearGradient方法时设置的：drawsAfterEndLocation

    let extendEnd = true

    // 初始化一个轴向渐变实例CGShading

    guard let shading = CGShading(axialSpace: space,

                                  start: start,

                                  end: end,

                                  function: function,

                                  extendStart: extendStart,

                                  extendEnd: extendEnd) else {

        print("shading create fail")

        return

    }

    // 绘制渐变

    context.drawShading(shading)

}

代码中注释介绍的已经很详细了，这里就不详细说明了，下面是实现的效果：

径向渐变的实现也是类似的，只不过是CGShading的实例化方法不一样。下面是采用CGShading实现的径向渐变的效果：

巴特西

Quartz 2D CGGradient与CGShading实现渐变的绘制

最新文章

热门文章