Tutorial: dar suporte a escrever à tinta no aplicativo do Windows

Caneta Surface (disponível para aquisição na Microsoft Store).

Este tutorial mostra as etapas para criar um aplicativo básico do Windows que dá suporte para a escrita e o desenho com o Windows Ink. Vamos usar trechos de um aplicativo de amostra, que pode ser feito o download no GitHub (consulte código de exemplo), para demonstrar os vários recursos e as APIs do Windows Ink associadas (consulte Componentes da plataforma Windows Ink) discutidos em cada etapa.

Nosso foco é o seguinte:

• Adição de suporte básico para entrada à tinta
• Adição de uma barra de ferramentas à tinta
• Suporte ao reconhecimento de manuscrito
• Suporte ao reconhecimento básico de formas
• Poupança e carregamento de tinta

Para obter mais detalhes sobre a implementação desses recursos, consulte Interações com caneta e Windows Ink em aplicativos do Windows.

Introdução

Com o Windows Ink, é possível proporcionar aos seus clientes o equivalente digital de quase todas as experiências imagináveis com caneta e papel, desde notas e anotações rápidas e manuscritas até demonstrações em quadros brancos e desenhos arquitetônicos e de engenharia até obras de arte pessoais.

Pré-requisitos

• Um computador (ou uma máquina virtual) que esteja executando a versão atual do Windows 10 ou do Windows 11
• Visual Studio 2019 e o RS2 SDK ou mais recente
• SDK do Windows 10 (10.0.15063.0)
• De acordo com sua configuração, talvez seja necessário instalar o pacote NuGet do Microsoft.NETCore.UniversalWindowsPlatform e habilitar o modo do desenvolvedor nas configurações de sistema (Configurações > - Atualização e segurança - > Para desenvolvedores - > Usar recursos de desenvolvedor).
• Caso seja iniciante no desenvolvimento de aplicativo do Windows com o Visual Studio, confira estes tópicos antes de iniciar este tutorial:
  • Instalar ferramentas para o SDK do Aplicativo Windows
  • Criar um aplicativo "Olá, Mundo!" (XAML)
• (OPCIONAL) Uma caneta digital e um computador com uma tela com suporte para entrada de dados dessa caneta digital.

Código de exemplo

Ao longo deste tutorial, vamos usar um aplicativo de tinta de amostra para demonstrar os conceitos e a funcionalidade discutidos.

Faça o download dessa amostra do Visual Studio e do código-fonte do GitHub em amostra windows-appsample-get-started-ink:

1. Selecione o botão verde Clonar ou download
   
2. Caso tenha uma conta no GitHub, será possível clonar o repositório em seu computador local selecionando Abrir no Visual Studio
3. Caso não tenha uma conta no GitHub ou queira apenas uma cópia local do projeto, escolha Download ZIP ( será necessário verificar regularmente para baixar as atualizações mais recentes)

Componentes da plataforma do Windows Ink

Esses objetos fornecem a maior parte da experiência de escrita à tinta para aplicativos do Windows.

Etapa 1: Executar o exemplo

Após fazer o download do aplicativo de amostra RadialController, verifique se ele é executado:

1. Abra o projeto de amostra no Visual Studio.

2. Defina o menu suspenso Plataformas de solução para uma seleção que não seja Arm.

3. Pressione F5 para compilar, implantar e executar.

   Observação

   Como alternativa, você pode selecionar o item de menu Depurar>Iniciar depuração ou selecionar o botão Computador local Executar mostrado aqui.

A janela do aplicativo abre e, após uma tela inicial aparecer por alguns segundos, você verá esta tela inicial.

Pronto, agora temos o aplicativo básico do Windows que usaremos no restante deste tutorial. Nas etapas a seguir, adicionaremos nossa funcionalidade de tinta.

Etapa 2: uso do InkCanvas para dar suporte para a escrita à tinta básica

Talvez já tenha percebido que o aplicativo, em sua forma inicial, não permite que se desenhe nada com a caneta (embora seja possível usar a caneta como um dispositivo de ponteiro padrão para interagir com o aplicativo).

Corrigiremos essa pequena falha nesta etapa.

Para adicionar a funcionalidade básica de escrita à tinta, basta colocar um controle InkCanvas na página adequada do seu aplicativo.

Na amostra:

