Compartilhar via

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

  • Artigo

Imagem principal da Caneta para Surface.
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

Observação

Apesar de o Windows Ink ter suporte para desenho com mouse e touch (mostramos como fazer isso na Etapa 3 deste tutorial), para obter uma experiência ideal com o Windows Ink, recomendamos que tenha uma caneta digital e um computador com uma tela que ofereça suporte à entrada 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
    Clonando o repositório.
  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)

Importante

A maior parte do código da amostra está comentada. Conforme avançamos em cada etapa, solicitaremos que remova marcas de comentários de várias seções do código. No Visual Studio, basta destacar as linhas de código e pressionar CTRL-K e, em seguida, CTRL-U.

Componentes da plataforma do Windows Ink

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

Componente Descrição
InkCanvas Um controle de plataforma de interface do usuário XAML que, por padrão, recebe e exibe todas as entradas de uma caneta como um traço de tinta ou um traço de apagamento.
InkPresenter Um objeto code-behind, instanciado em conjunto com um controle InkCanvas (exposto por meio da propriedade InkCanvas.InkPresenter). Esse objeto fornece toda a funcionalidade padrão de escrita à tinta exposta pelo InkCanvas, juntamente com um conjunto abrangente de APIs para personalização e customização adicionais.
InkToolbar Um controle de plataforma de interface do usuário XAML que contém uma coleção personalizável e extensível de botões que ativam recursos relacionados à tinta em um InkCanvas associado.
IInkD2DRenderer
Não abordaremos essa funcionalidade aqui. Para obter mais informações, consulte a Amostra de tinta complexa.		 Habilita a renderização de traços de tinta no contexto do dispositivo Direct2D designado de um aplicativo Universal do Windows, em vez do controle padrão InkCanvas.

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. Botão de projeto de build do Visual Studio.

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

Captura de tela do aplicativo vazio.

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.

Observação

Um InkCanvas tem propriedades padrão de Altura e Largura iguais a zero, a menos que seja filho de um elemento que dimensiona automaticamente seus elementos filhos.

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;
  1. Abra o arquivo MainPage.xaml.
  2. Procure o código marcado com o título desta etapa ("<!-- Etapa 2: escrita à tinta básica com o InkCanvas -->").
  3. 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.

Captura de tela do aplicativo Exemplo de Tinta Básica realçada neste tópico.

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.

Observação

A entrada de tinta padrão (ponta da caneta ou ponta/botão da borracha) não é modificada com uma funcionalidade de hardware secundário, como um botão da caneta, botão direito do mouse ou mecanismo semelhante.

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.

Observação

Ao especificar os tipos de dispositivos de entrada, é necessário indicar o suporte para cada tipo de entrada específico (inclusive caneta), pois a configuração dessa propriedade substitui a configuração padrão do InkCanvas.

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>

Observação

Para manter a interface do usuário e o código o mais organizados e simples possível, usamos um layout de grade básico e declaramos o InkToolbar após o InkCanvas em uma linha de grade. Caso declare antes do InkCanvas, o InkToolbar será renderizado primeiro, abaixo da tela e inacessível ao usuário.

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

Captura de tela do aplicativo Exemplo de Tinta Básica realçado neste tópico com o InkToolbar padrão.

Desafio: Adicionar um botão personalizado

Este é um exemplo de uma InkToolbar personalizada (do bloco de esboços no espaço de trabalho do Windows Ink).

Captura de tela da barra de ferramentas de tinta do bloco de desenho no espaço de trabalho de tinta.

Para obter mais detalhes sobre a personalização de uma InkToolbar, consulte Adicionar uma InkToolbar a um aplicativo do Windows de escrita à tinta.

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.

Observação

O reconhecimento de manuscrito pode ser melhorado através das configurações de Caneta e Windows Ink:

  1. Abra o menu Iniciar e selecione Configurações.
  2. Na tela Configurações, selecione Dispositivos>Caneta e Windows Ink. Captura de tela da página de configurações da Caneta e do Windows Ink.
  3. Selecione Conhecer meu manuscrito para abrir a caixa de diálogo Personalização de manuscrito. Captura de tela da caixa de diálogo Personalização de reconhecimento de manuscrito.

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" />
  1. Abra o arquivo MainPage.xaml.cs.
  2. Procure o código marcado com o título desta etapa (" Step 5: suporte ao reconhecimento de manuscrito").
  3. 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();
        }
    }
  1. Execute o aplicativo novamente, escreva algo e clique no botão Reconhecimento de texto
  2. Os resultados do reconhecimento são exibidos ao lado do botão

Desafio 1: reconhecimento internacional

O Windows Ink oferece suporte ao reconhecimento de texto para muitos dos idiomas com suporte do Windows. Cada pacote de idiomas inclui um mecanismo de reconhecimento de manuscrito que pode ser instalado com o pacote de idiomas.

Direcione para um idioma específico consultando os mecanismos de reconhecimento de manuscrito instalados.

Para obter mais detalhes sobre o reconhecimento internacional de manuscrito, consulte Reconhecer traços do Windows Ink como texto.

Desafio 2: reconhecimento dinâmico

Para este tutorial, requeremos que um botão seja pressionado para iniciar o reconhecimento. Também é possível realizar o reconhecimento dinâmico usando uma função básica de temporização.

Para obter mais detalhes sobre o reconhecimento dinâmico, consulte Reconhecer traços do Windows Ink como texto.

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" />
  1. Abra o arquivo MainPage.xaml.cs
  2. Procure o código marcado com o título desta etapa ("// Etapa 6: reconhecer formas")
  3. 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)
    {
        ...
    }
  1. 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.

Captura de tela de um fluxograma rudimentar de um guardanapo digital.

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

Captura de tela do fluxograma depois que o usuário seleciona Reconhecer 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).

Observação

A especificação ISF (Ink Serialized Format) pode ser feita por download no Centro de Download da Microsoft.

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"/>
  1. Abra o arquivo MainPage.xaml.cs.
  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.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Execute o aplicativo e desenhe algo.
  2. Selecione o botão Salvar e salve seu desenho.
  3. Apague a tinta ou reinicie o aplicativo.
  4. 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

O Windows ink também oferece suporte à cópia e à colagem de traços de tinta de e para a área de transferência.

Para obter mais detalhes sobre o uso da área de transferência com tinta, consulte Armazenar e recuperar dados de traçado do Windows Ink.

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.

Amostras