Видео уроки по рисованию карандашом для начинающих: Видео уроки рисования карандашом для начинающих

makeUIView(context:) добавляет инструмент рисования серым пером, позволяющий пользователю рисовать. Ширина основания пера равна 10. Что такое ширина основания?

Окончательная ширина рисунка зависит от выбранного типа чернил и ввода Apple Pencil. Окончательная ширина маркера будет толще ручки. Если пользователь приложит больше усилий к экрану, окончательная ширина будет больше.

Вам не нужен ваш UIKit, чтобы реагировать на любые изменения в представлении SwiftUI, поэтому оставьте

Теперь, когда у вас есть представление SwiftUI для представления холста, вы можете интегрировать его в основное представление.

Перейдите к DrawingView.swift и добавьте следующее после импорта SwiftUI :

импортировать PencilKit
 

Импортирует среду PencilKit.

Инициализация представления холста

Теперь добавьте следующее в конец списка свойств состояния:

@State private var canvasView = PKCanvasView()
 

Здесь вы инициализируете свойство, представляющее представление холста PencilKit. Позже вы захотите управлять этим видом из

Далее, в корпусе заменить:

Прямоугольник()
 

С:

CanvasView(canvasView: $canvasView)
 

Здесь вы настраиваете экземпляр CanvasView и передаете привязку к свойству canvasView .

Выберите iPad в списке симуляторов схемы, если он не выбран. Затем откройте холст SwiftUI, если он еще не открыт. Используйте Настройка параметров редактора ▸ Холст в правом верхнем углу редактора или нажмите Option-Command-Return . Нажмите Возобновить

Нажмите Live Preview , чтобы запустить приложение:

С помощью мыши рисуйте на холсте. Вы должны увидеть что-то вроде этого:

А, так приятно. Ты делаешь успехи.

Если у вас есть доступ к iPad и Apple Pencil, создайте и запустите приложение на своем устройстве. Применяйте различные силы, когда рисуете, и смотрите, как меняется толщина рисунка:

У вас еще есть много возможностей. Вы, наверное, уже заметили, что нет способа стереть ошибки рисования.

Как насчет добавления возможности начать заново?

Очистить представление холста

Ввод чертежа PKCanvasView фиксируется в объекте PKDrawing . Вы можете сохранить этот объект для последующего повторного использования или даже создать изображение объекта.

Давайте посмотрим, как использовать PKDrawing для очистки холста.

Все еще в DrawingView. swift заполните реализацию deleteDrawing() следующим образом:

canvasView.drawing = PKDrawing()
 

Здесь вы устанавливаете рисунок свойство вашего холста вид на пустой PKDrawing . Это эффективно очищает холст.

Теперь убедитесь, что вы находитесь в режиме просмотра в реальном времени. На панели предварительного просмотра нарисуйте на холсте и щелкните значок корзины, чтобы очистить рисунок:

Таким образом, вы уже на пути к тому, чтобы сделать непостоянного художника-перфекциониста счастливее.

Сохранение чертежа

Следующим логическим шагом является сохранение шедевра. Для этого вы опираетесь на свои знания PKЧертеж . Если у вас есть опыт работы с iOS, вы, вероятно, подозреваете, что делегаты собираются вмешаться. Ты прав!

Приняв PKCanvasViewDelegate , вы сможете отслеживать изменения чертежа в PKCanvasView . Затем вы используете координатора для обратной связи от делегата к представлению SwiftUI.

Перейдите к CanvasView.swift и добавьте в структуру следующее свойство:

let onSaved: () -> Void
 

Это определяет замыкание, которое представление SwiftUI может передать представлению UIKit для получения уведомлений об изменениях чертежа.

Затем добавьте в конец файла следующее:

Координатор класса: NSObject {
  var canvasView: Binding 
  let onSaved: () -> Void

  init(canvasView: Binding, onSaved: @escaping() -> Void) {
    self.canvasView = холстПросмотр
    self.onSaved = при сохранении
  }
}
 

Это создает координатора для связи между представлением SwiftUI и представлением холста. Пользовательский инициализатор устанавливает привязку к виду холста и закрытие для вызова обновлений чертежа.

Затем добавьте следующий метод в конец расширения UIViewRepresentable :

func makeCoordinator() -> Координатор {
  Координатор (canvasView: $canvasView, onSaved: onSaved)
}
 

Этот код создает координатор и возвращает его в представление SwiftUI.

Настройка делегата

