Udostępnij przez

Samouczek: Wspieranie pisma odręcznego w aplikacji systemu Windows

Obraz bohatera pióra Surface.
Pióro Surface (dostępne do zakupu w Sklepie Microsoft).

W tym samouczku przedstawiono, jak stworzyć podstawową aplikację Windows, która obsługuje pisanie i rysowanie za pomocą Windows Ink. Używamy fragmentów kodu z przykładowej aplikacji, którą można pobrać z usługi GitHub (zobacz Przykładowy Kod), aby zademonstrować różne funkcje i skojarzone interfejsy Windows Ink API (zobacz Składniki platformy Windows Ink) omówione w każdym kroku.

Koncentrujemy się na następujących kwestiach:

  • Dodawanie podstawowej obsługi pióra cyfrowego
  • Dodawanie paska narzędzi atramentu
  • Obsługa rozpoznawania pisma ręcznego
  • Obsługa podstawowego rozpoznawania kształtów
  • Zapisywanie i ładowanie tuszu

Aby uzyskać więcej informacji na temat implementowania tych funkcji, zobacz Interakcje piórem i Windows Ink w aplikacjach Windows.

Wprowadzenie

Dzięki narzędziu Windows Ink możesz zapewnić klientom cyfrowy odpowiednik niemal każdego doświadczenia pióra i papieru, które można sobie wyobrazić, od szybkich, odręcznych notatek i adnotacji po pokazy tablicy oraz od rysunków architektonicznych i inżynieryjnych po osobiste arcydzieła.

Wymagania wstępne

Uwaga / Notatka

Chociaż Windows Ink może obsługiwać rysowanie za pomocą myszy i dotyku (pokazujemy, jak to zrobić w kroku 3 tego samouczka), w celu uzyskania optymalnego środowiska Windows Ink zalecamy posiadanie cyfrowego pióra i komputera z wyświetlaczem obsługującym wejście z tego cyfrowego pióra.

Przykładowy kod

W tym samouczku użyjemy przykładowej aplikacji pisma oddyskowego do zademonstrowania omówionych pojęć i funkcji.

Pobierz ten przykładowy program Visual Studio i kod źródłowy z GitHub w przykładzie windows-appsample-get-started-ink:

  1. Wybierz zielony przycisk Klonuj lub pobierz
    Klonowanie repozytorium.
  2. Jeśli masz konto usługi GitHub, możesz sklonować repozytorium na maszynę lokalną, wybierając pozycję Otwórz w programie Visual Studio
  3. Jeśli nie masz konta usługi GitHub lub chcesz po prostu uzyskać lokalną kopię projektu, wybierz pozycję Pobierz plik ZIP (musisz regularnie sprawdzać, czy pobierać najnowsze aktualizacje)

Ważne

Większość kodu w przykładzie jest zakomentowana. W miarę przechodzenia przez każdy krok będziesz proszony o usunięcie komentarza z różnych sekcji kodu. W programie Visual Studio wyróżnij wiersze kodu i naciśnij CTRL-K, a następnie naciśnij CTRL-U.

Składniki platformy Windows Ink

Te obiekty zapewniają główne funkcje pisma odręcznego dla aplikacji systemu Windows.

Składnik Description
InkCanvas Kontrolka platformy XAML, która domyślnie odbiera i wyświetla wszystkie sygnały wejściowe z pióra jako pociągnięcia pisma odręcznego lub pociągnięcia wymazywania.
InkPresenter Obiekt związany z kodem powiązany z kontrolką InkCanvas (dostępną poprzez właściwość InkCanvas.InkPresenter). Ten obiekt udostępnia wszystkie domyślne funkcje pisma odręcznego udostępniane przez aplikację InkCanvas wraz z kompleksowym zestawem interfejsów API na potrzeby dodatkowego dostosowywania i personalizacji.
Narzędzie InkToolbar Kontrolka platformy interfejsu użytkownika XAML zawierająca dostosowywalną i rozszerzalną kolekcję przycisków, które aktywują funkcje związane z atramentem w skojarzonym inkCanvas.
IInkD2DRenderer
W tym miejscu nie omówiono tej funkcji, aby uzyskać więcej informacji, zobacz Przykład złożonego atramentu.		 Umożliwia renderowanie pociągnięć atramentu na wyznaczonym kontekście urządzenia Direct2D aplikacji uniwersalnej Windows, zamiast domyślnej kontrolki InkCanvas.

