Swift Academy · Lección

Dibujo personalizado con Core Graphics

Dibuje rutas y formas en draw(_:).

Dibujo personalizado con Core Graphics es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

Cuándo dibujar contenido personalizado

Cuando las capas y las imágenes no pueden representar una forma, como un gráfico, una firma o un control personalizado, dibújela usted mismo con Core Graphics (Quartz 2D).

Anulación de draw(_:)

Herede de UIView y anule draw(_:). UIKit lo invoca con un contexto configurado; en él se ejecutan los comandos de dibujo.

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

El contexto gráfico

Dentro de draw(_:), obtenga el CGContext actual. Es un lienzo con estado: establezca los colores y los grosores de línea y, después, trace o rellene.

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

Construcción de trazados

Un CGPath (o UIBezierPath) describe líneas, curvas y formas. Muévase hasta un punto inicial y, después, añada líneas y curvas.

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

Trazado y relleno

El trazado dibuja el contorno de un trazado; el relleno colorea su interior. Establezca el color y el grosor y, después, llame a stroke() o fill().

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

Curvas

Añada curvas suaves con segmentos de Bézier cuadráticos (addQuadCurve) o cúbicos (addCurve), especificando los puntos de control.

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

Estado del contexto: guardar y restaurar

El contexto mantiene su estado. Incluya las transformaciones y el recorte entre saveGState()/restoreGState() para evitar que los cambios afecten a los dibujos posteriores.

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

Degradados y sombras

Core Graphics dibuja degradados (CGGradient con drawLinearGradient) y sombras (setShadow(offset:blur:color:)) directamente en el contexto.

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

Recorte

Añada un trazado y llame a clip() para limitar el dibujo posterior a esa región, lo que resulta útil para imágenes redondeadas o rellenos enmascarados.

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

Rendimiento y setNeedsDisplay

draw(_:) se ejecuta en la CPU y tiene un coste relativamente alto. Solicite un redibujado solo cuando sea necesario mediante setNeedsDisplay() y mantenga ligero el código de dibujo.

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

Renderizado fuera de pantalla

Para obtener mapas de bits reutilizables, renderice el contenido en una imagen con UIGraphicsImageRenderer en lugar de volver a dibujarlo en cada fotograma.

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

Comprobación rápida: Core Graphics

Compruebe su comprensión del dibujo personalizado.

Resumen: dibujo personalizado con Core Graphics

Anule draw(_:) y ejecute comandos en el CGContext: construya trazados con líneas y curvas de Bézier y, después, trace o rellene. Aísle las transformaciones y el recorte con saveGState()/restoreGState() y añada directamente degradados, sombras y recortes.

El dibujo es trabajo de la CPU: vuelva a dibujar solo mediante setNeedsDisplay() y almacene en caché los mapas de bits reutilizables con UIGraphicsImageRenderer.

Preguntas frecuentes

¿La lección «Dibujo personalizado con Core Graphics» es gratis?

Sí — el texto completo de «Dibujo personalizado con Core Graphics» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Dibujo personalizado con Core Graphics»?

Dibuje rutas y formas en draw(_:). Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Dibujo personalizado con Core Graphics»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Swift Academy