Теперь вы можете настроить делегата так, чтобы он реагировал на обновления чертежей. Добавьте расширение PKCanvasViewDelegate в конец файла:

.
Координатор расширения: PKCanvasViewDelegate {
  func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
    если !canvasView.drawing.bounds.isEmpty {
      при сохранении()
    }
  }
}
 

canvasViewDrawingDidChange(_:)

Наконец, добавьте следующее перед оператором return в makeUIView(context:) :

canvasView.delegate = context.coordinator
 

Здесь вы назначаете координатора, которого вы определили, как делегата представления холста.

Продолжайте и сохраните файл, чтобы убедиться, что Xcode принимает к сведению обновления до CanvasView .

Вернувшись в DrawingView.swift , замените CanvasView(canvasView: $canvasView) на следующее:

CanvasView (canvasView: $canvasView, onSaved: saveDrawing)
 

Это обновляет инициализатор и передает метод для вызова обновлений чертежа.

Затем реализуйте saveDrawing() , добавив следующее:

print("Рисунок сохранен...")
 

Здесь вы регистрируете запись, чтобы проверить, вызывается ли метод сохранения.

Соберите и запустите приложение. Рисуйте на холсте и убедитесь, что после завершения рисования штриха в консоли регистрируется следующее:

Рисунок сохранен...
 

Теперь, когда ваш координатор работает, пришло время сохранить рисунок. Вы вносите изменения в модель данных, представляющую ваше шедевральное исполнение.

Изменение модели данных

Откройте Rendition.swift и замените import UIKit следующим:

импортировать PencilKit
 

Это импортирует структуру PencilKit, чтобы ваша модель данных знала о рисунках.

Затем добавьте следующее сразу после определения свойства title :

пусть рисунок: PKDrawing
 

С этими изменениями Представление готово для хранения объектов PKDrawing .

Сохраните файл.

Перейдите к DrawingView.swift и замените оператор печати в saveDrawing() с:

// 1
пусть изображение = canvasView.drawing.image(
  из: canvasView.bounds, масштаб: UIScreen.main.scale)
// 2
пусть исполнение = Представление(
  титул: «Лучший рисунок»,
  рисунок: canvasView.drawing,
  изображение: изображение)
// 3
self.rendition = исполнение
 

Вот что делает код:

1. Вы создаете графическое представление чертежа вида холста. Изображение основано на видимых границах холста и коэффициенте масштабирования, определенном для устройства. Это означает, что сохраненное изображение будет выглядеть более четким на экранах Retina.
2. Вы создаете экземпляр представления с версиями чертежа PKDrawing и UIImage . Используйте эти изображения, чтобы восстанавливать и делиться своими рисунками.
3. Вы обновляете переменную состояния представления, поэтому SwiftUI обновляет представление.

Затем замените реализацию restoreDrawing() на следующую:

если пусть исполнение = исполнение {
  canvasView.drawing = представление.drawing
}
 

Проверяет наличие сохраненного чертежа. Если он найден, он устанавливает рисунок вида холста в значение. Здесь показано, как обновить представление холста с помощью уже существующих PKЧертеж .

Нажмите Возобновить на панели предварительного просмотра, затем нажмите Live Preview , чтобы запустить приложение. Нарисуйте на холсте, затем щелкните значок корзины, чтобы удалить рисунок. Затем щелкните значок отмены рядом со значком корзины. Убедитесь, что ваш предыдущий рисунок восстановлен:

Добавление инструмента выбора

До сих пор вы терпели серую палитру, но я знаю, что вы готовы к большему. Было бы здорово, если бы вы могли дать пользователям возможность выбирать свои собственные цвета? А как насчет возможности выбирать разные кисти или изменять ширину? PencilKit поможет вам.

Вы можете легко добавить палитру инструментов в свое приложение и мгновенно предоставить пользователям выбор инструментов и цветов. PKToolPicker управляет этой палитрой инструментов. Вы просто добавляете его в свою иерархию представлений и управляете его отображением.

PKToolPicker предлагает следующие инструменты для рисования:

• PKInkingTool : Инструменты для рисования линий. Вы уже видели это в действии
• PKEraserTool : Кисть для удаления частей вашего рисунка
• PKLassoTool : Инструмент для выбора частей вашего рисунка, чтобы вы могли изменить его положение
• Линейка: помогает рисовать прямые линии
• Палитра цветов: используйте ее, чтобы выбрать цвет для вашего чернильного инструмента
• Отменить/Повторить: элементы управления, используемые для отмены и повтора изменений чертежа

