背水一战 Windows 10 (62) - 控件（媒体类）: InkCanvas 保存和加载, 手写识别

最新推荐文章于 2024-03-27 01:00:00 发布

weixin_34174132

最新推荐文章于 2024-03-27 01:00:00 发布

阅读量277

点赞数

文章标签： ui

原文: 背水一战 Windows 10 (62) - 控件（媒体类）: InkCanvas 保存和加载, 手写识别

[源码下载]

背水一战 Windows 10 (62) - 控件（媒体类）: 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();
        }
    }
}