Kurz: Podpora rukopisu v aplikaci Windows

Surface Pen (k dispozici k nákupu v Microsoft Store).

V tomto kurzu se dozvíte, jak vytvořit základní Windows aplikaci, která podporuje psaní a kreslení pomocí Windows rukopisu. Používáme úryvky z ukázkové aplikace, které si můžete stáhnout z GitHubu (viz Sample code), abychom demonstrovali různé funkce a přidružené Windows Ink API (viz Komponenty platformy Windows Ink) popsané v jednotlivých krocích.

Zaměřujeme se na následující:

• Přidání základní podpory rukopisu
• Přidání panelu nástrojů rukopisu
• Podpora rozpoznávání rukopisu
• Podpora základního rozpoznávání obrazců
• Ukládání a načítání rukopisu

Další podrobnosti o implementaci těchto funkcí najdete v tématu o interakcích pera a Windows Ink v aplikacích Windows.

Introduction

S Windows Ink můžete svým zákazníkům poskytnout digitální ekvivalent téměř libovolného zážitku s perem a papírem, od rychlých, ručně psaných poznámek až po prezentace na tabuli, a od architektonických a stavebních výkresů až po osobní mistrovská díla.

Předpoklady

• Počítač (nebo virtuální počítač) s aktuální verzí Windows 10 nebo Windows 11
• Nastavení Visual Studio pro vývoj pro UWP.
• [VOLITELNÉ] Digitální pero a počítač s displejem, který podporuje vstup z tohoto digitálního pera.

Poznámka:

I když Windows Rukopis může podporovat kreslení myší a dotykem (ukážeme, jak to udělat v kroku 3 tohoto kurzu) pro optimální Windows rukopis, doporučujeme mít digitální pero a počítač s displejem, který podporuje vstup z tohoto digitálního pera.

Ukázkový kód

V tomto kurzu použijeme ukázkovou inkoustovou aplikaci pro ilustraci konceptů a funkcionalit, které jsou probírány.

Stáhněte si tento ukázkový a zdrojový kód Visual Studio z GitHub na webu windows-appsample-get-started-ink sample:

1. Výběr zeleného tlačítka Klonovat nebo stáhnout
   
2. Pokud máte účet GitHub, můžete úložiště naklonovat do místního počítače tak, že zvolíte Open in Visual Studio
3. Pokud nemáte účet GitHub nebo chcete jenom místní kopii projektu, zvolte Download ZIP (budete muset pravidelně kontrolovat stahování nejnovějších aktualizací).

Důležité

Většina kódu v ukázce je okomentována. Při procházení jednotlivých kroků budete požádáni o zrušení komentáře různých částí kódu. V Visual Studio stačí zvýraznit řádky kódu a stisknout CTRL-K a potom CTRL-U.

Komponenty platformy Windows Ink

Tyto objekty poskytují většinu zážitku z rukopisu pro aplikace Windows.

Součást	Description
InkCanvas	Ovládací prvek platformy uživatelského rozhraní XAML, který ve výchozím nastavení přijímá a zobrazuje veškerý vstup z pera jako inkoustová stopa nebo vygumování.
InkPresenter	Instance objektu na pozadí je vytvořena spolu s ovládacím prvkem InkCanvas (vystaveno prostřednictvím vlastnosti InkCanvas.InkPresenter). Tento objekt poskytuje všechny výchozí funkce rukopisu zprostředkované InkCanvas spolu s komplexní sadou rozhraní API pro další přizpůsobení a personalizaci.
InkToolbar	Ovládací prvek platformy uživatelského rozhraní XAML obsahující přizpůsobitelnou a rozšiřitelnou kolekci tlačítek, která aktivují funkce související s rukopisem v přidruženém inkCanvas.
IInkD2DRenderer Tuto funkci zde nepokrýváme, další informace viz v ukázce Komplexní inkoust.	Umožňuje vykreslování tahů rukopisu do určeného kontextu zařízení Direct2D univerzální aplikace Windows místo výchozího ovládacího prvku InkCanvas.

Krok 1: Spuštění ukázky

Po stažení ukázkové aplikace RadialController ověřte, že běží:

1. Otevřete ukázkový projekt v Visual Studio.

2. Nastavte rozevírací seznam Platformy řešení na jiný výběr než Arm.

3. Stisknutím klávesy F5 zkompilujte, nasaďte a spusťte.

   Poznámka:

   Případně můžete vybrat položku nabídky Spustit ladění> nebo vybrat tlačítko Spustit na místním počítači, které je zde zobrazeno.

Otevře se okno aplikace a po několika sekundách se zobrazí úvodní obrazovka.

Dobře, teď máme základní Windows aplikaci, kterou budeme používat v průběhu zbytku tohoto kurzu. V následujících krocích přidáme funkci inkoustu.

Krok 2: Použití inkCanvas k podpoře základního rukopisu

Možná jste si už asi všimli, že aplikace v počáteční podobě neumožňuje kreslit pomocí pera nic (i když můžete pero použít jako standardní zařízení ukazatele pro interakci s aplikací).

Pojďme tento malý nedostatek v tomto kroku opravit.

Pokud chcete přidat základní funkce rukopisu, stačí umístit ovládací prvek InkCanvas na příslušnou stránku aplikace.

Poznámka:

InkCanvas má výchozí hodnoty vlastností Height a Width nastavené na nulu, pokud není podřízeným prvkem prvku, který automaticky nastavuje velikost svých podřízených prvků.

V ukázce:

1. Otevřete soubor MainPage.xaml.cs.
2. Vyhledejte kód označený názvem tohoto kroku (// Krok 2: Použití inkCanvas k podpoře základního rukopisu).
3. Odkomentujte následující řádky. (Tyto odkazy jsou vyžadovány pro funkce použité v následujících krocích).

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

4. Otevřete soubor MainPage.xaml.
5. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 2: Základní rukopis pomocí InkCanvas -->").
6. Odkomentujte následující řádek.

    <InkCanvas x:Name="inkCanvas" />

A je to!

Teď aplikaci spusťte znovu. Pokračujte a čmárejte, napište své jméno nebo (pokud držíte zrcadlo nebo máte velmi dobrou paměť) nakreslete svůj portrét.

Krok 3: Podpora rukopisu pomocí dotykového ovládání a myši

Všimněte si, že rukopis je ve výchozím nastavení podporovaný jenom pro zadávání perem. Pokud se pokusíte psát nebo kreslit prstem, myší nebo touchpadem, budete zklamaní.

Pokud chcete otočit zamračený vzhůru nohama, musíte přidat druhý řádek kódu. Tentokrát je to v kódu na pozadí pro soubor XAML, ve kterém jste deklarovali InkCanvas.

V tomto kroku představíme objekt InkPresenter , který poskytuje jemně odstupňovanou správu vstupu, zpracování a vykreslování rukopisného vstupu (standardní a upravené) ve vašem InkCanvas.

Poznámka:

Standardní vstup rukopisu (hrot pera nebo hrot/guma) není upravován sekundárním hardwarem, například tlačítkem na těle pera, pravým tlačítkem myši nebo podobným mechanismem.

Chcete-li povolit rukopis myši a dotykového ovládání, nastavte InputDeviceTypes vlastnost InkPresenter na kombinaci hodnot CoreInputDeviceTypes , které chcete.

V ukázce:

1. Otevřete soubor MainPage.xaml.cs.
2. Vyhledejte kód označený názvem tohoto kroku (// Krok 3: Podpora rukopisu pomocí dotykového ovládání a myši).
3. Odkomentujte následující řádky.

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

Spusťte aplikaci znovu a zjistíte, že všechny vaše sny o malování prstem na obrazovce počítače se staly skutečností!

Poznámka:

Při zadávání typů vstupních zařízení je nutné označit podporu pro každý konkrétní typ vstupu (včetně pera), protože nastavení této vlastnosti přepíše výchozí nastavení InkCanvas .

Krok 4: Přidání panelu nástrojů rukopisu

InkToolbar je ovládací prvek platformy UPW, který poskytuje přizpůsobitelnou a rozšiřitelnou kolekci tlačítek pro aktivaci funkcí souvisejících s rukopisem.

InkToolbar ve výchozím nastavení obsahuje základní sadu tlačítek, která uživatelům umožňují rychle vybírat mezi perem, tužkou, zvýrazňovačem nebo gumou, které lze použít společně se šablonou (pravítko nebo úhloměr). Tlačítka pera, tužky a zvýrazňovače poskytují také informační nabídku pro výběr barvy rukopisu a velikosti tahů.

Pokud chcete do aplikace rukopisu přidat výchozí InkToolbar, stačí ho umístit na stejnou stránku jako InkCanvas a propojit oba ovládací prvky.

V ukázce

1. Otevřete soubor MainPage.xaml.
2. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 4: Přidání rukopisného panelu nástrojů -->").
3. Odkomentujte následující řádky.

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

Poznámka:

Aby bylo uživatelské rozhraní a kód co nejpřehlednější a co nejjednodušší, použijeme základní rozložení mřížky a deklarujeme inkToolbar za InkCanvas v řádku mřížky . Pokud ho deklarujete před inkCanvas, vykreslí se nejprve inkToolbar pod plátnem a je pro uživatele nepřístupný.

Teď spusťte aplikaci znovu, abyste viděli InkToolbar a vyzkoušejte některé nástroje.

Výzva: Přidání vlastního tlačítka

Tady je příklad vlastního InkToolbar (ze Skicáku v Windows Ink Workspace).

Další podrobnosti o přizpůsobení InkToolbar najdete v tématu Přidání InkToolbar do aplikace pro kreslení ve Windows.

Krok 5: Podpora rozpoznávání rukopisu

Teď, když můžete psát a kreslit ve své aplikaci, zkusme udělat něco užitečného s těmito čmáranicemi.

V tomto kroku použijeme funkce rozpoznávání rukopisu Windows Ink a pokusíme se dešifrovat to, co jste napsali.

Poznámka:

Rozpoznávání rukopisu je možné vylepšit prostřednictvím nastavení Pen & Windows Ink:

1. Otevřete nabídku Start a vyberte Nastavení.
2. Na obrazovce Nastavení vyberte Zařízení>Pero a Windows Ink.
3. Vyberte Poznání mého rukopisu pro otevření dialogového okna Přizpůsobení rukopisu.

V ukázce:

1. Otevřete soubor MainPage.xaml.
2. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 5: Podpora rozpoznávání rukopisu -->").
3. Odkomentujte následující řádky.

    <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. Otevřete soubor MainPage.xaml.cs.
5. Vyhledejte kód označený názvem tohoto kroku (" Krok 5: Podpora rozpoznávání rukopisu").
6. Odkomentujte následující řádky.

• Toto jsou globální proměnné vyžadované pro tento krok.

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

• Toto je obslužná rutina tlačítka Rozpoznat text , kde provádíme zpracování rozpoznávání.

    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. Spusťte aplikaci znovu, napište něco a potom klikněte na tlačítko Rozpoznat text .
8. Vedle tlačítka se zobrazí výsledky rozpoznávání.

Výzva 1: Mezinárodní uznání

Windows Rukopis podporuje rozpoznávání textu pro mnoho jazyků podporovaných Windows. Každá jazyková sada obsahuje modul pro rozpoznávání rukopisu, který lze nainstalovat s jazykovou sadou.

Zaměřte se na konkrétní jazyk dotazováním nainstalovaných modulů pro rozpoznávání rukopisu.

Další podrobnosti o mezinárodním rozpoznávání rukopisu najdete v tématu Rozpoznávání tahů Windows Ink jako textu.

Výzva 2: Dynamické rozpoznávání

V tomto kurzu vyžadujeme, aby se k zahájení rozpoznávání stisklo tlačítko. Dynamické rozpoznávání můžete také provést pomocí základní funkce časování.

Další podrobnosti o dynamickém rozpoznávání najdete v Rozpoznání tahů Windows Ink jako text.

Krok 6: Rozpoznávání obrazců

Ok, takže teď můžete ručně psané poznámky převést na něco čitelnějšího. Ale co ty rozklepané, kofeinové doodly z tvé ranní schůzky Flowchartů Anonymních?

Pomocí analýzy rukopisu může vaše aplikace také rozpoznat sadu základních obrazců, včetně těchto:

• Circle
• Diamant
• Kreslení
• Elipsa
• Rovnostranný trojúhelník
• Šestiúhelník
• Rovnoramenný trojúhelník
• Rovnoběžník
• Pentagon
• Čtyřúhelník
• Obdélník
• RightTriangle
• Čtverec
• Lichoběžník
• Triangle

V tomto kroku použijeme funkce pro rozpoznávání tvarů Windows Ink, abychom se pokusili vyčistit vaše čmáranice.

V tomto příkladu se nepokoušáme překreslit inkoustové tahy (i když je to možné). Místo toho přidáme standardní plátno pod InkCanvas, kde nakreslíme ekvivalentní objekty Ellipse nebo Polygon vytvořené z původního inkoustu. Potom odstraníme odpovídající tahy rukopisu.

V ukázce:

1. Otevření souboru MainPage.xaml
2. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 6: Rozpoznávání obrazců -->")
3. Odkomentovat tento řádek.

   <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. Otevření souboru MainPage.xaml.cs
5. Vyhledejte kód označený názvem tohoto kroku (// Krok 6: Rozpoznávání obrazců).
6. Odkomentujte tyto řádky:

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

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

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

7. Spusťte aplikaci, nakreslete některé obrazce a klikněte na tlačítko Rozpoznat obrazec .

Tady je příklad základního vývojového diagramu z digitálního ubrousku.

Tady je stejný vývojový diagram po rozpoznávání obrazce.

Krok 7: Uložení a načtení rukopisu

Takže jste hotovi doodlingu a líbí se vám, co vidíte, ale myslíte si, že byste později chtěli pár věcí vyladit? Tahy rukopisu můžete uložit do souboru ISF (Ink Serialized Format) a kdykoli je načíst k úpravám, když vás přepadne inspirace.

Soubor ISF je základní obrázek ve formátu GIF, který zahrnuje další metadata popisující vlastnosti a chování tahů inkoustem. Aplikace, které nemají povolenou funkci rukopisu, můžou ignorovat další metadata a stále načíst základní obrázek GIF (včetně průhlednosti pozadí alfa kanálu).

Poznámka:

Specifikace ISF (Ink Serialized Format) lze stáhnout z webu Microsoft Download Center.

V tomto kroku připojíme tlačítka Uložit a Načíst umístěná vedle inkoustového panelu nástrojů.

V ukázce:

1. Otevřete soubor MainPage.xaml.
2. Vyhledejte kód označený názvem tohoto kroku ("<-- Krok 7: Ukládání a načítání rukopisu -->").
3. Odkomentujte následující řádky.

    <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. Otevřete soubor MainPage.xaml.cs.
5. Vyhledejte kód označený názvem tohoto kroku (// Krok 7: Uložení a načtení rukopisu).
6. Odkomentujte následující řádky.

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

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

7. Spusťte aplikaci a nakreslete něco.
8. Vyberte tlačítko Uložit a uložte výkres.
9. Vymažte rukopis nebo restartujte aplikaci.
10. Vyberte tlačítko Načíst a otevřete inkoustový soubor, který jste právě uložili.

Výzva: Použití schránky ke kopírování a vkládání rukopisných tahů

Windows rukopis podporuje také kopírování a vkládání tahů rukopisu do a ze schránky.

Další podrobnosti o použití schránky s rukopisem najdete v tématu Uložení a načtení dat tahů Windows Ink.

Shrnutí

Blahopřejeme, dokončili jste kurz Input: Podpora rukopisu v aplikaci Windows kurz! Ukázali jsme vám základní kód potřebný pro podporu rukopisu ve vašich Windows aplikacích a jak poskytnout některé z bohatších uživatelských prostředí podporovaných platformou Windows Rukopis.

Související články

• Interakce pera a Windows Ink v aplikacích Windows

Ukázky

• Ukázka analýzy inkoustu (základní) (C#)
• Ukázka rozpoznávání inkoustového rukopisu (C#)
• Uložení a načtení tahů rukopisu ze souboru ISF (Ink Serialized Format)
• Uložení a načtení inkoustových tahů ze schránky
• Umístění a orientace panelu nástrojů Inku (základní)
• Ukázka umístění a orientace panelu rukopisu (dynamická)
• Jednoduchá ukázka inkoustu (C#/C++)
• ukázka inkoustu komplexní (C++)
• Ukázka vzorku Ink (JavaScript)
• Get Started Tutorial: Podpora rukopisu v aplikaci Windows
• Ukázka omalovánky
• Ukázka rodinných poznámek