win10 uwp 使用油墨输入 保存,修改,加载inkUWP 手写清理笔画手写识别无法识别手写语音

现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。现在edge,OneNote这些都有使用InkCanvas,我们可以在我们的手机上手写,我们也可以在我们电脑上用鼠标写,然后我们可以把我们写的保存图片,可以识别文字。

win10 可以很简单在我们的 app 使用自然输入,这篇文章主要翻译https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keyboard-mouse-and-touch-with-natural-input-10-by-10/ 一些内容是参见陈染大神

做法简单,我们有垃圾微软的InkCanvas ,这个控件可以手写,需要我们在页面使用他:

<Grid>
  <InkCanvas x:Name="ink_canvas"/>
</Grid>

然后我们就可以写出我们的字,试试使用鼠标在程序写字。下面的不是我写的,是垃圾微软的。

InkPresenter可以获取 InkCanvas 基础对象,可以设置输入为笔,触摸,鼠标,上面那个是从微软拿来,因为我是在用电脑。

为了画出上面的图,我们可以设置ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse;如果我们有鼠标还要在手机运行,我们可以来|然后写手机,这样就可以使用多个方法。

        public MainPage()
        {
            this.InitializeComponent();
            ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse;
        }

如果我们需要输入笔和鼠标 ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse|CoreInputDeviceTypes.Pen; ,关于这个枚举,参见C#枚举中使用Flags特性

画出的线我们也可以设置 线大小,颜色,请看代码

            InkDrawingAttributes attribute = ink_canvas.InkPresenter.CopyDefaultDrawingAttributes();

            attribute.Color = Windows.UI.Colors.Crimson;//颜色
            attribute.PenTip = PenTipShape.Rectangle;//笔尖类型设置
            attribute.PenTipTransform = System.Numerics.Matrix3x2.CreateRotation((float)Math.PI / 4);////笔尖形状矩阵
            attribute.Size = new Size(2, 6);//画笔粗细

            ink_canvas.InkPresenter.UpdateDefaultDrawingAttributes(attribute);

保存,修改,加载ink

我们可以给用户选择他当前使用橡皮擦、铅笔还是他需要的。 我们给用户按钮铅笔,橡皮擦

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <InkCanvas x:Name="ink_canvas" Grid.RowSpan="2" />
            <CommandBar Grid.Row="1">
                <AppBarButton Icon="Edit" Click="pencil"/>
                <AppBarButton Click="eraser">
                    <AppBarButton.Icon>
                        <BitmapIcon UriSource="ms-appx:///Assets/eraser_128px_1197233_easyicon.net.ico"/>
                    </AppBarButton.Icon>
                </AppBarButton>
            </CommandBar>
        </Grid>
    </Grid>

点击时,修改笔为橡皮擦或其他的,只需要设置当前的笔

        private void eraser(object sender, RoutedEventArgs e)
        {
            ink_canvas.InkPresenter.InputProcessingConfiguration.Mode =
    InkInputProcessingMode.Erasing;
        }

        private void pencil(object sender, RoutedEventArgs e)
        {
            ink_canvas.InkPresenter.InputProcessingConfiguration.Mode =
                InkInputProcessingMode.Inking;
        }

点击橡皮可以擦掉,但是有些诡异,大家可以自己去写,自己去玩,就知道

接下来告诉大家,如何 保存墨迹

            FileSavePicker picker = new FileSavePicker
            {
                SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary
            };//建议我们选择在图片,其实这个不用写
            picker.FileTypeChoices.Add("Gif", new
            System.Collections.Generic.List<string> { ".gif" });//类型gif,其实是isf
            //名称
            picker.SuggestedFileName = "http://blog.csdn.net/lindexi_gd";
            StorageFile file = await picker.PickSaveFileAsync();
            if (null != file)
            {
                try
                {
                    using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                    {
                        await ink_canvas.InkPresenter.StrokeContainer.SaveAsync(stream);
                    }
                }
                catch (Exception ex)
                {
                    //[http://blog.csdn.net/lindexi_gd](http://blog.csdn.net/lindexi_gd )
                }
            }

