Partilhar via

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

Imagem de herói da Surface Pen.
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

Observação

Embora o Windows Ink permita desenhar com rato e toque (mostramos como fazer isto no Passo 3 deste tutorial) para uma experiência ótima com o Windows Ink, recomendamos que tenha uma caneta digital e um computador com um ecrã que suporte 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
    Clonar o repositório.
  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)

Importante

A maior parte do código no exemplo é comentada. À medida que avançamos em cada etapa, ser-se-á pedido que descomente várias secções do código. No Visual Studio, basta destacar as linhas de código, pressionar CTRL-K e depois CTRL-U.

Componentes da plataforma Windows Ink

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

Componente Description
InkCanvas Um controlo de plataforma de interface XAML que, por defeito, recebe e exibe toda a entrada de uma caneta como um traço de tinta ou um traço de apagamento.
InkPresenter Um objeto code-behind, instanciado junto com um controlador InkCanvas (exposto através da propriedade InkCanvas.InkPresenter). Este objeto fornece toda a funcionalidade padrão de tinta exposta pelo InkCanvas, juntamente com um conjunto abrangente de APIs para customização e personalização adicionais.
InkToolbar Um controlo de plataforma de interface XAML, contendo uma coleção personalizável e extensível de botões que ativam funcionalidades relacionadas com tinta num InkCanvas associado.
IInkD2DRenderer
Não abordamos esta funcionalidade aqui, para mais informações, consulte a amostra de tinta Complexa.		 Permite a renderização dos traços de tinta no contexto de dispositivo Direct2D de uma aplicação Universal Windows, em vez do controlo InkCanvas padrão.

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

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

Captura de ecrã da aplicação vazia.

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.

Observação

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

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;
  1. Abra o ficheiro MainPage.xam.
  2. Encontre o código marcado com o título desta etapa ("<-- Etapa 2: Desenho básico com InkCanvas -->").
  3. 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.

Captura de ecrã da aplicação Basic Ink Sample destacada neste tópico.

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.

Observação

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

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!

Observação

Ao especificar os tipos de dispositivos de entrada, deve indicar suporte para cada tipo de entrada específico (incluindo caneta), porque definir esta propriedade sobrepõe-se à definição padrão do InkCanvas .

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>

Observação

Para manter a interface e o código o mais simples e despojado possível, usamos um layout básico de grelha e declaramos a InkToolbar depois do InkCanvas numa linha de grelha. Se a declarares antes do InkCanvas, a InkToolbar é renderizada primeiro, abaixo da tela e inacessível ao utilizador.

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

Captura de ecrã da aplicação Basic Ink Sample destacada neste tópico com a InkToolbar predefinida.

Desafio: Adicionar um botão personalizado

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

Captura de ecrã da barra de ferramentas Ink do Sketchpad no espaço de trabalho Ink.

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.

Observação

O reconhecimento de escrita manual pode ser melhorado através das definições do Pen & Windows Ink :

  1. Abra o menu Iniciar e selecione Definições.
  2. No ecrã de Definições, selecione Dispositivos>Caneta e Tinta do Windows. Captura de ecrã da página de definições do Pen & Windows Ink.
  3. Selecione Conhecer a minha caligrafia para abrir o diálogo de Personalização da Caligrafia . Captura de ecrã da caixa de diálogo de Personalização de Reconhecimento de Escrita Manual.

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" />
  1. Abre o ficheiro MainPage.xaml.cs.
  2. Encontre o código marcado com o título deste passo ("Passo 5: Suporte ao reconhecimento de escrita manual").
  3. 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();
        }
    }
  1. Executa a aplicação novamente, escreve algo e depois clica no botão Reconhecer texto
  2. 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" />
  1. Abra o ficheiro MainPage.xaml.cs
  2. Encontre o código marcado com o título deste passo ("// Passo 6: Reconhecer formas")
  3. Descomente estas linhas:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. 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.

Captura de ecrã de um fluxograma rudimentar de um guardanapo digital.

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

Captura de ecrã do fluxograma após o utilizador selecionar Reconhecer forma.

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).

Observação

A Especificação Ink Serialized Format (ISF) pode ser descarregada no Microsoft Download Center.

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"/>
  1. Abre o ficheiro MainPage.xaml.cs.
  2. Encontre o código marcado com o título deste passo ("// Passo 7: Guardar e carregar tinta").
  3. Descomentar as linhas seguintes.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Abre a aplicação e desenha alguma coisa.
  2. Seleciona o botão Guardar e guarda o teu desenho.
  3. Apaga a tinta ou reinicia a aplicação.
  4. 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.

Samples

  • Last updated on