背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板
原文:背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板

[源码下载]

背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板

作者:webabcd

介绍
背水一战 Windows 10 之 控件(媒体类)

  • 通过处理 Pointer 相关事件实现一个简单的涂鸦板
  • InkCanvas 基础知识

示例
1、演示如何通过 Pointer 相关事件的处理,来实现一个简单的涂鸦板
Controls/MediaControl/InkSimple.xaml

<Pagex:Class="Windows10.Controls.MediaControl.InkSimple"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.MediaControl"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><Button Name="btnClear" Content="清除" Click="btnClear_Click" Margin="5" /><Canvas Name="canvas" Background="Blue" Width="800" Height="480" HorizontalAlignment="Left" Margin="5" /></StackPanel></Grid>
</Page>

Controls/MediaControl/InkSimple.xaml.cs

/** 本例用于演示如何通过 Pointer 相关事件的处理,来实现一个简单的涂鸦板*/using System;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;namespace Windows10.Controls.MediaControl
{public sealed partial class InkSimple : Page{// 用于保存触摸点(PointerId - Point)private Dictionary<uint, Point?> _dicPoint;public InkSimple(){this.InitializeComponent();canvas.PointerPressed += canvas_PointerPressed;canvas.PointerMoved += canvas_PointerMoved;canvas.PointerReleased += canvas_PointerReleased;canvas.PointerExited += canvas_PointerExited;_dicPoint = new Dictionary<uint, Point?>();}void canvas_PointerPressed(object sender, PointerRoutedEventArgs e){// 指针按下后,保存此触摸点PointerPoint pointerPoint = e.GetCurrentPoint(canvas);_dicPoint[pointerPoint.PointerId] = pointerPoint.Position;}void canvas_PointerMoved(object sender, PointerRoutedEventArgs e){PointerPoint pointerPoint = e.GetCurrentPoint(canvas);if (_dicPoint.ContainsKey(pointerPoint.PointerId) && _dicPoint[pointerPoint.PointerId].HasValue){Point currentPoint = pointerPoint.Position;Point previousPoint = _dicPoint[pointerPoint.PointerId].Value;// 如果指针移动过程中,两个点间的距离超过 4 则在两点间绘制一条直线,以完成涂鸦if (ComputeDistance(currentPoint, previousPoint) > 4){Line line = new Line(){X1 = previousPoint.X,Y1 = previousPoint.Y,X2 = currentPoint.X,Y2 = currentPoint.Y,StrokeThickness = 5,Stroke = new SolidColorBrush(Colors.Orange),StrokeEndLineCap = PenLineCap.Round};_dicPoint[pointerPoint.PointerId] = currentPoint;canvas.Children.Add(line);}}}void canvas_PointerReleased(object sender, PointerRoutedEventArgs e){// 指针释放后,从字典中删除此 PointerId 的数据PointerPoint pointerPoint = e.GetCurrentPoint(canvas);if (_dicPoint.ContainsKey(pointerPoint.PointerId))_dicPoint.Remove(pointerPoint.PointerId);}void canvas_PointerExited(object sender, PointerRoutedEventArgs e){// 指针离开相当于指针释放
            canvas_PointerReleased(sender, e);}// 清除涂鸦private void btnClear_Click(object sender, RoutedEventArgs e){canvas.Children.Clear();_dicPoint.Clear();}// 计算两个点(Point)之间的距离private double ComputeDistance(Point point1, Point point2){return Math.Sqrt(Math.Pow(point1.X - point2.X, 2) + Math.Pow(point1.Y - point2.Y, 2));}}
}

2、演示 InkCanvas 基础知识
Controls/MediaControl/InkCanvasDemo1.xaml