陈染大神的保存,我们上面保存是 gif

 //声明一个流来存储墨迹信息
    IRandomAccessStream stream = new InMemoryRandomAccessStream();
    //保存墨迹信息到流
    //拿到流了就可以随意处置墨迹了,可以保持到App内部 也可以保存为文件,我们直接保存为文件
    await InkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
    //创建一个文件保存对话框
    var picker = new Windows.Storage.Pickers.FileSavePicker
    {
        SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary
    };
    //文件类型
    picker.FileTypeChoices.Add("INK files", new List<string>() { ".ink" });
    //弹出保存对话框
    var file = await picker.PickSaveFileAsync();
    if (file == null) return;
 
    CachedFileManager.DeferUpdates(file);
    //将流转为byte
    var bt = await ConvertImagetoByte(stream);
    //写入文件
    await Windows.Storage.FileIO.WriteBytesAsync(file, bt);
    //保存
    await CachedFileManager.CompleteUpdatesAsync(file);

private async Task<byte[]> ConvertImagetoByte(IRandomAccessStream fileStream)
{
    //IRandomAccessStream fileStream = await image.OpenAsync(FileAccessMode.Read);
    var reader = new Windows.Storage.Streams.DataReader(fileStream.GetInputStreamAt(0));
    await reader.LoadAsync((uint)fileStream.Size);
 
    byte[] pixels = new byte[fileStream.Size];
 
    reader.ReadBytes(pixels);
 
    return pixels;
}

保存的东西可以加载,需要加载第一步是获得文件

           //创建一个文件选择器
           var picker = new Windows.Storage.Pickers.FileOpenPicker
           {
               SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary
           };
           //规定文件类型
           picker.FileTypeFilter.Add(".ink");
           //显示选择器
           var pickedFile = await picker.PickSingleFileAsync();
           if (pickedFile != null)
           {
               var file = await pickedFile.OpenReadAsync();
               //加载墨迹
               await InkCanvas.InkPresenter.StrokeContainer.LoadAsync(file);
           }

如何获得文件参见:win10 uwp 保存用户选择文件夹

UWP 手写清理笔画

我们写完一个字需要清理我们笔画,可以使用clear

ink.InkPresenter.StrokeContainer.Clear();

手写识别

    //手写识别
    var container = new InkRecognizerContainer();
    //使用墨迹识别
    var result = await container.RecognizeAsync(InkCanvas.InkPresenter.StrokeContainer, InkRecognitionTarget.All);
    //获取识别结果  InkRecognitionResult 对象中还能获取候选字
    var txt = result[0].GetTextCandidates()[0];

手写识别来自 http://www.wangchenran.com/win10uwp开发-ink.html

但是我们每次需要使用InkCanvas需要使用很多按钮,微软给了我们Ink Toolbar 可以简单使用。 扩展下载:https://visualstudiogallery.msdn.microsoft.com/58194dfe-df44-4c4e-893a-1eca40675269

首先安装该工具扩展,然后引用InkToolbar Control.dll,接着在View中声明控件:

xmlns:ink="using:Microsoft.Labs.InkToolbarControl"
 
 
<ink:InkToolbar x:Name="bar_InkTool"
 
 
TargetInkCanvas="{x:Bind InkCanvas}"
 
 
VerticalAlignment="Top" HorizontalAlignment="Right" />

TargetInkCanvas属性bind到要设置的InkCanvas上即可。

无法识别手写

首先我们手写需要安装。

如果我们没法识别,那么检查设置时间语言,检查安装语言,下载手写

那么我们可以使用

            var container = new InkRecognizerContainer();
            foreach (var temp in container.GetRecognizers())
            {
                Text.Text += temp.Name + "\r\n";
            }

来看我们安装了哪些,有安装才能使用

源代码 https://github.com/lindexi/UWP/tree/master/uwp/src/Ink

语音

现在很多人都是使用语音输入,把文字转为语音我已经写了一篇博客。

我们需要先有麦克风,需要权限

首先我们需要设置语言,因为需要的识别,可以使用 web 的接口,所以就需要添加麦克风、网络的权限。

