Como usar Core Graphics en SwiftUI

El diseño de interfaces ha evolucionado drásticamente, pero la necesidad de crear elementos visuales personalizados y de alto rendimiento sigue siendo una constante para cualquier iOS Developer. Si bien el framework declarativo de Apple nos ofrece primitivas muy útiles como Circle, Rectangle o Capsule, en ocasiones el diseño exige formas geométricas complejas, gráficos de datos detallados o animaciones personalizadas. Es aquí donde la combinación de SwiftUI y Core Graphics brilla con luz propia.

En este tutorial exhaustivo, exploraremos qué es Core Graphics, cómo se integra perfectamente en el paradigma declarativo actual, y cómo puedes utilizar la programación Swift en Xcode para dibujar gráficos 2D avanzados que funcionen de manera nativa en iOS, macOS y watchOS.

1. ¿Qué es Core Graphics?

Core Graphics (también conocido como Quartz 2D) es un potente framework de dibujo bidimensional basado en C que ha sido el motor de renderizado de Apple durante décadas. Tradicionalmente asociado a UIKit y AppKit, proporciona primitivas de dibujo de bajo nivel: trazados (paths), transformaciones geométricas, gradientes, gestión de color y renderizado de texto.

Aunque SwiftUI ha simplificado la creación de interfaces, bajo el capó sigue apoyándose en motores de renderizado de nivel inferior. La belleza de la programación Swift moderna es que no tenemos que abandonar el poder de Core Graphics; Apple ha creado puentes elegantes para utilizar sus conceptos dentro de nuestras vistas declarativas.

2. El Puente Fundamental: Path en SwiftUI

Para integrar SwiftUI y Core Graphics, la herramienta principal que utilizarás es la estructura Path. Un Path en SwiftUI es el equivalente directo y el envoltorio (wrapper) de un CGPath de Core Graphics.

Dibujando Formas Básicas con Path

Para entender cómo funciona, vamos a crear un triángulo personalizado. Abre Xcode, crea una nueva vista en Swift y utiliza el siguiente código:

import SwiftUI

struct TriangleView: View {
    var body: some View {
        Path { path in
            // 1. Mover el "lápiz" al punto inicial (arriba en el centro)
            path.move(to: CGPoint(x: 100, y: 10))
            
            // 2. Dibujar línea hacia la esquina inferior derecha
            path.addLine(to: CGPoint(x: 190, y: 190))
            
            // 3. Dibujar línea hacia la esquina inferior izquierda
            path.addLine(to: CGPoint(x: 10, y: 190))
            
            // 4. Cerrar el trazado (vuelve al punto inicial)
            path.closeSubpath()
        }
        .fill(Color.blue)
        .frame(width: 200, height: 200)
    }
}

En este bloque de Swift, el closure del Path recibe un objeto de trazado mutable. Utilizamos métodos clásicos de Core Graphics (como move y addLine) usando coordenadas CGPoint.

Implementando el Protocolo Shape

Si deseas que tu trazado sea reutilizable y se adapte al tamaño de su contenedor (como lo hace un Rectangle nativo), la mejor práctica para un iOS Developer es conformar el protocolo Shape.

import SwiftUI

struct DiamondShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // Calculamos los puntos basados en el rectángulo disponible (rect)
        let top = CGPoint(x: rect.midX, y: rect.minY)
        let right = CGPoint(x: rect.maxX, y: rect.midY)
        let bottom = CGPoint(x: rect.midX, y: rect.maxY)
        let left = CGPoint(x: rect.minX, y: rect.midY)
        
        path.move(to: top)
        path.addLine(to: right)
        path.addLine(to: bottom)
        path.addLine(to: left)
        path.closeSubpath()
        
        return path
    }
}

// Uso en la vista:
// DiamondShape().fill(Color.purple).frame(width: 100, height: 150)

3. Curvas de Bézier y Trazados Complejos

El verdadero poder de Core Graphics radica en la creación de curvas suaves. Las curvas de Bézier permiten crear desde ondas fluidas hasta iconos personalizados.

Curva Cuadrática vs Cúbica

• Cuadrática (addQuadCurve): Utiliza un único punto de control para tirar de la línea hacia él.
• Cúbica (addCurve): Utiliza dos puntos de control, permitiendo curvas en forma de “S”.

Veamos cómo crear una forma de onda (wave) utilizando curvas de Bézier en SwiftUI:

import SwiftUI

struct WaveShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.move(to: CGPoint(x: rect.minX, y: rect.midY))
        
        // Curva de Bézier Cúbica
        path.addCurve(
            to: CGPoint(x: rect.maxX, y: rect.midY),
            control1: CGPoint(x: rect.width * 0.25, y: rect.minY),
            control2: CGPoint(x: rect.width * 0.75, y: rect.maxY)
        )
        
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        
        return path
    }
}

4. El Siguiente Nivel: La Vista Canvas (Modo Inmediato)

A partir de iOS 15 y macOS 12, Apple introdujo la vista Canvas. Si alguna vez has utilizado draw(_:) en UIKit con CGContext, el Canvas te resultará muy familiar.