<Pagex:Class="Windows10.Controls.MediaControl.InkCanvasDemo1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.MediaControl"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><Border Background="White" Width="480" Height="320" Margin="5" HorizontalAlignment="Left"><!--InkCanvas - 涂鸦板控件--><InkCanvas Name="inkCanvas" /></Border><ComboBox Name="drawingColor" Header="Color" SelectedIndex="0" SelectionChanged="UpdateDefaultDrawingAttributes_Handler" Margin="5"><x:String>Red</x:String><x:String>Green</x:String><x:String>Blue</x:String></ComboBox><Slider Name="drawingSize" Foreground="Orange" Background="Red" Style="{StaticResource MySliderStyle}" Header="Size" Minimum="1" Maximum="20" Value="5" ValueChanged="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><CheckBox Name="drawingDrawAsHighlighter" Content="DrawAsHighlighter" IsChecked="False" Checked="UpdateDefaultDrawingAttributes_Handler" Unchecked="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><CheckBox Name="drawingFitToCurve" Content="FitToCurve" IsChecked="True" Checked="UpdateDefaultDrawingAttributes_Handler" Unchecked="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><ToggleSwitch Name="drawingPenTip" Style="{StaticResource MyToggleSwitchStyle}" OnContent="PenTipShape.Circle" OffContent="PenTipShape.Rectangle" IsOn="True" Toggled="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><CheckBox Name="drawingPenTipTransform" Content="通过 PenTipTransform 转换 PenTip 来实现笔尖形状的自定义" IsChecked="False" Checked="UpdateDefaultDrawingAttributes_Handler" Unchecked="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><CheckBox Name="chkErasing" Content="将输入指定为擦除模式" IsChecked="False" Checked="UpdateDefaultDrawingAttributes_Handler" Unchecked="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><CheckBox Name="chkIsInputEnabled" Content="IsInputEnabled" IsChecked="True" Checked="UpdateDefaultDrawingAttributes_Handler" Unchecked="UpdateDefaultDrawingAttributes_Handler" Margin="5" /><Button Name="buttonClear" Content="全部清除"  Click="buttonClear_Click" /></StackPanel></Grid>
</Page>

Controls/MediaControl/InkCanvasDemo1.xaml.cs

/** InkCanvas - 涂鸦板控件(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/)*     InkPresenter - 获取 InkPresenter 对象*        * InkPresenter - 涂鸦板*     IsInputEnabled - 是否启用涂鸦板*     InputDeviceTypes - 输入设备的类型(None, Touch, Pen, Mouse)*     InputProcessingConfiguration.Mode - 输入模式(None, Inking, Erasing)*     CopyDefaultDrawingAttributes() - 获取 InkDrawingAttributes 对象*     UpdateDefaultDrawingAttributes(InkDrawingAttributes value) - 设置 InkDrawingAttributes 对象*     * InkDrawingAttributes - 涂鸦笔尖属性*     IgnorePressure - 是否忽略触摸压力*     Color - 笔尖的颜色*     Size - 笔尖的尺寸(宽和高)*     DrawAsHighlighter - 覆盖之前的涂鸦时(false - 直接覆盖;true - 高亮显示覆盖区域)*     FitToCurve - 涂鸦时(true - 使用贝塞尔曲线生成涂鸦;false - 使用直线生成涂鸦)*     PenTip - 笔尖的形状(Circle, Rectangle)*     PenTipTransform - 用于转换 PenTip 的 Matrix3x2 仿射转换矩阵(Matrix3x2 提供了一些简便的方法:CreateRotation, CreateScale, CreateSkew, CreateTranslation 等)。通过它可以自定义笔尖的形状*/using System.Numerics;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Core;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;namespace Windows10.Controls.MediaControl
{public sealed partial class InkCanvasDemo1 : Page{private InkPresenter _inkPresenter;public InkCanvasDemo1(){this.InitializeComponent();_inkPresenter = inkCanvas.InkPresenter;_inkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;UpdateDefaultDrawingAttributes();}private void UpdateDefaultDrawingAttributes_Handler(object sender, RoutedEventArgs e){UpdateDefaultDrawingAttributes();}private void buttonClear_Click(object sender, RoutedEventArgs e){_inkPresenter.StrokeContainer.Clear();}private void UpdateDefaultDrawingAttributes(){if (_inkPresenter != null){InkDrawingAttributes drawingAttributes = _inkPresenter.CopyDefaultDrawingAttributes();drawingAttributes.IgnorePressure = true;switch (drawingColor.SelectedValue.ToString()){case "Red":drawingAttributes.Color = Colors.Red;break;case "Green":drawingAttributes.Color = Colors.Green;break;case "Blue":drawingAttributes.Color = Colors.Blue;break;}drawingAttributes.Size = new Size(drawingSize.Value, drawingSize.Value);drawingAttributes.DrawAsHighlighter = drawingDrawAsHighlighter.IsChecked.Value;drawingAttributes.FitToCurve = drawingFitToCurve.IsChecked.Value;drawingAttributes.PenTip = drawingPenTip.IsOn ? PenTipShape.Circle : PenTipShape.Rectangle;if (drawingPenTipTransform.IsChecked == true)drawingAttributes.PenTipTransform = Matrix3x2.CreateSkew(4, 4);elsedrawingAttributes.PenTipTransform = Matrix3x2.Identity;_inkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);if (chkErasing.IsChecked == true)_inkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Erasing;else_inkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.Inking;_inkPresenter.IsInputEnabled = chkIsInputEnabled.IsChecked.Value;}}}
}