Настройка средства выбора инструментов

Чтобы настроить средство выбора инструментов, вы сначала связываете его с окном в интерфейсе вашего приложения. Затем вы устанавливаете представление в качестве первого ответчика для этого окна. Когда вид виден, отображается средство выбора инструментов. Когда вид не отображается, средство выбора инструментов скрыто.

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

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

Перейдите к CanvasView.swift и добавьте следующее свойство после объявления при сохранении :

@State var toolPicker = PKToolPicker()
 

Вам необходимо сохранить ссылку на экземпляр PKToolPicker , чтобы он отображался. В результате вы объявляете его как свойство @State .

Затем добавьте следующее расширение после объявления структуры :

частное расширение CanvasView {
  функция showToolPicker() {
    // 1
    toolPicker.setVisible(true, forFirstResponder: canvasView)
    // 2
    toolPicker.addObserver(canvasView)
    // 3
    canvasView.becomeFirstResponder()
  }
}
 

Вот пошаговое описание того, что происходит в определенном методе:

1. Привяжите видимость средства выбора инструментов к тому, активен ли вид холста.
2. Убедитесь, что представление холста уведомлено о любых изменениях выбранного инструмента.
3. Попросите представление холста стать первым ответившим. Это делает средство выбора инструментов видимым.

Добавьте следующее в makeUIView(context:) сразу после назначения делегата canvasView :

показатьToolPicker()
 

Это вызывает ваш новый частный метод для активации средства выбора инструментов.

Создайте и запустите приложение. Вы должны увидеть представленный инструмент выбора:

Попробуйте перемещать инструмент выбора по окну. Кроме того, попробуйте различные инструменты выбора в вашем распоряжении.

Примечание : Средство выбора инструментов имеет некоторые ограничения на iPhone. Средство выбора инструментов закреплено в нижней части окна. Кроме того, функции отмены и повтора недоступны. Вы должны реализовать эти функции самостоятельно.

Средство выбора инструментов открывает все, что вы можете сделать, но не все. Если вам нужны дополнительные настройки, рассмотрите возможность создания собственного средства выбора инструментов.

Хорошо, младший Пикассо, у тебя есть все, что нужно, чтобы практиковать свои шедевральные навыки. Идти!

Предоставлено 10-летним начинающим художником и разработчиком

Если вы довольны своей работой, поделитесь ею. Пример приложения содержит код для запуска листа общего доступа Apple. Щелкните значок общего доступа, чтобы увидеть это в действии:

Advanced PencilKit

Вы узнали, как использовать PKDrawing для очистки холста и сохранения рисунка.
Вы можете изменить PKDrawing в соответствии со своими потребностями. Например, вы можете создать рисунок на одном устройстве и отобразить его на другом с другим размером холста. Для этого можно выполнить CGAffineTransform на чертеже. Например:

пусть преобразование = CGAffineTransform (масштабX: 0,5, у: 0,5)
пусть DrawingTransformed = pkDrawing.transformed (используя: преобразование)
 

Этот код уменьшает рисунок на 50 процентов.

Вы даже можете добавить один рисунок к другому, сделав что-то вроде этого:

пусть DrawingCombined = pkDrawing1.appending(pkDrawing2)
 

Двойное нажатие на нижнюю часть Apple Pencil меняет выбранный инструмент. Попробуйте, если сможете. По умолчанию он переключается между ластиком и выбранным в данный момент инструментом. Пользователи могут перейти в «Настройки» и изменить способ работы двойного касания. Если в вашем приложении есть настраиваемая поддержка двойного касания, убедитесь, что вы не сбиваете пользователей с толку, если они привыкли к определенному поведению. Дайте им возможность подписаться на ваше индивидуальное поведение.

Apple Pencil может определять наклон, усилие и ориентацию. По умолчанию это изменяет обводку. Например, приложение большей силы приводит к более толстым линиям. Если вы настраиваете средство выбора инструментов, применяйте эти данные при рисовании штрихов. В этом учебном пособии по Apple Pencil показан пример того, как это сделать.

Еще одна вещь, о которой следует помнить, это то, что пользователи могут включить темный режим. По умолчанию цвета на холсте PencilKit настраиваются в зависимости от настроек темного режима. Подумайте о предотвращении автоматического изменения цвета для приложений, в которых пользователи рисуют поверх PDS или фотографии. Это гарантирует, что разметка остается видимой.