在UWP开发中,微软提供了一个新型的InkCanvas控件用来让用户能书写墨迹,在新版的Edga浏览器中微软自己也用到了该控件使用户很方便的可以在web上做笔记。
InkCanvas控件使用很简单,从工具箱里拖出一个InkCanvas控件即可,InkCanvas有个属性叫InkPresenter,通过它我们可以多样化的设置我们的画笔属性,InkPresenter里面有几个重要的属性:
// 获取或设置输入数据用于从中提取 InkStroke 的输入设备类型。 public CoreInputDeviceTypes InputDeviceTypes { get; set; } // 获取 InkCanvas 控件上的 InkStroke 的行为。例如,墨迹、清除或选择。 public InkInputProcessingConfiguration InputProcessingConfiguration { get; } // 获取或设置是否已启用输入以进行墨迹书写。 public System.Boolean IsInputEnabled { get; set; } // 获取或设置 InkStrokeContainer 对象以管理 InkCanvas 控件上的一个或多个 InkStroke 对象的输入、处理和操作。 public InkStrokeContainer StrokeContainer { get; set; } // 从关联的 InkCanvas 控件获取笔划墨迹输入。 public InkStrokeInput StrokeInput { get; } // 设置 InkCanvas 控件上一个或多个接触点的墨迹书写行为。 public void SetPredefinedConfiguration(InkPresenterPredefinedConfiguration value); // 指定渲染新的 InkStroke 时 InkCanvas 控件所使用的 InkDrawingAttributes。 public void UpdateDefaultDrawingAttributes(InkDrawingAttributes value);
接下来我们做一个画图板,功能要实现墨迹书写,墨迹擦除,墨迹保存,墨迹加载,手写识别。
墨迹书写
前台声明一个InkCanvas控件:
<InkCanvas x:Name="InkCanvas" />
后台设置下Ink的墨笔属性:
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//设置输入类型为触控输入和鼠标输入
InkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
//创建一个新的画笔属性(此步可省略,省略后采用默认画笔)
var attr = new InkDrawingAttributes
{
Color = Colors.Red, //颜色
IgnorePressure = true, //是否忽略数字化器表面上的接触压力
PenTip = PenTipShape.Rectangle, //笔尖类型设置
Size = new Size(, ), //画笔粗细
PenTipTransform = Matrix3x2.CreateRotation((float)( * Math.PI / )) //笔尖形状矩阵
};
//更新画笔
InkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(attr);
}
墨迹擦除
墨迹擦除只需要设置画笔行为为橡皮擦即可
InkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Erasing;
墨迹保存
private async void Btn_Save_OnClick(object sender, RoutedEventArgs e)
{
//声明一个流来存储墨迹信息
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());
await reader.LoadAsync((uint)fileStream.Size); byte[] pixels = new byte[fileStream.Size]; reader.ReadBytes(pixels); return pixels;
}
墨迹加载
private async void Btn_load_OnClick(object sender, RoutedEventArgs e)
{
//创建一个文件选择器
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);
}
}
手写识别
手写识别是指通过用户使用画笔写出的墨迹,我们可以识别出是什么内容,主要是通过InkRecognizerContainer类来完成的。
InkRecognizerContainer类有几个主要方法:
// 获取 InkRecognizer 对象的集合。
public IReadOnlyList<InkRecognizer> GetRecognizers(); // 对一个或多 InkStroke 对象执行手写识别。
public IAsyncOperation<IReadOnlyList<InkRecognitionResult>> RecognizeAsync(InkStrokeContainer strokeCollection, InkRecognitionTarget recognitionTarget); // 设置用于手写标识的默认 InkRecognizer。
public void SetDefaultRecognizer(InkRecognizer recognizer);
具体使用方法:
private async void btnOcr_OnClick(object sender, RoutedEventArgs e)
{
//手写识别
var container = new InkRecognizerContainer();
//使用墨迹识别
var result = await container.RecognizeAsync(InkCanvas.InkPresenter.StrokeContainer, InkRecognitionTarget.All);
//获取识别结果 InkRecognitionResult 对象中还能获取候选字
var txt = result[].GetTextCandidates()[]; var dia = new ContentDialog()
{
Content = new TextBlock() { Text = txt },
PrimaryButtonText = "ok",
IsPrimaryButtonEnabled = true };
dia.PrimaryButtonClick += (s, a) =>
{
dia.Hide();
};
await dia.ShowAsync();
}
Ink Toolbar control
上面介绍了Ink控件的基本使用方法,其中最主要的就是画笔属性的设置,为了方便大家的开发,微软还提供了一个辅助Control叫做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上即可。
效果图:
推荐一个UWP开发群:53078485 大家可以进来一起学习