Condividi tramite

Esercitazione: Supporto dell'inchiostro nell'app per Windows

immagine principale della Surface Pen.
Surface Pen (disponibile per l'acquisto presso il Microsoft Store).

Questa esercitazione illustra come creare un'app di Windows di base che supporta la scrittura e il disegno con Windows Ink. Usiamo frammenti di codice da un'app di esempio, che puoi scaricare da GitHub (vedi codice di esempio), per illustrare le varie funzionalità e le API Windows Ink associate (vedi Componenti della piattaforma Windows Ink) illustrati in ogni passaggio.

Ci concentriamo sui seguenti aspetti:

  • Aggiunta del supporto penna di base
  • Aggiunta di una barra degli strumenti inchiostro
  • Supporto per il riconoscimento della grafia
  • Supporto del riconoscimento delle forme di base
  • Salvataggio e caricamento dell'inchiostro

Per ulteriori dettagli sull'implementazione di queste funzionalità, consulta Pen interactions e Windows Ink nelle app di Windows.

Introduzione

Con Windows Ink, puoi fornire ai tuoi clienti l'equivalente digitale di quasi qualsiasi esperienza di penna e carta immaginabile, da note rapide, scritte a mano e annotazioni alle demo della lavagna, e dai disegni architettura e ingegneria ai capolavori personali.

Prerequisiti

Annotazioni

Anche se Windows Ink può supportare il disegno con un mouse e un tocco (mostriamo come eseguire questa operazione nel passaggio 3 di questa esercitazione) per un'esperienza ottimale di Windows Ink, ti consigliamo di avere una penna digitale e un computer con un display che supporta l'input da tale penna digitale.

Esempio di codice

In questa esercitazione viene usata un'app per l'inchiostro di esempio per illustrare i concetti e le funzionalità discusse.

Scaricare questo esempio di Visual Studio e il codice sorgente da GitHub all'indirizzo esempio windows-appsample-get-started-ink:

  1. Selezionare il pulsante verde Clona o Scarica
    Clonare il repository.
  2. Se si ha un account GitHub, è possibile clonare il repository nel computer locale scegliendo Apri in Visual Studio
  3. Se non si ha un account GitHub o si vuole semplicemente una copia locale del progetto, scegliere Download ZIP (sarà necessario controllare regolarmente per scaricare gli aggiornamenti più recenti)

Importante

La maggior parte del codice nell'esempio è commentato. Durante l'esecuzione di ogni passaggio, verrà chiesto di rimuovere il commento da varie sezioni del codice. In Visual Studio è sufficiente evidenziare le righe di codice e premere CTRL-K e quindi CTRL-U.

Componenti della piattaforma Windows Ink

Questi oggetti forniscono la maggior parte dell'esperienza di scrittura a mano per le app di Windows.

Componente Descrizione
InkCanvas Controllo della piattaforma XAML UI che, per impostazione predefinita, riceve e visualizza tutti gli input da una penna come tratto d'inchiostro o tratto di cancellazione.
InkPresenter Oggetto di code-behind istanziato insieme a un controllo InkCanvas (esposto tramite la proprietà InkCanvas.InkPresenter). Questo oggetto fornisce tutte le funzionalità di inchiostrazione predefinite esposte dal InkCanvas, insieme a un set completo di API per ulteriori personalizzazioni.
Barra degli strumenti di inchiostro Controllo dell'interfaccia utente XAML della piattaforma contenente una raccolta personalizzabile ed estensibile di pulsanti che attivano funzionalità relative all'inchiostro in un InkCanvas associato .
IInkD2DRenderer
Questa funzionalità non viene illustrata qui. Per ulteriori informazioni, vedere l'esempio di inchiostro complesso .		 Abilita il rendering dei tratti di inchiostro sul contesto di dispositivo Direct2D designato di un'app Universal Windows, invece del controllo InkCanvas predefinito .

Passaggio 1: Eseguire l'esempio

Dopo aver scaricato l'app di esempio RadialController, verificare che funzioni correttamente.

  1. Aprire il progetto di esempio in Visual Studio.

  2. Impostare l'elenco a discesa Piattaforme di soluzione su una selezione diversa da Arm.

  3. Premere F5 per compilare, distribuire ed eseguire.

    Annotazioni

    In alternativa, è possibile selezionare Debug>Avvia debugging voce di menu oppure selezionare il pulsante Macchina locale Esegui illustrato di seguito. pulsante Compila progetto di Visual Studio.

Si apre la finestra dell'app e, dopo che appare una schermata iniziale per alcuni secondi, vedrai questa schermata iniziale.

Screenshot dell'app vuota.

Ok, ora abbiamo l'app di Base di Windows che verrà usata in tutto il resto di questa esercitazione. Nei passaggi seguenti si aggiunge la funzionalità di inchiostro.

Passaggio 2: Usare InkCanvas per supportare l'inchiostratura di base.

Probabilmente hai già notato che l'app, nel formato iniziale, non ti permette di disegnare nulla con la penna (anche se puoi usare la penna come dispositivo puntatore standard per interagire con l'app).

