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. 201521123061 《Java程序设计》第六周学习总结

    201521123061 <Java程序设计>第六周学习总结 ***代码阅读:Child压缩包内 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核 ...

  2. 201521123109《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 ...

  3. 201521123101 《Java程序设计》第1周学习总结

    1. 本周学习总结 在学习Java之前要做好准备工作,了解Java从研发后开始如何一步步完善,其与C++.C语言的异同,然后下载JDK.Eclipse.Notepad等软件,以便于未来的学习. 2. ...

  4. ubuntu下chromium浏览器flash插件安装

    ubuntu下chromium浏览器默认是不支持flash的,在新立德软件包中搜索flash得到的“Adobe Flash Player plugin installer”也没有什么卵用,因为装完以后 ...

  5. 201521123027 <java程序设计>第九周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2.书面作业 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什 ...

  6. 201521123087《Java程序设计》第12周学习总结

    1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 1 ...

  7. sublime列显示控制

    Shift+右键拖拽或者Ctrl+左键单击选择多个位置

  8. java基础知识5--集合类(Set,List,Map)和迭代器Iterator的使用

    写的非常棒的一篇总结: http://blog.csdn.net/speedme/article/details/22398395#t1 下面主要看各个集合如何使用迭代器Iterator获取元素: 1 ...

  9. GitHub开源:升讯威微信营销系统(第三方微信平台)完整源代码

    GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction 升讯威微信营销系统开发实践系列升讯威微信营销系统开发实践:(1)功能设计与架构设 ...

  10. String类的源码分析

    之前面试的时候被问到有没有看过String类的源码,楼主当时就慌了,回来赶紧补一课. 1.构造器(构造方法) String类提供了很多不同的构造器,分别对应了不同的字符串初始化方法,此处从源码中摘录如 ...