Krok 1. Uruchamianie przykładu

Po pobraniu przykładowej aplikacji RadialController sprawdź, czy działa:

  1. Otwórz przykładowy projekt w programie Visual Studio.

  2. Ustaw listę rozwijaną Platformy rozwiązań na opcję inną niż Arm.

  3. Naciśnij F5, aby skompilować, wdrożyć i uruchomić.

    Uwaga / Notatka

    Alternatywnie możesz wybrać pozycję Debuguj>start debugowania menu lub wybrać przycisk Uruchamianie komputera lokalnego pokazany tutaj. Przycisk kompilacji projektu w Visual Studio.

Otwarte zostanie okno aplikacji, a po pojawieniu się ekranu powitalnego (ang. splash screen) przez kilka sekund zobaczysz ten początkowy ekran.

Zrzut ekranu przedstawiający pustą aplikację.

Teraz mamy podstawową aplikację systemu Windows, która będzie używana w pozostałej części tego samouczka. W poniższych krokach dodamy naszą funkcjonalność pisania odręcznego.

Krok 2. Używanie narzędzia InkCanvas do obsługi podstawowego pisma odręcznego

Być może prawdopodobnie już zauważyłeś, że aplikacja, w początkowej postaci, nie pozwala narysować niczego za pomocą pióra (chociaż można użyć pióra jako standardowego urządzenia wskaźnika do interakcji z aplikacją).

Rozwiążmy ten mały problem w tym kroku.

Aby dodać podstawową funkcjonalność pisma odręcznego, wystarczy umieścić kontrolkę InkCanvas na odpowiedniej stronie w aplikacji.

Uwaga / Notatka

Obiekt InkCanvas ma domyślne właściwości Height (Wysokość ) i Width (Szerokość ) o wartości zero, chyba że jest elementem podrzędnym elementu, który automatycznie rozmiaruje jego elementy podrzędne.

W przykładzie:

  1. Otwórz plik MainPage.xaml.cs.
  2. Znajdź kod oznaczony tytułem tego kroku ("// Krok 2: Używanie narzędzia InkCanvas do obsługi podstawowego pisma odręcznego").
  3. Usuń komentarz z następujących wierszy. (Te odwołania są wymagane dla funkcji używanych w kolejnych krokach).
    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;
  1. Otwórz plik MainPage.xaml.
  2. Znajdź kod oznaczony tytułem tego kroku ("<-- Krok 2: Podstawowe pisanie odręczne za pomocą inkCanvas -->").
  3. Usuń komentarz z następującego wiersza.
    <InkCanvas x:Name="inkCanvas" />

To wszystko!

Teraz ponownie uruchom aplikację. Śmiało, bazgrol, napisz swoje imię lub (jeśli trzymasz lustro lub masz bardzo dobrą pamięć) narysuj autoportret.

Zrzut ekranu przedstawiający aplikację Basic Ink Sample wyróżnioną w tym temacie.

Krok 3. Obsługa pisma odręcznego za pomocą dotyku i myszy

Zauważysz, że domyślnie atrament jest obsługiwany tylko podczas użycia pióra do wprowadzania danych. Jeśli spróbujesz napisać lub narysować palcem, myszą lub touchpadem, będziesz rozczarowany.

Aby odwrócić smutek do góry, musisz dodać drugi wiersz kodu. Tym razem znajduje się on w kodzie dla pliku XAML, w którym zadeklarowaliśmy twoją aplikację InkCanvas.