Risolviamo quella piccola mancanza in questo passaggio.

Per aggiungere funzionalità di inchiostrazione di base, basta posizionare un controllo InkCanvas nella pagina appropriata dell'app.

Annotazioni

InkCanvas ha le proprietà predefinite Height e Width di zero, a meno che non sia figlio di un elemento che ridimensiona automaticamente gli elementi figlio.

Nell'esempio:

  1. Aprire il file MainPage.xaml.cs.
  2. Trova il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 2: Usare InkCanvas per supportare l'inchiostrazione di base").
  3. Rimuovere il commento dalle righe seguenti. Questi riferimenti sono necessari per la funzionalità usata nei passaggi successivi.
    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;
  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo passo ("<!-- Passo 2: Uso di base dell'InkCanvas -->").
  3. Rimuovere il commento dalla riga seguente.
    <InkCanvas x:Name="inkCanvas" />

Questo è tutto!

Eseguire di nuovo l'app. Vai avanti e scarabocchia, scrivi il tuo nome o (se stai tenendo uno specchio o hai una buona memoria) disegna il tuo autoritratto.

Screenshot dell'app di esempio inchiostro base evidenziata in questo argomento.

Supporto per la scrittura digitale con il tocco e il mouse

Noterai che, per impostazione predefinita, l'inchiostro è supportato solo per l'input penna. Se cerchi di scrivere o disegnare con il dito, il mouse o il touchpad, sarai deluso.

Per trasformare tale faccia a testa in giù, è necessario aggiungere una seconda riga di codice. Questa volta si trova nel code-behind per il file XAML in cui hai dichiarato InkCanvas.

In questo passaggio vengono introdotti l'oggetto InkPresenter, che fornisce una gestione più dettagliata dell'input, dell'elaborazione e del rendering dell'input dell'inchiostro (standard e modificato) sul InkCanvas.

Annotazioni

L'input della penna standard (punta della penna o punta/pulsante della gomma) non viene modificato con una funzionalità hardware secondaria, come un pulsante sul fusto della penna, un pulsante destro del mouse o un meccanismo simile.

Per abilitare l'input penna tramite mouse e tocco, impostare la proprietà InputDeviceTypes dell' InkPresenter sulla combinazione di CoreInputDeviceTypes valori desiderati.

Nell'esempio:

  1. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice indicato dal titolo di questo passaggio ("// Passaggio 3: Supporto della scrittura con penna digitale, tocco e mouse").
  3. Rimuovere il commento dalle righe seguenti.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Esegui di nuovo l'app e scoprirai che tutti i tuoi sogni di pittura con le dita sullo schermo del computer sono diventati realtà!

Annotazioni

Quando si specificano tipi di dispositivo di input, è necessario indicare il supporto per ogni tipo di input specifico (inclusa la penna), perché l'impostazione di questa proprietà sostituisce l'impostazione predefinita InkCanvas .

Passaggio 4: Aggiungere una barra degli strumenti per l'inchiostro

Il InkToolbar è un controllo della piattaforma UWP che fornisce una raccolta personalizzabile ed estendibile di pulsanti per attivare le funzioni legate all'inchiostro.