下面的代码就是告诉用户需要输入的内容,然后进行转换。

            Language language = SpeechRecognizer.SystemSpeechLanguage;
            speechRecognizer = new SpeechRecognizer(language);

            // 使用web
            SpeechRecognitionTopicConstraint web_search_grammar = new SpeechRecognitionTopicConstraint(SpeechRecognitionScenario.WebSearch, "webSearch"); 
            speechRecognizer.Constraints.Add(web_search_grammar);

            speechRecognizer.UIOptions.AudiblePrompt = "你想要说什么";
            speechRecognizer.UIOptions.ExampleText = "http://blog.csdn.net/lindexi_gd";

            SpeechRecognitionCompilationResult compilation_result = await speechRecognizer.CompileConstraintsAsync();
            if (compilation_result.Status == SpeechRecognitionResultStatus.Success)
            {
                // 识别
                IAsyncOperation<SpeechRecognitionResult> recognition_operation = speechRecognizer.RecognizeWithUIAsync();
                SpeechRecognitionResult speech_recognition_result = await recognition_operation;
                SpeechRecognitionConfidence confidence = speech_recognition_result.Confidence;//置信度
                string text = speech_recognition_result.Text;//获取语音
            }

语音:https://msdn.microsoft.com/zh-cn/library/windows/apps/dn596121.aspx

http://stackoverflow.com/questions/32153880/how-to-render-inkcanvas-to-an-image-in-uwp-windows-10-application/32551620

https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keyboard-mouse-and-touch-with-natural-input-10-by-10/


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信安之路

我是如何找到 Google Colaboratory 中的一个 xss 漏洞的

在本文中,我来讲讲我碰到的一个有趣的 XSS。2018 年 2 月,我在 google 的一个网络应用中发现了这个 XSS。这篇文章我不希望只是直接写出这个 X...

1200
来自专栏腾讯NEXT学位

React 16 加载性能优化指南(下)

| 导语 本篇干货是接本周三React 16 加载性能优化指南(上)推文。 关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是...

4342
来自专栏進无尽的文章

扒虫篇- Bug日志 Ⅷ

不执行的原因是 在VC中使用这个ImageUploaderManager时,需要设置为全局变量,如果是局部变量的话,很快会被销毁掉,其中的代理自然不会执行了。

1973
来自专栏JavaEdge

JDK7新特性概览JSR292:支持动态类型语言(InvokeDynamic)G1 垃圾回收器(Garbage-First Collector)JSR334:小的语言改进(Project Coin)核

73410
来自专栏张俊红

爬虫进阶(二)

总第66篇 在前面的几篇推文中我们分享了最基础的爬虫入门,以及基于AJAX的爬虫入门,这篇我们分享关于如何利用selenium对目标网页进行数据爬取的。 01|...

3768
来自专栏phodal

让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License...

7306
来自专栏DeveWork

【译】WordPress 中的50个过滤器(1):何为过滤器?

这篇文章是来自tutsplus 上系列文章《50 Filters of WordPress》的开篇文,系列文章还在陆续发表中。Jeff 打算借助Github 进...

1919
来自专栏黑泽君的专栏

Notepad2替代系统自带的记事本

事情是这样的,平时我经常把一些文字复制到记事本中编辑好了再复制到目标位置,可以在系统自带的记事本中替换删除一些内容,记事本小巧,占用很少的资源,我很喜欢;但今天...

4462
来自专栏Java3y

移动商城第一篇【搭建项目环境+数据模型】

前言 本次该项目使用的技术如下: ? 这里写图片描述 搭建Oracle数据库环境 本次我们用Oracle作为我们的服务器,我们一般开发并不是把数据表放在我们练习...

5049
来自专栏张戈的专栏

SEO分享:彻底禁止搜索引擎抓取/收录动态页面或指定路径的方法

最近张戈博客收录出现异常,原因并不明朗。我个人猜测存在如下几个直接原因: 更换主题,折腾时带来过多错误页面或间歇性访问错误; 直接线上折腾 Nginx 缓存和...

4756

扫码关注云+社区

领取腾讯云代金券