W tym kroku wprowadzamy obiekt InkPresenter, który zapewnia bardziej szczegółowe zarządzanie przetwarzaniem, renderowaniem i obsługą danych atramentu (zarówno standardowych, jak i zmodyfikowanych) na InkCanvas.

Uwaga / Notatka

Standardowe wejście pisma odręcznego (końcówka pióra lub przycisk gumki) nie jest modyfikowane przez dodatkowe funkcje sprzętowe, takie jak przycisk na korpusie pióra, prawy przycisk myszy lub podobny mechanizm.

Aby włączyć pisanie odręczne za pomocą myszy i dotyku, ustaw właściwość InputDeviceTypes elementu InkPresenter na kombinację żądanych wartości CoreInputDeviceTypes.

W przykładzie:

  1. Otwórz plik MainPage.xaml.cs.
  2. Znajdź kod oznaczony tytułem tego kroku ("// Krok 3: Obsługa pisma odręcznego za pomocą dotyku i myszy").
  3. Usuń komentarz z następujących wierszy.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Uruchom aplikację ponownie i przekonasz się, że wszystkie twoje marzenia o malowaniu palcem na ekranie komputera się spełniły!

Uwaga / Notatka

Podczas definiowania typów urządzeń wejściowych, musisz zadeklarować obsługę każdego konkretnego typu wejścia (w tym pióra), ponieważ ustawienie tej właściwości zastępuje domyślne ustawienie InkCanvas.

Krok 4. Dodaj pasek narzędzi do pisania tuszem

InkToolbar to kontrolka platformy uniwersalnej systemu Windows, która zapewnia dostosowywalną i rozszerzalną kolekcję przycisków do aktywowania funkcji związanych z atramentem.

Domyślnie InkToolbar zawiera podstawowy zestaw przycisków, które pozwalają użytkownikom szybko wybierać między piórem, ołówkiem, zakreślaczem lub gumką, a każdy z nich może być używany razem ze szablonem (linijką lub kątomierzem). Przyciski pióra, ołówka i zakreślacza oferują również menu rozwijane do wybierania koloru tuszu i rozmiaru pociągnięcia.

Aby dodać domyślny InkToolbar do aplikacji do rysowania, wystarczy umieścić go na tej samej stronie co InkCanvas i skojarzyć te dwie kontrolki.

W przykładzie

  1. Otwórz plik MainPage.xaml.
  2. Znajdź kod oznaczony tytułem tego kroku ("<-- Krok 4: Dodaj pasek narzędzi atramentu -->").
  3. Usuń komentarz z następujących wierszy.
    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Uwaga / Notatka

Aby zachować interfejs użytkownika i kod jako przejrzyste i proste, jak to możliwe, użyjemy podstawowego układu siatki i zadeklarujemy InkToolbar po InkCanvas w wierszu siatki. Jeśli zadeklarujesz go przed elementem InkCanvas, narzędzie InkToolbar jest renderowane jako pierwsze, poniżej kanwy i jest niedostępne dla użytkownika.

Teraz ponownie uruchom aplikację, aby wyświetlić narzędzie InkToolbar i wypróbować niektóre narzędzia.

Zrzut ekranu przedstawiający aplikację Basic Ink Sample wyróżnioną w tym temacie z domyślnym paskiem narzędzi InkToolbar.

Wyzwanie: Dodawanie przycisku niestandardowego

Oto przykład niestandardowego InkToolbar (z programu Sketchpad w przestrzeni roboczej pisma odręcznego systemu Windows).

Zrzut ekranu przedstawiający Pasek Narzędzi Pióra z Szkicownika w Obszarze Roboczym Pióra.

Aby uzyskać więcej informacji na temat dostosowywania paska InkToolbar, zobacz Dodawanie paska InkToolbar do aplikacji rysowania systemu Windows.

Krok 5. Obsługa rozpoznawania pisma ręcznego