Per impostazione predefinita, il InkToolbar include un set di pulsanti di base che consente agli utenti di selezionare rapidamente tra una penna, una matita, un evidenziatore o una gomma, una qualsiasi delle quali può essere usata insieme a uno stencil (righello o protrattore). I pulsanti penna, matita, ed evidenziatore forniscono anche un riquadro a comparsa per la selezione del colore dell'inchiostro e dello spessore del tratto.

Per aggiungere un predefinito InkToolbar a un'app di disegno, posizionarlo nella stessa pagina del InkCanvas e collegare i due controlli.

Nell'esempio

  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo step ("<!-- Passaggio 4: Aggiungere una barra degli strumenti dell'inchiostro -->").
  3. Rimuovere il commento dalle righe seguenti.
    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Annotazioni

Per mantenere l'interfaccia utente e il codice il più semplici possibile, usiamo un layout a griglia di base e dichiariamo il InkToolbar dopo il InkCanvas in una riga della griglia. Se la dichiari prima del InkCanvas, il InkToolbar viene eseguito per primo, sotto l'InkCanvas e inaccessibile all'utente.

Eseguire di nuovo l'app per visualizzare InkToolbar e provare alcuni degli strumenti.

Screenshot dell'applicazione di esempio Basic Ink evidenziata in questo argomento con l'InkToolbar predefinito.

Sfida: Aggiungere un pulsante personalizzato