Mientras que construir vistas apilando formas con ZStack funciona bien para interfaces estáticas, cuando necesitas dibujar miles de partículas, gráficos de datos complejos o realizar un renderizado de alto rendimiento, Canvas es la herramienta definitiva.

El Canvas proporciona un GraphicsContext, que es una envoltura moderna, segura para valores (value-safe) y orientada a Swift, de lo que clásicamente era el CGContext en Core Graphics.

import SwiftUI

struct DataChartView: View {
    let dataPoints: [CGFloat] = [20, 50, 30, 80, 60, 100, 40]
    
    var body: some View {
        Canvas { context, size in
            // 1. Definimos el espacio de dibujo
            let width = size.width / CGFloat(dataPoints.count - 1)
            var path = Path()
            
            // 2. Calculamos los puntos
            for (index, data) in dataPoints.enumerated() {
                let x = width * CGFloat(index)
                // Invertimos el eje Y porque el 0,0 está arriba a la izquierda
                let y = size.height - (data / 100) * size.height 
                
                if index == 0 {
                    path.move(to: CGPoint(x: x, y: y))
                } else {
                    path.addLine(to: CGPoint(x: x, y: y))
                }
            }
            
            // 3. Renderizamos el trazado en el contexto
            context.stroke(
                path,
                with: .color(.green),
                style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round)
            )
        }
        .frame(height: 200)
        .padding()
    }
}

Ventajas de usar Canvas

• Rendimiento: Evita la creación de múltiples nodos de vista en el árbol estructural de SwiftUI. Todo se dibuja en una única pasada (Immediate Mode).
• Filtros y Efectos: El GraphicsContext permite aplicar desenfoques (blur), opacidades, y modos de mezcla (blend modes) directamente a elementos específicos dentro del lienzo.
• Soporte de Texto e Imágenes: Puedes dibujar símbolos SF, texto y objetos Image directamente en coordenadas específicas.

5. Desarrollo Multiplataforma: iOS, macOS y watchOS

Una de las mayores alegrías de la programación Swift hoy en día es la filosofía “Aprende una vez, aplícalo en todas partes”.

Al utilizar SwiftUI y Core Graphics a través de Path, Shape o Canvas, tu código se vuelve inherentemente multiplataforma. Las estructuras como CGPoint, CGSize y CGRect (que pertenecen a CoreFoundation/CoreGraphics) están disponibles de idéntica manera en Xcode sin importar el destino del compilador.

• iOS/iPadOS: Excelente para animaciones interactivas, gráficos de finanzas y elementos de UI personalizados.
• macOS: Ideal para herramientas de diseño gráfico, visualizadores de datos en pantalla grande y utilidades de la barra de menú.
• watchOS: Perfecto para anillos de actividad personalizados, esferas de reloj (Watch Faces) o mini-gráficos de salud, donde el rendimiento y el bajo consumo de batería son críticos. (Nota: Canvas es especialmente útil en watchOS para mantener los FPS estables).

6. Integrando CGPath Directamente

En caso de que estés migrando una aplicación antigua o necesites usar algoritmos de Core Graphics puros (por ejemplo, intersección de trazados o cálculos matemáticos avanzados provistos por C), puedes inyectar un CGPath directamente en un Path de SwiftUI.

import SwiftUI
import CoreGraphics

struct LegacyGraphicsView: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                // Crear un CGPath mutable puro
                let cgPath = CGMutablePath()
                let rect = CGRect(x: 0, y: 0, width: geometry.size.width, height: geometry.size.height)
                
                // Usar funciones de Core Graphics
                cgPath.addEllipse(in: rect)
                
                // Integrarlo en SwiftUI
                path.addPath(Path(cgPath))
            }
            .stroke(Color.red, lineWidth: 5)
        }
    }
}

7. Buenas Prácticas para el iOS Developer

Para sacar el máximo provecho de estas tecnologías, ten en cuenta las siguientes recomendaciones:

• Usa Shape en lugar de Path estáticos: Si tu gráfico necesita adaptarse a diferentes tamaños de pantalla o dispositivos (iPhone vs iPad), envuelve tu lógica matemática dentro de la función path(in rect: CGRect) del protocolo Shape.
• Reserva Canvas para alto rendimiento: No uses Canvas para dibujar un simple círculo o un botón. Resérvalo para gráficos de líneas con cientos de puntos, sistemas de partículas o dibujos donde el rendimiento sea un cuello de botella evidente.
• Animación Geométrica: SwiftUI puede animar trazados automáticamente si implementas la propiedad animatableData. Esto te permite crear morfismos asombrosos entre dos formas diferentes (por ejemplo, animar un botón de “Play” transformándose en un botón de “Pause”).

Conclusión

El dominio de SwiftUI y Core Graphics es lo que separa a un desarrollador junior de un iOS Developer avanzado. Mientras que el catálogo de componentes estándar te llevará hasta cierto punto, la capacidad de manipular CGPoint, curvas de Bézier y el Canvas de renderizado en la programación Swift te otorga el control absoluto sobre los píxeles de la pantalla.