Как рисовать пальцем и экспортировать изображение
В этой короткой статье мы рассмотрим, как добавить в наши приложения представление, в котором пользователи могут рисовать пальцем.
Создать рисунок довольно просто. Сначала мы увидим, как получать позиции касаний и отслеживать движения. Следующим шагом будет соединение этих точек в CGContext, чтобы получить наш рисунок. Наконец, мы увидим, как сбросить и экспортировать созданный чертеж как UIImage.
Получение местоположения касаний
Мы начинаем с отслеживания касаний внутри представления.
// 1 - Сначала мы создаем подкласс UIView многократного использования, чтобы обернуть функцию рисования. В этом классе у нас есть массив массивов, содержащих CGPoints. Внешний массив представляет собой линии, каждая из которых состоит из нескольких точек.
// 2— Поскольку этот класс является подклассом UIView, мы можем переопределить методы touchesBegan(_:with:) и touchesMoved(_:with:), которые позволяют нам определять местоположение касаний. Эти методы имеют доступ к набору касаний, из которых мы можем получить первую точку касания и преобразовать ее в систему координат этого представления.
// 3— Теперь, когда у нас есть точка, нам нужно добавить ее в lineArray. Поскольку touchesBegan отмечает начало новой строки, мы сначала добавляем к ней пустой массив из CGPoint. Затем мы добавляем нашу первую точку к этой новой строке.
// 4 - Все последующие точки будут отслеживаться в touchesMoved. Как и раньше, мы получаем доступ к текущей точке и добавляем ее в наш массив. Наконец, вызывая setNeedsDisplay(), мы запускаем перерисовку нашего представления.
В следующем методе мы увидим, как рисовать точки.
Рисование линий
Следующий шаг - нарисовать точки для нашего обзора.
// 1 - Чтобы нарисовать точки, нам нужно переопределить метод draw(_:). Здесь мы получаем доступ к текущему CGContext, вызывая UIGraphicsGetCurrentContext(). Такой контекст определяет место назначения рисования и содержит параметр для визуализации заданных точек, например цвет и толщину линии.
Этот контекст будет передан другому методу, который выполнит собственно рисование. Почему мы используем отдельный метод, станет ясно, когда мы увидим, как экспортировать чертеж в UIImage.
// 2— В draw(inContext:) мы начинаем с настройки данного контекста. Мы устанавливаем его ширину линии на 5, ее цвет на черный и делаем концы линии закругленными, устанавливая cap равным .round. Конечно, вы можете использовать любую другую конфигурацию, которая вам нравится!
// 3— Затем мы начинаем рисовать в контексте. Для этого мы перебираем массив строк.
// 4 - Для каждой строки мы получаем первую точку и устанавливаем ее в качестве начальной, вызывая context.move(to:).
// 5 - Теперь мы добавляем линию к каждой следующей точке с помощью context.addLine(to:) и рисуем линию с помощью context.strokePath().
Сброс и экспорт чертежа
Наконец, давайте посмотрим, как очистить рисунок или экспортировать его как изображение.
// 1 - Удалить рисунок так же просто, как сбросить lineArray и вызвать setNeedsDisplay. Это вызовет новый рендеринг наших точек, но, поскольку их больше не осталось, представление будет пустым.
// 2— Чтобы экспортировать наш рисунок, сначала нам нужно создать новый UIGraphicsBeginImageContext того же размера, что и сам вид. Это также установит текущий контекст на вновь созданный, к которому мы получаем доступ, вызывая UIGraphicsGetCurrentContext.
// 3— Мы можем повторно использовать наш draw(inContext:) метод, но на этот раз мы передаем только что созданный контекст изображения.
// 4 - Наконец, мы получаем изображение, вызывая UIGraphicsGetImageFromCurrentImageContext(), который создаст UIImage с нашим рисунком.
Следующие шаги
Теперь, когда у нас есть базовый вид для рисования, вы можете продолжить и расширить его, добавив цвета или сделав линии настраиваемыми.
Вот отличный урок Рона Клиффера на raywenderlich.com, где он не только добавляет эти функции, но и показывает альтернативный способ рисования с использованием нескольких UIImageViews.
