Kolumne XAML Expertise

XAML-Tipp: UWP – Schrifterkennung beim „InkCanvas“-Steuerelement
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Die Schrifterkennung beim InkCanvas-Steuerelement“

Das InkCanvas-Steuerelement bietet bereits ideale Unterstützung für den Digitalstift, um in einem festgelegten Bereich die Zeichnung entgegenzunehmen. Für das Auswerten der Zeichnungen sind zusätzliche Windows-Ink-API Funktionen nötig, zum Beispiel der InkAnalyzer für die Schrifterkennung.

UWP – Schrifterkennung beim „InkCanvas“-Steuerelement

Auf der Oberfläche benötigen wir einen TextBlock, InkCanvas sowie einen Button (Listing 1). Wenn auf den Button geklickt wird, soll der in Handschrift geschriebene Text erkannt werden. Dazu wird von InkCanvas jeder gezeichnete Wert als Stroke (Strich) hinterlegt. Am Ende befinden sich alle Strokes im StrokeContainer. Diesen übergibt man einer InkAnalyzer-Instanz. Hier wird nach dem Aufruf der AnalyzeAsync-Methode der Zusammenhang in Nodes (Knoten) ausgewertet. Daraus lassen wir alle erkannten Texte suchen. In einer Schleife wird dann jeder Text zusammengeführt und auf das TextBlock-Steuerelement geschrieben. In Listing 2 ist der gesamte Sourcecode dazu aufgelistet und in Abbildung 1 sieht man das fertige Ergebnis.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="100" />
  </Grid.RowDefinitions>
  <TextBlock x:Name="Header"
               Text="Basic ink sample"
               Style="{ThemeResource HeaderTextBlockStyle}"
               Margin="10,0,0,0" />
  <Grid Grid.Row="1">
    <Border BorderThickness="10" BorderBrush="Red" />
    <InkCanvas x:Name="inkCanvas" />
  </Grid>
  <Button Grid.Row="2" 
    HorizontalAlignment="Center"
    Click="OnButtonClick">Schrifterkennung</Button>
</Grid>
private async void OnButtonClick(object sender, RoutedEventArgs e)
{
  InkAnalyzer inkAnalyzer = new InkAnalyzer();

  inkAnalyzer.AddDataForStrokes(inkCanvas.InkPresenter.StrokeContainer.GetStrokes());
  var inkAnalysisResults = await inkAnalyzer.AnalyzeAsync();

  var inkWordNodes = inkAnalyzer.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);

  Header.Text = "";

  foreach (InkAnalysisInkWord wordNode in inkWordNodes)
  {
    Header.Text += wordNode.RecognizedText;
  }
}
Abb. 1: Die Schrifterkennung beim „InkCanvas“-Steuerelement

Abb. 1: Die Schrifterkennung beim „InkCanvas“-Steuerelement

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -