Tutorial: Suporte a tinta na sua aplicação Windows

Surface Pen (disponível para compra na Microsoft Store).

Este tutorial explica como criar uma aplicação básica para Windows que suporte escrita e desenho com Windows Ink. Utilizamos excertos de uma aplicação de exemplo, que pode descarregar do GitHub (ver Código de exemplo), para demonstrar as várias funcionalidades e APIs do Windows Ink associadas (ver Componentes da plataforma Windows Ink) discutidos em cada etapa.

Focamo-nos no seguinte:

• Adicionar suporte básico para tinta
• Adicionar uma barra de ferramentas de tinta
• Apoio ao reconhecimento da caligrafia
• Suporte ao reconhecimento básico de formas
• Guardar e carregar tinta

Para mais detalhes sobre a implementação destas funcionalidades, consulte Interações com caneta e Windows Ink nas aplicações Windows.

Introdução

Com o Windows Ink, pode oferecer aos seus clientes o equivalente digital de quase qualquer experiência imaginável com papel e caneta, desde notas rápidas e manuscritas e anotações a demonstrações em quadro branco, e desde desenhos arquitetónicos e de engenharia até obras-primas pessoais.

Pré-requisitos

• Um computador (ou uma máquina virtual) a correr a versão atual do Windows 10 ou Windows 11
• Visual Studio 2019 e o SDK RS2 ou posterior
• SDK do Windows 10 (10.0.15063.0)
• Dependendo da sua configuração, poderá ter de instalar o pacote NuGet Microsoft.NETCore.UniversalWindowsPlatform e ativar o modo Desenvolvedor nas definições do seu sistema (Definições -> Atualização e Segurança -> Para programadores -> Use funcionalidades de programador).
• Se és novo no desenvolvimento de aplicações Windows com Visual Studio, dá uma vista de olhos a estes tópicos antes de começares este tutorial:
  • Instalar ferramentas para o SDK de Aplicativos Windows
  • Crie uma aplicação "Olá, mundo" (XAML)
• [OPCIONAL] Uma caneta digital e um computador com um ecrã que suporta a entrada dessa caneta digital.

Código de exemplo

Ao longo deste tutorial, utilizamos uma aplicação de tinta de exemplo para demonstrar os conceitos e funcionalidades discutidos.

Descarregue este exemplo e o código-fonte do Visual Studio a partir do GitHub no windows-appsample-get-started-ink sample

1. Selecione o botão verde Clone ou download
   
2. Se tiveres uma conta no GitHub, podes clonar o repositório para a tua máquina local escolhendo Abrir no Visual Studio
3. Se não tiver uma conta no GitHub, ou apenas quiser uma cópia local do projeto, escolha Download ZIP (terá de voltar regularmente para descarregar as últimas atualizações)

Componentes da plataforma Windows Ink

Estes objetos fornecem a maior parte da experiência de arte-tinta para aplicações Windows.

Passo 1: Executar a amostra

Depois de descarregares a aplicação de exemplo do RadialControler, verifica se está a correr:

1. Abra o projeto de exemplo no Visual Studio.

2. Defina o menu suspenso das Plataformas de Solução para uma seleção não ARM.

3. Pressione F5 para compilar, implementar e executar.

   Observação

   Alternativamente, pode selecionar o item do menu Debug>Start debugging ou selecionar o botão Local Machine Run mostrado aqui.

A janela da aplicação abre e, após aparecer um ecrã de apresentação durante alguns segundos, verá este ecrã inicial.

Ok, agora temos a aplicação básica do Windows que vamos usar ao longo do resto deste tutorial. Nos passos seguintes, adicionamos a nossa funcionalidade de tinta.

Passo 2: Use o InkCanvas para suportar a funcionalidade básica de tinta

Talvez já tenhas reparado que a aplicação, na sua forma inicial, não te permite desenhar nada com a caneta (embora possas usar a caneta como um dispositivo de ponteiro padrão para interagir com a aplicação).

Vamos corrigir essa pequena falha neste passo.

Para adicionar funcionalidade básica de entintagem, basta colocar um controlo InkCanvas na página apropriada da sua aplicação.

No exemplo:

1. Abre o ficheiro MainPage.xaml.cs.
2. Encontre o código marcado com o título deste passo ("// Passo 2: Use o InkCanvas para suportar a tinta-tinta básica").
3. Descomentar as linhas seguintes. (Estas referências são necessárias para a funcionalidade utilizada nos passos seguintes).

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