Di seguito è riportato un esempio di personalizzata InkToolbar (da Sketchpad nell'area di lavoro di Windows Ink).

Screenshot della barra degli strumenti dell'inchiostro di Sketchpad nell'area di lavoro dell'inchiostro.

Per altri dettagli sulla personalizzazione di un InkToolbar, vedere Aggiungere un controllo InkToolbar a un'app di inking di Windows.

Passaggio 5: Supportare il riconoscimento della grafia

Ora che puoi scrivere e disegnare nella tua app, proviamo a fare qualcosa di utile con questi scarabocchi.

In questo passaggio si usano le funzionalità di riconoscimento della grafia di Windows Ink per provare a decifrare ciò che è stato scritto.

Annotazioni

Il riconoscimento della grafia può essere migliorato attraverso le impostazioni Penna e Windows Ink

  1. Aprire il menu Start e selezionare Impostazioni.
  2. Nella schermata Impostazioni selezionare Dispositivi>Penna e Windows Ink. Screenshot della pagina Impostazioni Penna e Windows Ink.
  3. Selezionare Conosci la mia scrittura per aprire la finestra di dialogo Personalizzazione della scrittura. Screenshot della finestra di dialogo Personalizzazione del riconoscimento della grafia.

Nell'esempio:

  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 5: Supporto del riconoscimento della grafia -->").
  3. Rimuovere il commento dalle righe seguenti.
    <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. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio (" Passaggio 5: Supporto del riconoscimento della grafia").
  3. Rimuovere il commento dalle righe seguenti.
  • Queste sono le variabili globali necessarie per questo passaggio.
    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;
  • Questo è il gestore per il pulsante Riconoscimento del testo, in cui viene eseguita l'elaborazione del riconoscimento.
    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. Riavvia l'app, scrivi qualcosa e poi fai clic sul pulsante Riconosci testo
  2. I risultati del riconoscimento vengono visualizzati accanto al pulsante

Sfida 1: Riconoscimento internazionale

Windows Ink supporta il riconoscimento del testo per molte delle lingue supportate da Windows. Ogni Language Pack include un motore di riconoscimento della grafia che può essere installato con il Language Pack.

Specificare come destinazione un linguaggio specifico eseguendo una query sui motori di riconoscimento della grafia installati.

Per altre informazioni sul riconoscimento della grafia internazionale, vedere Riconoscere i tratti di Windows Ink come testo.

Sfida 2: Riconoscimento dinamico

Per questa esercitazione è necessario che venga premuto un pulsante per avviare il riconoscimento. È anche possibile eseguire il riconoscimento dinamico usando una funzione di intervallo di base.

Per altre informazioni sul riconoscimento dinamico, vedere Riconoscere i tratti di Windows Ink come testo.

Passaggio 6: Riconoscere le forme

Ok, ora puoi convertire le tue note scritte a mano in qualcosa di più leggibile. Ma che ne dici di quegli scarabocchi tremolanti e pieni di caffeina dalla riunione dei Flowcharter Anonimi del mattino?

Usando l'analisi dell'inchiostro, l'app può anche riconoscere un set di forme principali, tra cui:

  • Cerchio
  • Diamante
  • Disegno
  • Ellisse
  • Triangolo Equilatero
  • Esagono
  • Triangolo Isoscele
  • Parallelogrammo
  • Pentagono
  • Quadrilatero
  • Rettangolo
  • RightTriangle
  • Quadrato
  • Trapezio
  • Triangolo

In questo passaggio vengono usate le funzionalità di riconoscimento delle forme di Windows Ink per provare a pulire le doodle.

Per questo esempio, non tentiamo di ridisegnare i tratti di inchiostro (anche se è possibile). Invece, aggiungiamo una tela standard sotto l'InkCanvas dove disegniamo oggetti Ellipse o Polygon equivalenti derivati dai tratti di inchiostro originali. Si eliminano quindi i corrispondenti tratti di penna.

Nell'esempio:

  1. Aprire il file MainPage.xaml
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 6: Riconoscere le forme -->")
  3. Rimuovere il commento da questa riga.
   <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. Aprire il file di MainPage.xaml.cs
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 6: Riconoscere le forme")
  3. Rimuovere il commento da queste righe:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. Esegui l'app, disegna alcune forme e fai clic sul pulsante Riconosci forma

Ecco un esempio di diagramma di flusso rudimentale da un tovagliolo digitale.

Screenshot di un diagramma di flusso semplice da un tovagliolo digitale.

Ecco lo stesso diagramma di flusso dopo il riconoscimento della forma.

Screenshot del diagramma di flusso dopo che l'utente seleziona Riconosci forma.

Passaggio 7: Salvare e caricare l'inchiostro digitale

Quindi, hai finito di fare il doodling e ti piace quello che vedi, ma pensi di voler modificare un paio di cose in un secondo momento? È possibile salvare i tratti di inchiostro in un file ISF (Ink Serialized Format) e caricarli per la modifica ogni volta che si sente ispirati.

Il file ISF è un'immagine GIF di base che include metadati aggiuntivi che descrivono proprietà e comportamenti del tratto di inchiostro digitale. Le app che non sono abilitate per l'inchiostro possono ignorare i metadati extra e caricare comunque l'immagine GIF di base (inclusa la trasparenza dello sfondo del canale alfa).

Annotazioni

La specifica ISF (Ink Serialized Format) può essere scaricata dal Microsoft Download Center .

In questo step, associamo i pulsanti Salva e Carica posizionati accanto alla barra degli strumenti della penna.

Nell'esempio:

  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<!-- Passaggio 7: Salvataggio e caricamento dell'inchiostro -->").
  3. Rimuovere il commento dalle righe seguenti.
    <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. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 7: Salva e carica l'inchiostro").
  3. Rimuovere il commento dalle righe seguenti.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Eseguire l'app e disegnare qualcosa.
  2. Selezionare il pulsante Salva e salvare il disegno.
  3. Cancellare l'inchiostro o riavviare l'app.
  4. Selezionare il pulsante carica e aprire il file di inchiostro appena salvato.

Sfida: usare la clipboard per copiare e incollare tratti di inchiostro

Windows Ink supporta anche il copiare e incollare dei tratti della penna digitale negli Appunti.

Per ulteriori dettagli sull'uso degli Appunti con inchiostro, consultare Store e recuperare i dati del tratto di Windows Ink.

Riassunto

Congratulazioni, hai completato l'esercitazione : supporto per l'inchiostro nell'app di Windows. Ti abbiamo mostrato il codice di base necessario per supportare l'uso dell'inchiostro nelle tue app di Windows e come fornire alcune delle più ricche esperienze utente supportate dalla piattaforma Windows Ink.

Esempi