# win10 uwp 使用油墨輸入 現在很多人還是使用筆和紙來記錄，那么可以在電腦輸入方式和之前使用的方式一樣，很多用戶覺得會方便。在win10 我們有一個簡單的方法去讓用戶輸入，`InkCanvas`。現在edge，OneNote這些都有使用`InkCanvas`,我們可以在我們的手機上手寫，我們也可以在我們電腦上用鼠標寫，然后我們可以把我們寫的保存圖片，可以識別文字。 <!--more--> <div id="toc"></div> win10 可以很簡單在我們的 app 使用自然輸入，這篇文章主要翻譯[https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keyboard-mouse-and-touch-with-natural-input-10-by-10/](https://blogs.windows.com/buildingapps/2015/09/08/going-beyond-keyboard-mouse-and-touch-with-natural-input-10-by-10/) 一些內容是參見[陳染大神](http://www.wangchenran.com/win10uwp%E5%BC%80%E5%8F%91-ink.html) 做法簡單，我們有垃圾微軟的`InkCanvas `，這個控件可以手寫，需要我們在頁面使用他： ```xml <Grid> <InkCanvas x:Name="ink_canvas"/> </Grid> ``` 然后我們就可以寫出我們的字，試試使用鼠標在程序寫字。下面的不是我寫的，是垃圾微軟的。  `InkPresenter`可以獲取 InkCanvas 基礎對象，可以設置輸入為筆，觸摸，鼠標，上面那個是從微軟拿來，因為我是在用電腦。 為了畫出上面的圖，我們可以設置`ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse;`如果我們有鼠標還要在手機運行，我們可以來`|`然后寫手機，這樣就可以使用多個方法。 ```csharp public MainPage() { this.InitializeComponent(); ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse; } ```  如果我們需要輸入筆和鼠標 `ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse|CoreInputDeviceTypes.Pen;` ，關于這個枚舉，參見[C＃枚舉中使用Flags特性](http://lindexi.oschina.io/lindexi//post/C-%E6%9E%9A%E4%B8%BE%E4%B8%AD%E4%BD%BF%E7%94%A8Flags%E7%89%B9%E6%80%A7/) 畫出的線我們也可以設置 線大小，顏色，請看代碼 ```csharp 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 我們可以給用戶選擇他當前使用橡皮擦、鉛筆還是他需要的。 我們給用戶按鈕鉛筆，橡皮擦 ```xml <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> ``` 點擊時，修改筆為橡皮擦或其他的，只需要設置當前的筆 ```csharp 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; } ``` 點擊橡皮可以擦掉，但是有些詭異，大家可以自己去寫，自己去玩，就知道 接下來告訴大家，如何 保存墨跡 ```csharp 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 } } ``` 陳染大神的保存，我們上面保存是 gif ```csharp //聲明一個流來存儲墨跡信息 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; } ``` 保存的東西可以加載，需要加載第一步是獲得文件 ```csharp //創建一個文件選擇器 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 保存用戶選擇文件夾](http://lindexi.oschina.io/lindexi//post/win10-uwp-%E4%BF%9D%E5%AD%98%E7%94%A8%E6%88%B7%E9%80%89%E6%8B%A9%E6%96%87%E4%BB%B6%E5%A4%B9/) ## UWP 手寫清理筆畫 我們寫完一個字需要清理我們筆畫，可以使用clear ```csharp ink.InkPresenter.StrokeContainer.Clear(); ``` ## 手寫識別 ```csharp //手寫識別 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](http://www.wangchenran.com/win10uwp開發-ink.html) 但是我們每次需要使用`InkCanvas`需要使用很多按鈕，微軟給了我們`Ink Toolbar `可以簡單使用。 擴展下載：[https://visualstudiogallery.msdn.microsoft.com/58194dfe-df44-4c4e-893a-1eca40675269](https://marketplace.visualstudio.com/items?itemName=InkToolbarControlTeam.InkToolbarcontrolforUniversalWindowsapps)  首先安裝該工具擴展，然后引用InkToolbar Control.dll，接著在View中聲明控件: ```csharp xmlns:ink="using:Microsoft.Labs.InkToolbarControl" <ink:InkToolbar x:Name="bar_InkTool" TargetInkCanvas="{x:Bind InkCanvas}" VerticalAlignment="Top" HorizontalAlignment="Right" /> ``` `TargetInkCanvas`屬性bind到要設置的`InkCanvas`上即可。 ## 無法識別手寫 首先我們手寫需要安裝。 如果我們沒法識別，那么檢查設置時間語言，檢查安裝語言，下載手寫 那么我們可以使用 ```csharp 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 告訴用戶需要輸入 ```csharp 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/ <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="知識共享許可協議" style="border-width:0" src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議</a>進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名[林德熙](http://blog.csdn.net/lindexi_gd)(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我[聯系](mailto:lindexi_gd@163.com)。