4. Abra o ficheiro MainPage.xam.
5. Encontre o código marcado com o título desta etapa ("<-- Etapa 2: Desenho básico com InkCanvas -->").
6. Descomentar a linha seguinte.

    <InkCanvas x:Name="inkCanvas" />

É isso!

Agora volta a correr a aplicação. Avança, rabisca, escreve o teu nome ou (se estiveres a segurar um espelho ou tiveres uma memória muito boa) desenha o teu autorretrato.

Passo 3: Suporte ao uso de caneta com toque e rato

Vai reparar que, por defeito, a tinta é suportada apenas para entrada de caneta. Se tentar escrever ou desenhar com o dedo, o rato ou o touchpad, vai ficar desiludido.

Para transformar essa expressão triste numa expressão feliz, tens de adicionar uma segunda linha de código. Desta vez está no code-behind do ficheiro XAML onde foi declarado o InkCanvas.

Neste passo, apresentamos o objeto InkPresenter , que proporciona uma gestão mais detalhada da entrada, processamento e renderização da entrada de tinta (padrão e modificada) no seu InkCanvas.

Para ativar a escrita digital com rato e toque, defina a propriedade InputDeviceTypes do InkPresenter para a combinação dos valores CoreInputDeviceTypes que pretende.

No exemplo:

1. Abre o ficheiro MainPage.xaml.cs.
2. Encontre o código marcado com o título deste passo ("// Passo 3: Suporte ao desenho com o toque e o rato").
3. Descomentar as linhas seguintes.

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

Abra a aplicação novamente e verá que todos os seus sonhos de pintar com os dedos num ecrã de computador se tornaram realidade!

Passo 4: Adicionar uma barra de ferramentas de tinta

O InkToolbar é um controlo de plataforma UWP que oferece uma coleção personalizável e extensível de botões para ativar funcionalidades relacionadas com tinta.

Por defeito, o InkToolbar inclui um conjunto básico de botões que permitem aos utilizadores selecionar rapidamente entre uma caneta, um lápis, um marcador ou uma borracha, qualquer um dos quais pode ser usado em conjunto com um estêncil (régua ou transferidor). Os botões da caneta, lápis e marcador também oferecem um espaço para selecionar a cor da tinta e o tamanho do traço.

Para adicionar uma InkToolbar padrão a uma aplicação de desenho, basta colocá-la na mesma página do InkCanvas e associar os dois controlos.

No exemplo

1. Abra o ficheiro MainPage.xam.
2. Encontre o código marcado com o título deste passo ("<-- Passo 4: Adicionar uma barra de ferramentas de tinta -->").
3. Descomentar as linhas seguintes.

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

Agora abre a aplicação novamente para veres o InkToolbar e experimenta algumas das ferramentas.

Desafio: Adicionar um botão personalizado

Aqui está um exemplo de um InkToolbar personalizado (do Sketchpad no Windows Ink Workspace).

Para mais detalhes sobre como personalizar um InkToolbar, consulte Adicionar um InkToolbar a uma aplicação de entintagem de aplicações Windows.

Passo 5: Apoiar o reconhecimento da caligrafia

Agora que já sabes escrever e desenhar na tua aplicação, vamos tentar fazer algo útil com esses rabiscos.

Neste passo, usamos as funcionalidades de reconhecimento de escrita do Windows Ink para tentar decifrar o que escreveu.

No exemplo:

1. Abra o ficheiro MainPage.xam.
2. Encontre o código marcado com o título deste passo ("<-- Passo 5: Suporte ao reconhecimento de escrita à mão -->").
3. Descomentar as linhas seguintes.

    <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. Abre o ficheiro MainPage.xaml.cs.
5. Encontre o código marcado com o título deste passo ("Passo 5: Suporte ao reconhecimento de escrita manual").
6. Descomentar as linhas seguintes.

• Estas são as variáveis globais necessárias para este passo.

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

• Este é o responsável pelo botão Reconhecer texto , onde fazemos o processamento de 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. Executa a aplicação novamente, escreve algo e depois clica no botão Reconhecer texto
8. Os resultados do reconhecimento são exibidos ao lado do botão

Desafio 1: Reconhecimento internacional

O Windows Ink suporta reconhecimento de texto para muitas das linguagens suportadas pelo Windows. Cada pacote de línguas inclui um motor de reconhecimento de escrita manual que pode ser instalado com o pacote de línguas.

