背水一戰 Windows 10 (62) - 控制項（媒體類）: InkCanvas 保存和載入, 手寫識別

背水一戰 Windows 10 之控制項（媒體類）: InkCanvas 保存和載入, InkCanvas 手寫識別 ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（媒體類）

InkCanvas 保存和載入
InkCanvas 手寫識別

示例
1、演示 InkCanvas 塗鴉板的保存和載入
Controls/MediaControl/InkCanvasDemo3.xaml

<Page
    x:Class="Windows10.Controls.MediaControl.InkCanvasDemo3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.MediaControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Border Background="White" Width="480" Height="320" Margin="5" HorizontalAlignment="Left">
                <!--
                    InkCanvas - 塗鴉板控制項
                -->
                <InkCanvas Name="inkCanvas" />
            </Border>

            <Button Name="save" Content="保存到文件" Margin="5" Click="save_Click" />
            <Button Name="load" Content="從文件讀取" Margin="5" Click="load_Click" />

        </StackPanel>
    </Grid>
</Page>

Controls/MediaControl/InkCanvasDemo3.xaml.cs

/*
 * InkCanvas - 塗鴉板控制項（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     InkPresenter - 獲取 InkPresenter 對象
 *        
 * InkPresenter - 塗鴉板
 *     StrokeContainer - 返回 InkStrokeContainer 類型的對象
 *     
 * InkStrokeContainer - 用於管理塗鴉
 *     IAsyncOperationWithProgress<UInt32, UInt32> SaveAsync(IOutputStream outputStream) - 保存塗鴉數據
 *     IAsyncActionWithProgress<UInt64> LoadAsync(IInputStream inputStream) - 載入塗鴉數據
 */

using System;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI;
using Windows.UI.Core;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.MediaControl
{
    public sealed partial class InkCanvasDemo3 : Page
    {
        public InkCanvasDemo3()
        {
            this.InitializeComponent();

            inkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

            InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
            drawingAttributes.IgnorePressure = true;
            drawingAttributes.Color = Colors.Red;
            drawingAttributes.Size = new Size(4, 4);
            inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
        }

        private async void save_Click(object sender, RoutedEventArgs e)
        {
            if (inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count == 0)
                return;

            // 用於保存塗鴉數據
            IRandomAccessStream stream = new InMemoryRandomAccessStream();
            await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);

            // 文件保存對話框
            var picker = new FileSavePicker
            {
                SuggestedStartLocation = PickerLocationId.DocumentsLibrary
            };
            picker.FileTypeChoices.Add("ink files", new List<string>() { ".ink" });

            // 彈出文件保存對話框
            var file = await picker.PickSaveFileAsync();
            if (file == null)
                return;

            // 在調用 CompleteUpdatesAsync 之前，阻止對文件的更新
            CachedFileManager.DeferUpdates(file);

            // Stream 轉 byte[]
            DataReader reader = new DataReader(stream.GetInputStreamAt(0));
            await reader.LoadAsync((uint)stream.Size);
            byte[] bytes = new byte[stream.Size];
            reader.ReadBytes(bytes);

            // 寫入文件
            await FileIO.WriteBytesAsync(file, bytes);

            // 保存文件
            await CachedFileManager.CompleteUpdatesAsync(file);
        }

        private async void load_Click(object sender, RoutedEventArgs e)
        {
            // 文件打開對話框
            var picker = new FileOpenPicker
            {
                SuggestedStartLocation = PickerLocationId.DocumentsLibrary
            };
            picker.FileTypeFilter.Add(".ink");

            // 彈出文件打開對話框
            var pickedFile = await picker.PickSingleFileAsync();
            if (pickedFile != null)
            {
                // 讀取塗鴉數據
                IRandomAccessStreamWithContentType stream = await pickedFile.OpenReadAsync();

                // 載入指定的塗鴉數據
                await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(stream);
            }
        }
    }
}

2、演示 InkCanvas 塗鴉板的手寫識別
Controls/MediaControl/InkCanvasDemo4.xaml

<Page
    x:Class="Windows10.Controls.MediaControl.InkCanvasDemo4"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.MediaControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Border Background="White" Width="480" Height="320" Margin="5" HorizontalAlignment="Left">
                <!--
                    InkCanvas - 塗鴉板控制項
                -->
                <InkCanvas Name="inkCanvas" />
            </Border>

            <Button Name="recognize" Content="手寫識別" Margin="5" Click="recognize_Click" />

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/MediaControl/InkCanvasDemo4.xaml.cs

