Swift Academy · Aula

Desenho Personalizado com Core Graphics

Desenhe caminhos e formas em draw(_:).

Desenho Personalizado com Core Graphics é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

Quando desenhar conteúdo personalizado

Quando camadas e imagens não conseguem representar uma forma — como gráficos, assinaturas e controles personalizados — desenhe-a por conta própria usando Core Graphics (Quartz 2D).

Substituindo draw(_:)

Crie uma subclasse de UIView e substitua draw(_:). O UIKit chama esse método com um contexto configurado; é nele que você emite os comandos de desenho.

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

O contexto gráfico

Dentro de draw(_:), obtenha o CGContext atual. Ele funciona como uma tela com estado: defina as cores e as larguras das linhas e, depois, contorne ou preencha.

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

Construindo caminhos

Um CGPath (ou UIBezierPath) descreve linhas, curvas e formas. Mova-se até um ponto inicial e, em seguida, adicione linhas e 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()

Contornando e preenchendo

O contorno delimita um caminho; o preenchimento colore seu interior. Defina a cor e a largura e, depois, chame stroke() ou 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

Adicione curvas suaves com segmentos de Bézier quadráticos (addQuadCurve) ou cúbicos (addCurve), especificando os pontos de controle.

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 do contexto: salvando e restaurando

O contexto mantém um estado. Envolva as transformações e o recorte em saveGState()/restoreGState() para que as alterações não afetem os desenhos posteriores.

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

Gradientes e sombras

O Core Graphics desenha gradientes (CGGradient com drawLinearGradient) e sombras (setShadow(offset:blur:color:)) diretamente no contexto.

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

Recorte

Adicione um caminho e chame clip() para limitar os desenhos seguintes àquela região — algo útil para imagens com cantos arredondados ou preenchimentos mascarados.

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

Desempenho e setNeedsDisplay

draw(_:) é executado na CPU e tem um custo relativamente alto. Solicite novas renderizações somente quando necessário, usando setNeedsDisplay(), e mantenha o código de desenho enxuto.

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

Renderização fora da tela

Para bitmaps reutilizáveis, renderize-os em uma imagem com UIGraphicsImageRenderer em vez de redesenhar a cada quadro.

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))
}

Verificação rápida: Core Graphics

Teste sua compreensão sobre desenho personalizado.

Recapitulação: desenho personalizado com Core Graphics

Substitua draw(_:) e emita comandos para o CGContext: construa caminhos com linhas e curvas de Bézier e, depois, contorne ou preencha. Isole as transformações e os recortes com saveGState()/restoreGState() e adicione gradientes, sombras e recortes diretamente.

Desenhar exige trabalho da CPU — redesenhe somente por meio de setNeedsDisplay() e armazene bitmaps reutilizáveis em cache com UIGraphicsImageRenderer.

Perguntas Frequentes

A aula “Desenho Personalizado com Core Graphics” é grátis?

Sim — o texto completo de “Desenho Personalizado com Core Graphics” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “Desenho Personalizado com Core Graphics”?

Desenhe caminhos e formas em draw(_:). Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Desenho Personalizado com Core Graphics”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Swift Academy