Condividi tramite

Esercitazione: Supporto dell'inchiostro nell'app di Windows

Immagine di copertina della Surface Pen.
Surface Pen (disponibile per l'acquisto in 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 per inchiostro digitale di base
  • Aggiunta di una barra degli strumenti inchiostro
  • Supporto del riconoscimento della grafia
  • Supporto del riconoscimento delle forme di base
  • Salvataggio e caricamento di inchiostro

Per altri dettagli sull'implementazione di queste funzionalità, vedi Interazioni con penna 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 utilizzata un'app di inchiostro digitale di esempio per illustrare i concetti e le funzionalità descritti.

Scarica questo esempio di Visual Studio e il codice sorgente da GitHub: windows-appsample-get-started-ink sample

  1. Selezionare il pulsante verde Clona o scarica
    Clonazione del 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 Scarica ZIP (sarà necessario eseguire regolarmente il controllo per scaricare gli aggiornamenti più recenti)

Importante

La maggior parte del codice nell'esempio è messa in commento. Durante ogni passaggio, dovrai 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 inchiostrazione per le app di Windows.

Componente Description
InkCanvas Controllo di piattaforma dell'interfaccia utente XAML che, per impostazione predefinita, riceve e mostra tutti gli input da una penna come tratto di inchiostro o come tratto di cancellazione.
InkPresenter Oggetto code-behind che è stato istanziato insieme a un controllo InkCanvas (esposto tramite la proprietà InkCanvas.InkPresenter ). Questo oggetto fornisce tutte le funzionalità di inchiostrazione predefinite esposte da InkCanvas, insieme a un set completo di API per una customizzazione e personalizzazione ulteriori.
InkToolbar Controllo dell'interfaccia utente XAML contenente una raccolta personalizzabile ed estendibile di pulsanti che attivano funzionalità relative all'inchiostro in un InkCanvas associato.
IInkD2DRenderer
Non copriamo questa funzionalità qui. Per ulteriori informazioni, vedere esempio complesso di inchiostro.		 Abilita il rendering dei tratti di inchiostro sul contesto dispositivo Direct2D designato di un'app universale di Windows, anziché utilizzare il controllo predefinito InkCanvas.

Passaggio 1: Eseguire l'esempio

Dopo aver scaricato l'app di esempio RadialController, verificare che venga eseguita:

  1. Aprire il progetto di esempio in Visual Studio.

  2. Impostare l'elenco a discesa Piattaforme della Soluzione su una selezione diversa da Arm.

  3. Premere F5 per compilare, distribuire ed eseguire.

    Annotazioni

    In alternativa, è possibile selezionare la voce di menu Debug>Avvia debug oppure selezionare il pulsante Esecuzione computer locale illustrato di seguito. Pulsante Compila progetto di Visual Studio.

Viene visualizzata la finestra dell'app e, dopo aver visualizzato una schermata di avvio per alcuni secondi, verrà visualizzata questa schermata principale.

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 aggiungiamo la funzionalità di inchiostro.

Passaggio 2: Usare InkCanvas per supportare l'inchiostrazione 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).

Correggiamo quella piccola mancanza in questo passaggio.

Per aggiungere funzionalità di inchiostrazione di base, posiziona semplicemente un controllo InkCanvas nella pagina appropriata nell'app.

Annotazioni

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

Nell'esempio:

  1. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 2: Usare InkCanvas per supportare la scrittura a mano 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 passaggio ("<!-- Passaggio 2: Inchiostratura di base con InkCanvas -->").
  3. Rimuovere il commento dalla riga seguente.
    <InkCanvas x:Name="inkCanvas" />

Ecco fatto!

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 Esempio di Ink di Base evidenziata in questo argomento.

Passaggio 3: Supportare l'inchiostrazione con tocco e mouse

Si noterà 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 una situazione negativa in positiva, è 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 viene presentato l'oggetto InkPresenter, che fornisce una gestione più precisa dell'input, dell'elaborazione e del rendering dell'input penna (standard e modificato) sul InkCanvas.

Annotazioni

L'input standard della penna (punta della penna o punta/pulsante della gomma) non viene modificato con un meccanismo hardware secondario, come ad esempio un pulsante sul corpo della penna, il pulsante destro del mouse o un meccanismo simile.

Per abilitare la funzione di inchiostrazione con mouse e tocco, impostare la proprietà InputDeviceTypes di InkPresenter alla combinazione di valori desiderati di CoreInputDeviceTypes.

Nell'esempio:

  1. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 3: Supporto dell'inchiostro digitale con 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 dipinti digitali con le dita si sono avverati!

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

InkToolbar è un controllo della piattaforma UWP che fornisce una raccolta personalizzabile ed estendibile di pulsanti per attivare le funzionalità relative all'inchiostro.

Per impostazione predefinita, InkToolbar include un set di pulsanti di base che consentono 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 protractore). I pulsanti penna, matita ed evidenziatore forniscono anche un riquadro a comparsa per la selezione del colore input penna e delle dimensioni del tratto.

