-
Conheça o PaperKit
Descubra como incluir o PaperKit em seus apps para iOS, iPadOS, macOS e visionOS. Abordaremos como integrar perfeitamente os recursos de desenho e marcação do PencilKit, como formas e imagens, e como personalizar a interface de usuário. Conheça as melhores práticas para garantir compatibilidade futura e descubra opções avançadas de personalização para criar experiências de marcação verdadeiramente únicas em seus apps.
Capítulos
- 0:00 - Introdução
- 1:36 - Conhecer o PaperKit
- 3:35 - Começar a usar o PaperKit
- 8:37 - Personalizar o conjunto de recursos
Recursos
Vídeos relacionados
WWDC24
WWDC20
-
Buscar neste vídeo...
-
-
3:47 - Adopt PaperKit in iOS
// Adopt PaperKit in iOS override func viewDidLoad() { super.viewDidLoad() let markupModel = PaperMarkup(bounds: view.bounds) let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest) view.addSubview(paperViewController.view) addChild(paperViewController) paperViewController.didMove(toParent: self) becomeFirstResponder() let toolPicker = PKToolPicker() toolPicker.addObserver(paperViewController) pencilKitResponderState.activeToolPicker = toolPicker pencilKitResponderState.toolPickerVisibility = .visible toolPicker.accessoryItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(plusButtonPressed(_:))) } @objc func plusButtonPressed(_ button: UIBarButtonItem) { let markupEditViewController = MarkupEditViewController(supportedFeatureSet: .latest) markupEditViewController.delegate = paperViewController markupEditViewController.modalPresentationStyle = .popover markupEditViewController.popoverPresentationController?.barButtonItem = button present(markupEditViewController, animated: true) } -
6:11 - Adopt PaperKit in macOS
// Adopt PaperKit in macOS override func viewDidLoad() { super.viewDidLoad() let markupModel = PaperMarkup(bounds: view.bounds) let paperViewController = PaperMarkupViewController(markup: markupModel, supportedFeatureSet: .latest) view.addSubview(paperViewController.view) addChild(paperViewController) // Create toolbar for macOS let toolbarViewController = MarkupToolbarViewController(supportedFeatureSet: .latest) toolbarViewController.delegate = paperViewController view.addSubview(toolbarViewController.view) // Set layout setupLayoutConstraints() } -
7:18 - Auto-save markup changes
// Auto-save markup changes func paperMarkupViewControllerDidChangeMarkup(_ paperMarkupViewController: PaperMarkupViewController) { let markupModel = paperMarkupViewController.markup Task { // Create a data blob and save it let data = try await markupModel.dataRepresentation() try data.write(toFile: paperKitDataURL) } } -
8:02 - Thumbnail for forward compatibility
// Thumbnail for forward compatibility func updateThumbnail(_ markupModel: PaperMarkup) async throws { // Set up CGContext to render thumbnail in let thumbnailSize = CGSize(width: 200, height: 200) let context = makeCGContext(size: thumbnailSize) context.setFillColor(gray: 1, alpha: 1) context.fill(renderer.format.bounds) // Render the PaperKit markup await markupModel.draw(in: context, frame: CGRect(origin: .zero, size: thumbnailSize)) thumbnail = context.makeImage() } -
9:02 - Customized markup FeatureSet
// Customized markup FeatureSet var featureSet: FeatureSet = .latest featureSet.remove(.text) featureSet.insert(.stickers) // HDR support featureSet.colorMaximumLinearExposure = 4 toolPicker.colorMaximumLinearExposure = 4 let paperViewController = PaperMarkupViewController(supportedFeatureSet: featureSet) let markupEditViewController = MarkupEditViewController(supportedFeatureSet: featureSet) -
10:50 - Custom background on markup controller
// Custom background on markup controller let template = UIImage(named: "MyTemplate.jpg") let templateView = UIImageView(image: template) paperViewController.contentView = templateView
-
-
- 0:00 - Introdução
Com o PaperKit, crie experiências ricas de marcação em diversos apps para iOS e macOS, incluindo Notas, Capturas de Tela, QuickLook e o app Diário. O framework oferece uma tela para desenhar e adicionar formas, imagens, campos de texto e muito mais. O PaperKit simplifica a integração da funcionalidade de marcação em qualquer app, proporcionando uma experiência fluida.
- 1:36 - Conhecer o PaperKit
O app de exemplo é uma ferramenta de gerenciamento de receitas que permite criar, atualizar e anotar receitas usando marcação. O app inclui um controlador de marcação, um contêiner de modelo de dados e um menu de inserção ou barra de ferramentas para facilitar as anotações. A demonstração destaca esses recursos adicionando uma imagem, destacando ingredientes e avaliando uma receita de biscoitos tradicionais.
- 3:35 - Começar a usar o PaperKit
Para integrar o PaperKit a um app iOS, crie a subclasse 'UIViewController' e inicialize um contêiner e um controlador de modelo de dados de marcação. Configure o seletor de ferramentas do PencilKit e o controlador do menu de inserção para exibição como popover quando acionado por um botão acessório. Você também pode integrar o PaperKit em um ambiente SwiftUI. O controlador de marcação inclui um delegado para tratamento de callbacks e implementa 'Observable' para gerenciamento de estado. Ao carregar dados do disco, verifique a compatibilidade de encaminhamento na versão do conteúdo. O PaperKit fornece ferramentas para gerar miniaturas para pré-renderização, em caso de incompatibilidade de versão.
- 8:37 - Personalizar o conjunto de recursos
O 'FeatureSet' do PaperKit define a funcionalidade de marcação disponível em um app. Comece com 'FeatureSet.latest' para incluir todos os recursos mais recentes. Para personalizar o app, remova ou insira ferramentas e interações usando as funções fornecidas. Para ativar o suporte a HDR, defina 'colorMaximumLinearExposure' com um valor maior que 1, o que será mapeado por tom para a capacidade de HDR compatível pelo dispositivo. Fazer isso melhora a qualidade visual da marcação ao usar novas ferramentas como a caneta de caligrafia tipo "reed" lançada no PencilKit. Personalize a 'contentView' do controlador de marcação para exibir qualquer 'UIView', como um modelo, oferecendo um fundo consistente para marcações e desenhos.