Direciona uma língua específica consultando os motores de reconhecimento de escrita instalados.

Para mais detalhes sobre o reconhecimento internacional de caligrafia, consulte Reconhecer traços de tinta do Windows como texto.

Desafio 2: Reconhecimento dinâmico

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

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

Passo 6: Reconhecer formas

Ok, agora podes converter as tuas notas manuscritas em algo um pouco mais legível. Mas e aqueles rabiscos trémulos e cafeinados da sua reunião matinal dos Flowcharters Anonymous?

Usando análise de tinta, a sua aplicação também pode reconhecer um conjunto de formas principais, incluindo:

• Circle
• Diamante
• Desenho
• Elipse
• Triângulo Equilátero
• Hexágono
• Triângulo Isósceles
• Paralelogramo
• Pentágono
• Quadrilátero
• Retângulo
• Triângulo Retângulo
• Quadrado
• Trapézio
• Triangle

Neste passo, usamos as funcionalidades de reconhecimento de formas do Windows Ink para tentar limpar os seus rabiscos.

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

No exemplo:

1. Abra o ficheiro MainPage.xaml
2. Encontre o código marcado com o título deste passo ("<-- Passo 6: Reconhecer formas -->")
3. Descomentar esta 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 ficheiro MainPage.xaml.cs
5. Encontre o código marcado com o título deste passo ("// Passo 6: Reconhecer formas")
6. Descomente estas linhas:

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

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

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

7. Abre a aplicação, desenha algumas formas e clica no botão Reconhecer formas

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

Aqui está o mesmo fluxograma depois do reconhecimento de formas.

Passo 7: Guardar e carregar tinta

Então, já acabaste de rabiscar e gostas do que vês, mas achas que talvez queiras ajustar algumas coisas mais tarde? Pode guardar os seus traços de tinta num ficheiro Ink Serialized Format (ISF) e carregá-los para edição sempre que lhe surgir a inspiração.

O ficheiro ISF é uma imagem GIF básica que inclui metadados adicionais que descrevem propriedades e comportamentos dos traços de tinta. As aplicações que não têm tinta ativada podem ignorar os metadados extra e ainda assim carregar a imagem GIF básica (incluindo transparência de fundo em canal alfa).

Neste passo, ligamos os botões de Guardar e Carregar localizados ao lado da barra de ferramentas de tinta.

No exemplo:

1. Abra o ficheiro MainPage.xam.
2. Encontre o código marcado com o título desta etapa ("<-- Passo 7: Guardar e carregar tinta -->").
3. Descomentar as linhas seguintes.

    <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. Abre o ficheiro MainPage.xaml.cs.
5. Encontre o código marcado com o título deste passo ("// Passo 7: Guardar e carregar tinta").
6. Descomentar as linhas seguintes.

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

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

7. Abre a aplicação e desenha alguma coisa.
8. Seleciona o botão Guardar e guarda o teu desenho.
9. Apaga a tinta ou reinicia a aplicação.
10. Seleciona o botão Carregar e abre o ficheiro de tinta que acabaste de guardar.

Desafio: Usa a prancheta para copiar e colar traços de tinta

O Windows Ink também suporta copiar e colar traços de tinta para e a partir da área de transferência.

Para mais detalhes sobre o uso da prancheta com tinta, consulte Armazenar e recuperar dados de traços do Windows Ink.

Resumo

Parabéns, completaste o tutorial Input: Support ink in your Windows app! Mostrámos-lhe o código básico necessário para suportar tinta nas suas aplicações Windows e como proporcionar algumas das experiências de utilizador mais ricas suportadas pela plataforma Windows Ink.

Artigos relacionados

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

Samples

• Amostra de análise de tinta (básica) (C#)
• Amostra de reconhecimento de escrita manual com tinta (C#)
• Guardar e carregar traços de tinta a partir de um ficheiro no formato Ink Serialized Format (ISF)
• Guardar e carregar traços de tinta a partir da prancheta
• Exemplo de posicionamento e orientação da barra de tinta (exemplo básico)
• Amostra de localização e orientação da barra de ferramentas de tinta (dinâmica)
• Amostra de tinta simples (C#/C++)
• Amostra complexa de tinta (C++)
• Amostra de tinta (JavaScript)
• Tutorial de Iniciação: Suporte à tinta digital na sua aplicação Windows
• Amostra de livro de colorir
• Amostra de notas familiares