Per aggiungere un controllo InkToolbar predefinito a un'app per inchiostrazione, posizionarlo nella stessa pagina di InkCanvas e associare i due controlli.

Nell'esempio

  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<!-- Passaggio 4: Aggiungere una barra degli strumenti per l'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ù semplice possibile, usiamo un layout grid di base e dichiariamo InkToolbar dopo InkCanvas in una riga della griglia. Se la dichiari prima di InkCanvas, il rendering di InkToolbar viene eseguito prima, sotto l'area di disegno e non è accessibile all'utente.

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

Screenshot dell'app Ink Sample di base evidenziata in questo contesto con l'oggetto InkToolbar predefinito.

Sfida: Aggiungere un pulsante personalizzato

Ecco un esempio di InkToolbar personalizzato (da Sketchpad nell'area di lavoro di Windows Ink).

Screenshot della Barra degli strumenti Input Penna di Sketchpad nell'Area di lavoro di Input Penna.

Per ulteriori dettagli sulla personalizzazione di un InkToolbar, consulta Aggiungere un InkToolbar a un'app di Windows per l'input penna.

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 tramite 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 delle impostazioni di Penna e Windows Ink.
  3. Selezionare Conosci la mia Scrittura per aprire la finestra di dialogo Personalizzazione 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 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. Eseguire di nuovo l'app, scrivere qualcosa e quindi fare clic sul pulsante Riconoscimento 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, vedi Riconoscere i tratti input penna di Windows 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 ulteriori informazioni sul riconoscimento dinamico, vedi 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 quei doodle traballanti e caffeinati dalla riunione di Flowcharters Anonymous mattutina?

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

  • Circle
  • Diamante
  • Disegno
  • Ellisse
  • TriangoloEquilatero
  • Hexagon
  • Triangolo Isoscele
  • Parallelogrammo
  • Pentagono
  • Quadrilatero
  • Rettangolo
  • RightTriangle
  • Quadrato
  • Trapezio
  • Triangle

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

Per questo esempio, non si tenta di ridisegnare i tratti input penna (anche se possibile). Si aggiunge invece un'area di disegno standard sotto InkCanvas in cui si disegnano oggetti Ellipse o Polygon equivalenti derivati dall'inchiostro originale. Quindi, eliminiamo i tratti di inchiostro corrispondenti.

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. Decommenta 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. Eseguire l'app, disegnare alcune forme e fare clic sul pulsante Riconosci forma

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

Screenshot di un diagramma di flusso rudimentale 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 input penna in un file ISF (Ink Serialized Format) e caricarli per la modifica ogni volta che l'ispirazione colpisce.

Il file ISF è un'immagine GIF di base che include metadati aggiuntivi che descrivono le proprietà e i comportamenti del tratto di inchiostro. Le app che non sono abilitate per l'inchiostro possono ignorare i metadati aggiuntivi 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 passaggio, colleghiamo i pulsanti Salva e Carica collocati accanto alla barra degli strumenti inchiostro.

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. Individuate il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 7: Salvare e caricare 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. Seleziona il pulsante Carica e apri il file di inchiostro appena salvato.

Sfida: usare gli Appunti per copiare e incollare tratti di inchiostro

Windows Ink supporta anche la copia e incolla dei tratti di penna negli Appunti.

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

Riassunto

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

Samples

  • Last updated on