1. Abra o arquivo MainPage.xaml.cs.
2. Procure o código marcado com o título desta etapa ("// Etapa 2: uso do InkCanvas para dar suporte para a escrita à tinta básica").
3. Remova o comentário das seguintes linhas. (Essas referências são requeridas para a funcionalidade usada nas etapas subsequentes).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. Abra o arquivo MainPage.xaml.
5. Procure o código marcado com o título desta etapa ("<!-- Etapa 2: escrita à tinta básica com o InkCanvas -->").
6. Remova marca de comentário da linha a seguir:

    <InkCanvas x:Name="inkCanvas" />

É isso!

Agora, execute o aplicativo novamente. Vá em frente e rabisque, escreva seu nome ou ( caso esteja segurando um espelho ou tenha uma memória muito boa) desenhe seu autorretrato.

Etapa 3: suporte à escrita à tinta com touch e mouse

Observe que, por padrão, a tinta tem suporte apenas para entrada à caneta. Caso tente escrever ou desenhar com o dedo do meio, o mouse ou o touchpad, vai se decepcionar.

Para virar essa expressão negativa ao contrário, é necessário adicionar uma segunda linha de código. Agora, ele está no code-behind do arquivo XAML no qual foi declarado seu InkCanvas.

Nesta etapa, apresentaremos o objeto InkPresenter, que fornece um gerenciamento mais refinado da entrada, do processamento e da renderização da entrada de tinta (padrão e modificada) em seu InkCanvas.

Para habilitar a escrita à tinta com mouse e touch, defina a propriedade InputDeviceTypes do InkPresenter como a combinação de valores CoreInputDeviceTypes que deseja.

Na amostra:

1. Abra o arquivo MainPage.xaml.cs.
2. Procure o código marcado com o título desta etapa ("// Etapa 3: suporte à escrita à tinta com toque e mouse").
3. Remova o comentário das seguintes linhas.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Execute o aplicativo novamente e veja que o seu sonho de pintar com os dedos em uma tela de computador se tornou realidade.

Etapa 4: adicionar uma barra de ferramentas de tinta

O InkToolbar é um controle da plataforma UWP que fornece uma coleção personalizável e extensível de botões para ativar recursos relacionados à tinta.

Por padrão, o InkToolbar inclui um conjunto básico de botões que permite que os usuários selecionem rapidamente entre uma caneta, um lápis, um marca-texto ou uma borracha, qualquer um dos quais pode ser usado juntamente com um estêncil (régua ou transferidor). Os botões de caneta, lápis e marca-texto também oferecem um menu suspenso para selecionar a cor da tinta e o tamanho do traço.

Para adicionar um InkToolbar padrão a um aplicativo de escrita à tinta, coloque-o na mesma página que o InkCanvas e associe os dois controles.

Na amostra

1. Abra o arquivo MainPage.xaml.
2. Procure o código marcado com o título desta etapa ("<!-- Etapa 4: Adicionar uma barra de ferramentas de tinta -->").
3. Remova o comentário das seguintes linhas.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Agora, execute o aplicativo novamente para ver a InkToolbar e experimentar algumas das ferramentas.

Desafio: Adicionar um botão personalizado

Etapa 5: suporte ao reconhecimento de manuscrito

Agora que é possível escrever e desenhar em seu aplicativo, vamos tentar fazer algo útil com esses rabiscos.

Nesta etapa, usaremos os recursos de reconhecimento de escrita manual do Windows Ink para tentar decifrar o que você escreveu.

Na amostra:

1. Abra o arquivo MainPage.xaml.
2. Procure o código marcado com o título desta etapa ("<!-- Etapa 5: Suporte ao reconhecimento de manuscrito -->").
3. Remova o comentário das seguintes linhas.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. Abra o arquivo MainPage.xaml.cs.
5. Procure o código marcado com o título desta etapa (" Step 5: suporte ao reconhecimento de manuscrito").
6. Remova o comentário das seguintes linhas.

• Essas são as variáveis globais requeridas para esta etapa.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• Esse é o manipulador do botão Reconhecimento de texto, no qual fazemos o processamento do reconhecimento.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. Execute o aplicativo novamente, escreva algo e clique no botão Reconhecimento de texto
8. Os resultados do reconhecimento são exibidos ao lado do botão

Desafio 1: reconhecimento internacional

Desafio 2: reconhecimento dinâmico

