[UWP][InkCanvas] 文字を認識する

InkCanvasでは文字の認識をすることができます。

文字を認識するにはInkRecognizerContainerクラスを使用します。

RecognizerAsyncメソッドを使用するとInkCanvasに記述した文字の認識結果を取得することができます。このメソッドの引数にはInkCanvasのInkPresenter.StrokeContainerと認識する線を指定します。InkRecognitionTarget.Allを指定すると書かれたのすべてを認識範囲とします。

あとは、認識結果を1文字ずつ取り出します。

コード例と実行結果を以下に示します。

private async void btnRecognize_Click(object sender, RoutedEventArgs e)
{
    var recognizer = new InkRecognizerContainer();
    var result = await recognizer.RecognizeAsync(
        inkCanvas.InkPresenter.StrokeContainer, InkRecognitionTarget.);

    textBlock.Text = result.Select(x => x.GetTextCandidates().First()).Aggregate((x, y) => x + y);
}

文字の認識

 

[UWP][InkCanvas] 保存した画像を表示する

前回の記事で、描画した線をファイルに保存しました。

保存した画像ファイルを開くにはInkCanvasのInkPresenter.StrokeContainer.LoadAsync()メソッドを使用します。

コード例は以下の通りです。

以下にサンプルコードを示します

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".png");
Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
if (null != file)
{
    using (var stream = await file.OpenSequentialReadAsync())
    {
        try
        {
            await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(stream);
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }
    }
}

[UWP][InkCanvas] 描画された線を保存する

InkCanvasに描画した線を画像として保存することができます。

保存をする場合は、inkCanvas.InkPresenter.StrokeContainer.SaveAsync()メソッドを使用します。

以下に保存をする際のサンプルコードを示します。

この例では描画した線をpngファイルとして保存します。

var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
savePicker.FileTypeChoices.Add("Png", new System.Collections.Generic.List<string> { ".png" });

Windows.Storage.StorageFile file = await savePicker.PickSaveFileAsync();
if (null != file)
{
    try
    {
        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

[UWP][InkCanvas] 描画された線があるかを確認する

InkCanvasコントロール上に描画された線があるかどうかを確認するにはInkPresenter.StrokeContainer.GetStrokes().Countプロパティを使用します。

このプロパティが0の場合は線が1本も描画されていません。

逆に1以上であれば描画された線があることがわかります。

サンプルコードを以下に示します。

if (inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count > 0)
{
  // 描画された線がある場合の処理
}
else
{
  // 描画された線がない場合の処理
}

[UWP][InkCanvas] 描画した線を削除する

InkCanvasで描画した線を削除するにはInkPresenter.InputProcessingConfiguration.ModeプロパティにInkInputProcessingMode.Erasingをセットします。

また描画できるようにする場合にはInkInputProcessingMode.Inkingをセットします。

前回作成したInkCanvasのサンプルにチェックボックスを1つ配置してNameプロパティをchkErasingにし、以下のコードを追加してください。

// チェックされた場合
private void chkErase_Checked(object sender, RoutedEventArgs e)
{
    inkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Erasing;
}

// チェックが外された場合
private void chkErase_Unchecked(object sender, RoutedEventArgs e)
{
    inkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Inking;
}

 

以上で、描画した線を消せるようになります。

線を消したい場合は、消したい線を横切るようにマウスでドラッグするか、タッチで指をスライドさせます。