Już teraz, gdy możesz pisać i rysować w aplikacji, spróbujmy zrobić coś przydatnego z tymi bazgrołami.

W tym kroku użyjemy funkcji rozpoznawania pisma odręcznego systemu Windows Ink, aby spróbować odszyfrować to, co zostało napisane.

Uwaga / Notatka

Rozpoznawanie pisma ręcznego można ulepszyć za pomocą ustawień Pióra i systemu Windows Ink:

  1. Otwórz menu Start i wybierz pozycję Ustawienia.
  2. Na ekranie Ustawienia wybierz pozycję Urządzenia>Pióro i atrament systemu Windows. Zrzut ekranu przedstawiający stronę Ustawień pióra i pisma odręcznego systemu Windows.
  3. Wybierz Poznaj moje pismo ręczne, aby otworzyć okno dialogowe Personalizacja pisma ręcznego. Zrzut ekranu przedstawiający okno dialogowe Personalizacja rozpoznawania pisma ręcznego.

W przykładzie:

  1. Otwórz plik MainPage.xaml.
  2. Znajdź kod oznaczony tytułem tego kroku ("<-- Krok 5: Obsługa rozpoznawania pisma ręcznego -->").
  3. Usuń komentarz z następujących wierszy.
    <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. Otwórz plik MainPage.xaml.cs.
  2. Znajdź kod oznaczony tytułem tego kroku ("Krok 5: Obsługa rozpoznawania pisma ręcznego").
  3. Usuń komentarz z następujących wierszy.
  • Są to zmienne globalne wymagane w tym kroku.
    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;
  • Jest to procedura obsługi przycisku Rozpoznawanie tekstu , w którym przeprowadzamy przetwarzanie rozpoznawania.
    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. Ponownie uruchom aplikację, napisz coś, a następnie kliknij przycisk Rozpoznaj tekst
  2. Wyniki rozpoznawania są wyświetlane obok przycisku

Wyzwanie 1: Międzynarodowe uznanie

Funkcja Windows Ink obsługuje rozpoznawanie tekstu dla wielu języków obsługiwanych przez system Windows. Każdy pakiet językowy zawiera aparat rozpoznawania pisma ręcznego, który można zainstalować za pomocą pakietu językowego.

Określanie określonego języka przez wykonywanie zapytań względem zainstalowanych aparatów rozpoznawania pisma ręcznego.

Aby uzyskać więcej informacji na temat międzynarodowego rozpoznawania pisma ręcznego, zobacz Rozpoznawanie pociągnięć pisma odręcznego systemu Windows jako tekstu.

Wyzwanie 2. Rozpoznawanie dynamiczne

Aby rozpocząć rozpoznawanie, w tym samouczku wymagane jest naciśnięcie przycisku. Rozpoznawanie dynamiczne można również wykonać przy użyciu podstawowej funkcji chronometrażu.

Aby uzyskać więcej informacji na temat rozpoznawania dynamicznego, zobacz Rozpoznawanie pociągnięć Windows Ink jako tekstu.

Krok 6. Rozpoznawanie kształtów

Ok, więc teraz możesz przekonwertować odręczne notatki na coś nieco bardziej czytelnego. Ale co z tymi roztrzęsionymi, zrobionymi po kawie rysunkami z porannego spotkania Flowcharters Anonymous?

Za pomocą analizy tuszu aplikacja może również rozpoznawać zestaw podstawowych kształtów, w tym:

  • Circle
  • Diament
  • Rysunek
  • Elipsa
  • Trójkąt równoboczny
  • Sześciokąt
  • Trójkąt równoramienny
  • Równoległobok
  • Pentagon
  • Czworokąt
  • Prostokąt
  • RightTriangle
  • Square
  • Trapez
  • Triangle

W tym kroku użyjemy funkcji rozpoznawania kształtów nakreślonych za pomocą Windows Ink, aby spróbować uporządkować rysunki.