Etapa 6: reconhecer formas

Pronto, agora é possível converter suas anotações manuscritas em algo um pouco mais legível. Mas e aqueles esboços trêmulos e cafeinados da reunião matinal dos fluxogramas anônimos?

Com a análise de tinta, seu aplicativo também pode reconhecer um conjunto de formas principais, incluindo:

• Círculo
• Diamond
• Desenho
• Elipse
• Triângulo Equilateral
• Hexágono
• Triângulo Isósceles
• Parallelogram
• Pentagon
• Quadrilátero
• Retângulo
• Triângulo retângulo
• Quadrado
• Trapezoid
• Triângulo

Nesta etapa, usamos os recursos de reconhecimento de forma do Windows Ink para tentar limpar seus esboços.

Neste exemplo, não tentamos redesenhar os traços de tinta (embora isso seja possível). Em vez disso, adicionamos uma tela padrão sob o InkCanvas, onde desenhamos objetos elipse ou polígono equivalentes derivados da tinta original. Em seguida, excluímos os traços de tinta correspondentes.

Na amostra:

1. Abra o arquivo MainPage.xaml
2. Procure o código marcado com o título desta etapa ("<!-- Etapa 6: reconhecer formas -->")
3. Remova marca de comentário desta linha.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. Abra o arquivo MainPage.xaml.cs
5. Procure o código marcado com o título desta etapa ("// Etapa 6: reconhecer formas")
6. Remova marca de comentário das linhas:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. Execute o aplicativo, desenhe algumas formas e clique no botão Reconhecer forma

Aqui está um exemplo de um fluxograma rudimentar de um guardanapo digital.

Aqui está o mesmo fluxograma após o reconhecimento de forma.

Etapa 7: salvar e carregar tinta

Então, acabou de fazer os esboços e gostou dos resultados, mas acha que pode querer ajustar algumas coisas depois? É possível salvar seus traços de tinta em um arquivo formato ISF (Ink Serialized Format) e carregar esses traços para edição sempre que houver inspiração.

O arquivo ISF é uma imagem GIF básica que inclui metadados adicionais que descrevem as propriedades e os comportamentos do traço de tinta. Os aplicativos que não estão habilitados para tinta podem ignorar os metadados extras e ainda carregar a imagem GIF básica (incluindo a transparência de tela de fundo do canal alfa).

Nesta etapa, conectamos os botões Salvar e Carregar localizados ao lado da barra de ferramentas de tinta.

Na amostra:

1. Abra o arquivo MainPage.xaml.
2. Procure o código marcado com o título desta etapa ("<!-- Etapa 7: salvar e carregar tinta -->").
3. Remova o comentário das seguintes linhas.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. Abra o arquivo MainPage.xaml.cs.
5. Procure o código marcado com o título desta etapa ("// Etapa 7: salvar e carregar tinta").
6. Remova o comentário das seguintes linhas.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Execute o aplicativo e desenhe algo.
8. Selecione o botão Salvar e salve seu desenho.
9. Apague a tinta ou reinicie o aplicativo.
10. Selecione o botão Carregar e abra o arquivo de tinta que acabou de salvar.

Desafio: usar a área de transferência para copiar e colar traços de tinta

Resumo

Parabéns, você concluiu o tutorial de entrada: dar suporte a escrever à tinta no aplicativo do Windows. Mostramos o código básico necessário para oferecer suporte à tinta em seus aplicativos do Windows e como fornecer algumas das experiências do usuário mais avançadas com suporte da plataforma Windows Ink.

Artigos relacionados

• Interações com caneta e Windows Ink em aplicativos do Windows

Amostras

• Exemplo de análise de tinta (básico) (C#)
• Exemplo de reconhecimento de manuscrito à tinta (C#)
• Salvar e carregar traços de tinta de um arquivo ISF (Ink Serialized Format)
• Salvar e carregar traços de tinta da área de transferência
• Amostra de localização e orientação da barra de ferramentas de tinta (básico)
• Amostra de localização e orientação da barra de ferramentas de tinta (dinâmico)
• Exemplo de tinta simples (C#/C++)
• Exemplo de tinta complexa (C++)
• Amostra de tinta (JavaScript)
• Tutorial de introdução: dar suporte a escrever à tinta no aplicativo do Windows
• Exemplo de livro de colorir
• Exemplo de anotações de família