CGGradient: qué es, tipos de degradados y su creación

¿Qué es CGGradient?

CGGradient es un objeto inmutable en Core Graphics que encapsula un conjunto de colores y reglas para combinarlos a lo largo de una transición degradada. Internamente, CGGradient almacena una matriz de CGColor, una matriz de posiciones (locations) en el rango [0.0, 1.0] y una referencia al CGColorSpace en el que se interpretan los colores. Cada color está asociado con una posición en la escala del degradado: la posición 0.0 corresponde al inicio, 1.0 al final de la transición.

Al crear un CGGradient mediante la función CGGradientCreateWithColors, Core Graphics precalcula los valores de color intermedios. Un degradado puede contener una cantidad arbitraria de paradas de color (color stops), lo que permite transiciones complejas de múltiples colores. El número de colores debe ser al menos dos, y cada color debe corresponder a una posición en la matriz de locations.

La arquitectura de CGGradient se diferencia de las API de nivel superior, como CAGradientLayer de Core Animation, en que trabaja directamente en el contexto de Core Graphics. Esto proporciona un control total sobre el proceso de dibujo y la capacidad de combinar degradados con otras operaciones de Quartz 2D: máscaras de recorte, sombras y transformaciones.

Degradados lineales y radiales

Core Graphics admite dos tipos de degradados: lineal (axial) y radial. Un degradado lineal se crea con la función CGGradientCreateWithColors y se dibuja con CGContextDrawLinearGradient. Un degradado radial requiere la misma estructura CGGradient pero se dibuja con CGContextDrawRadialGradient.

Degradado lineal (Axial)

Degradado lineal extiende la transición de color a lo largo de una línea recta desde el punto inicial startPoint hasta el punto final endPoint. Los colores se interpolan entre estos dos puntos, y el comportamiento más allá de ellos se controla mediante las opciones de extensión. El degradado lineal es ideal para crear fondos suaves, simular superficies metálicas y transiciones de color en elementos de interfaz.

Degradado radial (Radial)

Degradado radial crea una transición de color de un círculo a otro. Cada círculo se define por un centro (startCenter / endCenter) y un radio (startRadius / endRadius). El color se interpola desde el círculo interior al exterior. Un caso especial es cuando el radio inicial es 0: el degradado se irradia desde un solo punto. Los degradados radiales se utilizan para simular fuentes de luz, lentes, cuerpos celestes y efectos de foco.

Crear CGGradient: colores y posiciones

CGGradient se crea con una única función base: CGGradientCreateWithColors. La función recibe un CGColorSpace, una matriz de CGColor (CFArray) y una matriz de CGFloat locations. Si locations es NULL, los colores se distribuyen uniformemente a lo largo de la escala del degradado. Si se especifican locations, su cantidad debe coincidir con el número de colores.

La matriz locations contiene valores de 0.0 a 1.0 que definen los puntos de parada de cada color. Los valores deben aumentar de forma monótona. Si el primer valor es mayor que 0.0, el color desde el inicio hasta esta posición se extrapola a partir del color en la posición 0.0. De manera similar para el último valor menor que 1.0. Este comportamiento se controla mediante las opciones de extensión durante el dibujo.

Al elegir colores para un degradado, es importante considerar el espacio de color. Todos los colores en un mismo CGGradient deben pertenecer al mismo CGColorSpace — Core Graphics interpola los componentes en ese espacio. Si los colores se crean en espacios diferentes, deben convertirse primero a un espacio común mediante CGColorCreateCopyByMatchingToColorSpace.

Dibujar un degradado en el contexto

Core Graphics proporciona dos funciones para dibujar un degradado: CGContextDrawLinearGradient para lineal y CGContextDrawRadialGradient para radial. Ambas funciones aceptan un contexto gráfico, un objeto CGGradient, opciones de extensión y parámetros geométricos específicos del tipo. El dibujo se realiza teniendo en cuenta la máscara de recorte actual y la transformación del contexto.

Opciones de extensión (Gradient Options)

Las opciones de extensión controlan el comportamiento del degradado más allá del rango de posiciones 0.0–1.0. La constante kCGGradientDrawsBeforeStartLocation rellena el área antes de la posición inicial con el color de la primera parada. kCGGradientDrawsAfterEndLocation rellena con el color de la última parada. Estas opciones se pueden combinar mediante una máscara de bits. Para degradados radiales, las opciones se aplican al área más allá de los radios inicial y final.

Efecto de las transformaciones

El degradado se dibuja en el sistema de coordenadas del contexto gráfico actual, teniendo en cuenta su transformación (CTM — Current Transformation Matrix). La aplicación de CGContextTranslateCTM, CGContextScaleCTM o CGContextRotateCTM antes de llamar a la función de dibujo cambia la posición y la escala del degradado. Esto permite reutilizar un único CGGradient para diferentes áreas sin crear nuevos objetos.

Opciones: extensión, suavizado y enmascaramiento

Core Graphics proporciona varios mecanismos adicionales para controlar los degradados: suavizado (antialiasing), enmascaramiento mediante máscara de recorte (clipping mask) y combinación con efectos de transparencia. El suavizado está activado por defecto en el contexto gráfico y se controla mediante CGContextSetShouldAntialias.

Máscara de recorte permite restringir el área de dibujo del degradado a una forma arbitraria. Antes de llamar a CGContextDrawLinearGradient, es necesario definir un trazado mediante CGContextBeginPath, CGContextAddPath y CGContextClip. El degradado se dibuja solo dentro del área delimitada por este trazado. Esto se usa ampliamente para crear iconos degradados, botones y barras de progreso.

Extensión del degradado es otro parámetro importante. Al usar kCGGradientDrawsBeforeStartLocation, Core Graphics extrapola el color de la primera parada a toda el área antes de startPoint. Sin esta opción, el área fuera del degradado permanece sin relleno (transparente). La combinación de ambas opciones garantiza que todo el rectángulo del contexto gráfico se rellene con un degradado, incluso si startPoint y endPoint están dentro de él.

Ejemplos de código en Swift

Veamos ejemplos prácticos de creación y dibujo de degradados en iOS usando CGGradient y Core Graphics.

Degradado lineal con tres colores

Este ejemplo crea un degradado lineal con tres colores (azul, verde, rojo) y lo dibuja en diagonal a través de un UIView. La matriz locations distribuye los colores de manera desigual: azul de 0.0 a 0.3, verde en 0.6, rojo de 0.6 a 1.0.

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Degradado radial con efecto de brillo

Este ejemplo dibuja un degradado radial que simula un efecto de brillo. El punto inicial con radio cero define el centro del brillo, y el círculo exterior define el límite de atenuación. Este efecto se utiliza para resaltar elementos de la interfaz o indicadores de actividad.

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Degradado con máscara de recorte

En este ejemplo, el degradado se limita a un área circular mediante un trazado de recorte. Antes de dibujar el degradado, se define un trazado circular que se convierte en la máscara actual del contexto. El degradado rellena solo el área dentro del círculo, creando un efecto de icono degradado.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}