/*
 * InkCanvas - 塗鴉板控制項（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     InkPresenter - 獲取 InkPresenter 對象
 *        
 * InkRecognizerContainer - 用於管理手寫識別
 *     GetRecognizers() - 獲取 InkRecognizer 對象集合
 *     SetDefaultRecognizer(InkRecognizer recognizer) - 將指定的 InkRecognizer 設置為預設的手寫識別器
 *     RecognizeAsync(InkStrokeContainer strokeCollection, InkRecognitionTarget recognitionTarget) - 識別，返回 InkRecognitionResult 對象集合
 *         InkStrokeContainer strokeCollection - 需要識別的 InkStrokeContainer 對象
 *         InkRecognitionTarget recognitionTarget - 需要識別的目標
 *             All - 識別全部塗鴉數據
 *             Selected - 識別被選中的塗鴉數據
 *             Recent - 識別 InkStroke 的 Recognized 為 false 的塗鴉數據
 *             
 * InkRecognizer - 手寫識別器
 *     Name - 手寫識別器的名字（只讀）
 * 
 * InkRecognitionResult - 手寫識別結果
 *     BoundingRect - 獲取用於識別的塗鴉的 Rect 區域
 *     GetStrokes() - 獲取用於識別的 InkStroke 對象集合
 *     GetTextCandidates() - 獲取識別結果，這是一個候選結果列表
 * 
 * InkPresenter - 塗鴉板
 *     StrokeContainer - 返回 InkStrokeContainer 類型的對象
 *     
 * InkStrokeContainer - 用於管理塗鴉
 *     UpdateRecognitionResults(IReadOnlyList<InkRecognitionResult> recognitionResults) - 將指定的識別結果通知給 InkStrokeContainer（此時 InkStrokeContainer 中被識別的 InkStroke 的 Recognized 將被標記為 true）
 *         如果使用的是 InkRecognitionTarget.All 則 InkStrokeContainer 中的所有的 InkStroke 的 Recognized 將被標記為 true
 *         如果使用的是 InkRecognitionTarget.Selected 則 InkStrokeContainer 中的被選中的 InkStroke 的 Recognized 將被標記為 true
 *     GetRecognitionResults() - 返回之前通過 UpdateRecognitionResults 方法設置的數據
 *     
 * InkStroke - 塗鴉對象（這是一次的塗鴉對象，即滑鼠按下後移動然後再抬起後所繪製出的塗鴉）
 *     Recognized - 此 InkStroke 是否被識別了
 *     Selected - 此 InkStroke 是否被選中了
 */

using System;
using System.Collections.Generic;
using System.Diagnostics;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Core;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.MediaControl
{
    public sealed partial class InkCanvasDemo4 : Page
    {
        public InkCanvasDemo4()
        {
            this.InitializeComponent();

            inkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;

            InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
            drawingAttributes.IgnorePressure = true;
            drawingAttributes.Color = Colors.Red;
            drawingAttributes.Size = new Size(4, 4);
            inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
        }

        private async void recognize_Click(object sender, RoutedEventArgs e)
        {
            if (inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count == 0)
                return;

            InkRecognizerContainer container = new InkRecognizerContainer();

            lblMsg.Text = "手寫識別器: ";
            lblMsg.Text += Environment.NewLine;
            // 獲取當前支持的手寫識別器列表，如果有多個的話可以通過 SetDefaultRecognizer 方法來指定預設的手寫識別器
            IReadOnlyList<InkRecognizer> recognizers = container.GetRecognizers();
            foreach (InkRecognizer ir in recognizers)
            {
                lblMsg.Text += ir.Name;
                lblMsg.Text += Environment.NewLine;
            }

            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "識別結果: ";
            lblMsg.Text += Environment.NewLine;
            IReadOnlyList<InkRecognitionResult> result = await container.RecognizeAsync(inkCanvas.InkPresenter.StrokeContainer, InkRecognitionTarget.All);
            foreach (string textCandidate in result[0].GetTextCandidates())
            {
                lblMsg.Text += textCandidate;
                lblMsg.Text += Environment.NewLine;
            }

            // 將識別結果通知給 InkStrokeContainer
            inkCanvas.InkPresenter.StrokeContainer.UpdateRecognitionResults(result);

            // 識別結果通知給 InkStrokeContainer 後，被識別的 InkStroke 的 Recognized 將被標記為 true
            // 如果在識別的時候使用的是 InkRecognitionTarget.All 則所有的 InkStroke 的 Recognized 將被標記為 true
            // 如果在識別的時候使用的是 InkRecognitionTarget.Selected 則被選中的 InkStroke 的 Recognized 將被標記為 true
            IReadOnlyList<InkStroke> strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
            foreach (InkStroke stroke in strokes)
            {
                Debug.WriteLine("stroke.Recognized: " + stroke.Recognized);
            }

            // 這個獲取到的就是之前通過 InkStrokeContainer 方式設置的數據
            result = inkCanvas.InkPresenter.StrokeContainer.GetRecognitionResults();
        }
    }
}

OK
[源碼下載]