OK
[源码下载]

posted on 2017-09-21 14:24 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/7568430.html

背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板相关推荐

  1. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 原文:背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 [源码 ...

  2. 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

    原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    原文:背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ...

  4. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 原文:背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox [源码 ...

  5. 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)...

    原文:背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) [源码下载] 背水一战 Wind ...

  6. 背水一战 Windows 10 (41) - 控件(导航类): Frame

    原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍 ...

  7. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 原文:背水一战 Windows 10 (34) ...

  8. 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

    原文:背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webab ...

  9. 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid

    原文: 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid [源码下载] 背水一战 Windo ...

  10. 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation

    原文:背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation [源码下载] 背水一战 Windows 10 (55 ...

最新文章

  1. react发送Ajax中文问号,如何从Javascript/React发送AJAX请求并在pythonrestapi中接收数据...
  2. Sagit.Framework For IOS 开发框架入门教程6:网络请求STHttp
  3. 转发与重定向(forward与redirect)
  4. WPF基础到企业应用系列7——深入剖析依赖属性(三)
  5. powershell 变量_极客学院:学习PowerShell变量,输入和输出
  6. 简单的作好服务器安全的几个步骤
  7. 世界五星级大厨经典菜品集
  8. c语言运算符ppt,C语言知识学习运算符.ppt
  9. BZOJ2819 Nim(DFS序)
  10. Python编程从入门到实践~异常
  11. 解决oracle客户端可以连接11g rac vip,但是不能连接scan ip问题
  12. Hbase与传统关系型数据库对比
  13. codeforcesRound#275 Div2 前三题
  14. 迅捷pdf虚拟打印机怎么安装打印
  15. 大数据分析案例-基于RFM模型对电商客户价值分析(聚类)
  16. html规范eml文件,eml文件【操作办法】
  17. 深圳电视台小间距P2高清圆弧屏(弧形屏)是用软模组(软屏)拼成
  18. excel切片器_利用切片器制作动态交互图表
  19. 22年最后一次PMP考试时间定了-11月27日,进来了解相关内容信息
  20. C#修改图片尺寸,不改变原有图片比例

热门文章

  1. redis 字符串类型命令
  2. vue基础知识点思维导图
  3. HTML DOM Image 对象
  4. HTML5 前端原生 WebSocket 通信
  5. MongoDB 数据集合导出 与 导入
  6. pc端字体大小自适应几种方法
  7. PHP基础知识------页面静态化
  8. 热更新和热修复 个人小结
  9. springmvc中校验框架(hibernate)
  10. Python pycharm(windows版本)部署spark环境