Swift Academy · Урок

Пользовательская отрисовка с Core Graphics

Рисуйте контуры и фигуры в draw(_:).

Урок 4 из 413 шагов

«Пользовательская отрисовка с Core Graphics» — бесплатный урок Swift Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Swift Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Swift Academy содержит 4 уроков всего.

Когда следует рисовать содержимое вручную

Если слои и изображения не позволяют выразить нужную форму — например, для диаграмм, подписей или пользовательских элементов управления, — нарисуйте её самостоятельно с помощью Core Graphics (Quartz 2D).

Переопределение draw(_:)

Создайте подкласс UIView и переопределите draw(_:). UIKit вызывает этот метод с настроенным контекстом, а Вы размещаете в нём команды рисования.

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

Графический контекст

Внутри draw(_:) получите текущий CGContext. Это контекст с сохраняемым состоянием: сначала задайте цвета и ширину линий, а затем выполните обводку или заливку.

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

Построение контуров

CGPath (или UIBezierPath) описывает линии, кривые и фигуры. Переместитесь в начальную точку, затем добавьте линии и кривые.

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

Обводка и заливка

Обводка рисует границу контура, а заливка закрашивает его внутреннюю область. Задайте цвет и ширину, затем вызовите stroke() или 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()

Кривые

Добавляйте плавные кривые с помощью квадратичных (addQuadCurve) или кубических (addCurve) сегментов Безье, указывая управляющие точки.

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

Состояние контекста: сохранение и восстановление

Контекст хранит состояние. Оборачивайте преобразования и отсечение в saveGState()/restoreGState(), чтобы изменения не влияли на последующее рисование.

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

Градиенты и тени

Core Graphics рисует градиенты (CGGradient с помощью drawLinearGradient) и тени (setShadow(offset:blur:color:)) непосредственно в контексте.

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

Отсечение

Добавьте контур и вызовите clip(), чтобы ограничить последующее рисование этой областью. Это полезно для изображений со скруглёнными углами или маскированных заливок.

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

Производительность и setNeedsDisplay

draw(_:) выполняется на CPU и требует относительно много ресурсов. Запускайте перерисовку только при необходимости с помощью setNeedsDisplay() и сохраняйте код рисования компактным.

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

Рендеринг за пределами экрана

Для повторно используемых растровых изображений отрисовывайте их в изображение с помощью UIGraphicsImageRenderer, вместо того чтобы перерисовывать каждый кадр.

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

Быстрая проверка: Core Graphics

Проверьте, насколько хорошо Вы понимаете пользовательское рисование.

Ответь в интерактивном уроке

Итоги: пользовательское рисование с Core Graphics

Переопределите draw(_:) и передайте команды в CGContext: постройте контуры с помощью линий и кривых Безье, а затем выполните обводку или заливку. Изолируйте преобразования и отсечение с помощью saveGState()/restoreGState(), а градиенты, тени и области отсечения добавляйте непосредственно.

Рисование выполняется на CPU — запускайте перерисовку только через setNeedsDisplay(), а повторно используемые растровые изображения кэшируйте с помощью UIGraphicsImageRenderer.

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 122
Уроки: 409

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Пользовательская отрисовка с Core Graphics» бесплатный?

Да — полный текст урока «Пользовательская отрисовка с Core Graphics» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Swift Academy, подпишись на CoddyKit PRO. Курс Swift Academy содержит 4 уроков всего.

Чему я научусь в уроке «Пользовательская отрисовка с Core Graphics»?

Рисуйте контуры и фигуры в draw(_:). Ты практикуешь Swift Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Swift Academy?

Предыдущий опыт не требуется. Swift Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Пользовательская отрисовка с Core Graphics»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Swift Academy?

Да. Каждый урок Swift Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Основы CALayer
Неявные и явные анимации
Трансформации и трёхмерные эффекты
Пользовательская отрисовка с Core Graphics

← Назад к Swift Academy