W tym przykładzie nie próbujemy ponownie wyrysować pociągnięć atramentu (chociaż jest to możliwe). Zamiast tego dodajemy standardową kanwę pod InkCanvas, gdzie rysujemy równoważne obiekty elipsy lub wielokąta pochodzące z oryginalnego tuszu. Następnie usuwamy odpowiednie pociągnięcia atramentu.

W przykładzie:

  1. Otwórz plik MainPage.xaml
  2. Znajdź kod oznaczony tytułem tego kroku ("<-- Krok 6: Rozpoznawanie kształtów -->")
  3. Usuń komentarz z tego wiersza.
   <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. Otwieranie pliku MainPage.xaml.cs
  2. Znajdź kod oznaczony tytułem tego kroku ("// Krok 6: Rozpoznawanie kształtów")
  3. Usuń komentarz z następujących wierszy:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. Uruchom aplikację, narysuj kilka kształtów i kliknij przycisk Rozpoznaj kształt

Oto przykład podstawowego diagramu z cyfrowej serwetki.

Zrzut ekranu przedstawiający prosty schemat blokowy z cyfrowego notatnika.

Oto ten sam schemat blokowy po rozpoznaniu kształtów.

Zrzut ekranu przedstawiający schemat blokowy po wybraniu przez użytkownika opcji Rozpoznaj kształt.

Krok 7. Zapisywanie i ładowanie atramentu

Więc skończyłeś rysowanie i podoba ci się to, co widzisz, ale myślisz, że może będziesz chciał dostosować kilka rzeczy później? Możesz zapisać pociągnięcia tuszem do pliku Ink Serialized Format (ISF) i załadować je do edycji, gdy tylko poczujesz inspirację.

Plik ISF jest uproszczonym obrazem GIF, który zawiera dodatkowe metadane opisujące właściwości i zachowania pociągnięcia pióra. Aplikacje, które nie obsługują technologii ink, mogą ignorować dodatkowe metadane i nadal ładować podstawowy obraz GIF (w tym przezroczystość tła z kanałem alfa).

Uwaga / Notatka

Specyfikację formatu serializowanego pisma odkowego (ISF) można pobrać z Centrum pobierania Microsoft.

W tym kroku podłączymy przyciski Zapisz i Załaduj znajdujące się obok paska narzędzi tuszu.

W przykładzie:

  1. Otwórz plik MainPage.xaml.
  2. Znajdź kod oznaczony tytułem tego kroku ("<-- Krok 7: Zapisywanie i ładowanie atramentu -->").
  3. Usuń komentarz z następujących wierszy.
    <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. Otwórz plik MainPage.xaml.cs.
  2. Znajdź kod oznaczony tytułem tego kroku ("// Krok 7: Zapisz i wczytaj atrament").
  3. Usuń komentarz z następujących wierszy.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Uruchom aplikację i narysuj coś.
  2. Wybierz przycisk Zapisz i zapisz rysunek.
  3. Wymaż tusz lub uruchom aplikację ponownie.
  4. Wybierz przycisk Załaduj i otwórz plik atramentu, który właśnie zapisałeś.

Wyzwanie: Użyj schowka, aby skopiować i wkleić pociągnięcia pióra

Windows Ink obsługuje również kopiowanie i wklejanie pociągnięć za pomocą rysika do i z schowka.

Aby uzyskać więcej informacji na temat korzystania ze schowka z Windows Ink, zobacz Store and retrieve Windows Ink stroke data (Przechowywanie i pobieranie danych pociągnięć Windows Ink).

Podsumowanie

Gratulacje, ukończyłeś samouczek Wejście: obsługa atramentu w aplikacji systemu Windows ! Pokazaliśmy ci podstawowy kod wymagany do obsługi rysika w aplikacjach systemu Windows oraz jak zapewnić niektóre z bogatszych środowisk użytkownika obsługiwanych przez platformę Windows Ink.

Samples

  • Last updated on