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

现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。现在edge,OneNote这些都有使用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;

画出的线我们也可以设置

            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" });
            //名称
            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
                }
            }

陈染大神的保存

 //声明一个流来存储墨迹信息
    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);
           }

手写识别

    //手写识别
    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可以简单使用。

首先安装该工具扩展,然后引用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上即可。

语音

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

我们需要先有麦克风



首先我们需要设置语言

需要的识别,可以使用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/

win10 uwp 使用油墨输入的更多相关文章

  1. win10 uwp 模拟网页输入

    有时候需要获得网页的 js 执行后的源代码,或者模拟网页输入,如点按钮输入文字. 如果需要实现,那么就需要用 WebView ,使用方法很简单. 首先创建一个 WebView ,接下来的所有输入都需要 ...

  2. 2018-4-12-win10-uwp-使用油墨输入

    title author date CreateTime categories win10 uwp 使用油墨输入 lindexi 2018-04-12 14:19:58 +0800 2018-2-13 ...

  3. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  4. 【Win10 UWP】QQ SDK(二):SDK的回调处理

    上一讲,我们介绍了QQ SDK的使用方法,请看<[Win10 UWP]QQ SDK(一):SDK基本使用方法> 一. 回调的基本形式 从前面的介绍中我们知道,我们的应用和QQ客户端之间需要 ...

  5. 【Win10 UWP】QQ SDK(一):SDK基本使用方法

    每当开发一个应用需要社交分享的应用时,总是心里咯噔一下:到底什么时候分享能加上QQ和微信?除了WP8.0版本的微信SDK,官方似乎从未正面发布过适应时代发展的QQ SDK,就连后台,也没有一个可以创建 ...

  6. win10 uwp MVVM 轻量框架

    如果在开发过程,遇到多个页面之间,需要传输信息,那么可能遇到设计的问题.如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法,那么请看本文.如果因为ViewModel代码越 ...

  7. win10 uwp DataContext

    本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...

  8. win10 uwp 毛玻璃

    毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...

  9. win10 uwp 商业游戏 1.2.1

    上一个游戏已经告诉大家如何写多个游戏,现在继续写这个无聊的游戏 希望大家在看这篇文章之前先看win10 uwp 商业游戏,在这个文章告诉了大家如何创建游戏. 修改数值 可以从上一篇的博客的游戏看到升级 ...

随机推荐

  1. 201521123008《Java程序设计》第八周实验总结

    1. 本周学习总结 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致有些元素没有删 ...

  2. java课程设计-算术运算测试

    1. 团队名称.团队成员介绍 团队名称:cococo 团队成员 组长:网络1514叶城龙 201521123109 组员:网络1514余腾鑫 201521123108 2. 项目git地址 http: ...

  3. 201521123015 《Java程序设计》第10周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 一.inally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 答: 4-2中 ...

  4. php环境和apache服务启动不的解决方法

    安装服务器,可能需要设置apache的端口号,用记事本打开httpd.conf  ctrl+F搜索80,在中间添加数字8 08 0,不解释 在sql中配置好了服务器 服务器安装路径中的WWW文件作为服 ...

  5. 06jQuery-01-基本选择器

    1.jQuery概要 JavaScript的一个库,只是一个jquery-xxx.js的文件,它可以让你写更少的代码,做更多的事. $是著名的jQuery符号.实际上,jQuery把所有功能全部封装在 ...

  6. 源码安装H2O Http 服务端程序到Ubuntu服务器

    首先安装全家桶 apt install -y build-essential zlib1g-dev libpcre3 libpcre3-dev unzip cmake libncurses5-dev ...

  7. 开发中mysql和oracle的区别

    首先就不描述mysql与oracle在整个数据库系统上的区别了,仅从程序员开发的角度来说: 1.主键: mysql一般会用到一个自增的属性,例如设置一个id字段,类型设置为auto increment ...

  8. 一文搞懂各种 Docker 网络 - 每天5分钟玩转 Docker 容器技术(72)

    前面各小节我们先后学习了 Docker Overaly,Macvaln,Flannel,Weave 和 Calico 跨主机网络方案.目前这个领域是百家争鸣,而且还有新的方案不断涌现. 本节将从不同维 ...

  9. zookeeper环境搭建及使用

    本文只讲解搭建步骤,先不讲原理相关知识 一.zookeeper下载地址 本文使用版本为zookeeper-3.4.10.tar.gz 地址:http://mirrors.shuosc.org/apac ...

  10. oracle pl/sql 分页

    一.无返回值的存储过程 古人云:欲速则不达,为了让大家伙比较容易接受分页过程编写,我还是从简单到复杂,循序渐进的给大家讲解.首先是掌握最简单的存储过程,无返回值的存储过程. 案例:现有一张表book, ...