背水一戰 Windows 10 (61) - 控件（媒體類）: InkCanvas 涂鴉編輯 原文:背水一戰 Windows 10 (61) - 控件（媒體類）: InkCanvas 涂鴉編輯

[源碼下載]

背水一戰 Windows 10 (61) - 控件（媒體類）: InkCanvas 涂鴉編輯

作者：webabcd


介紹
背水一戰 Windows 10 之 控件（媒體類）

• InkCanvas 涂鴉編輯

示例
演示?InkCanvas 涂鴉板編輯相關的操作
Controls/MediaControl/InkCanvasDemo2.xaml

<Pagex:Class="Windows10.Controls.MediaControl.InkCanvasDemo2"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"><Grid Background="White" Width="480" Height="320" Margin="5" HorizontalAlignment="Left"><!--Canvas - 在本例中用于繪制選中框（本例中選中框通過右鍵繪制）--><Canvas Name="selectionCanvas"/><!--InkCanvas - 涂鴉板控件--><InkCanvas Name="inkCanvas" /></Grid><Button Name="clear" Content="清除全部涂鴉" Margin="5" Click="clear_Click" /><Button Name="cut" Content="剪切選中涂鴉到剪切板" Margin="5" Click="cut_Click" /><Button Name="copy" Content="復制選中涂鴉到剪切板" Margin="5" Click="copy_Click" /><Button Name="paste" Content="從剪切板粘貼涂鴉" Margin="5" Click="paste_Click" /><Button Name="move" Content="移動選中涂鴉" Margin="5" Click="move_Click" /><Button Name="cloneAll" Content="克隆全部涂鴉" Margin="5" Click="cloneAll_Click" /><Button Name="selectAll" Content="選中全部涂鴉" Margin="5" Click="selectAll_Click" /><Button Name="changeColor" Content="改變全部涂鴉的顏色" Margin="5" Click="changeColor_Click" /></StackPanel></Grid> </Page>

Controls/MediaControl/InkCanvasDemo2.xaml.cs

/** InkCanvas - 涂鴉板控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）* InkPresenter - 獲取 InkPresenter 對象* * InkPresenter - 涂鴉板* StrokeContainer - 返回 InkStrokeContainer 類型的對象* InputProcessingConfiguration.RightDragAction - 涂鴉的輸入按鍵* AllowProcessing - 所有按鍵均可用于涂鴉，比如鼠標的左鍵和右鍵均可用于涂鴉。默認值* LeaveUnprocessed - 特殊按鍵不可用于涂鴉，比如鼠標的右鍵不可用于涂鴉* UnprocessedInput - 用于監聽指針的一些事件* PointerEntered, PointerExited, PointerHovered, PointerLost, PointerMoved, PointerPressed, PointerReleased - 顧名思義的一些事件* 注：當 InputProcessingConfiguration.RightDragAction 為 AllowProcessing 時，則只會觸發 PointerEntered, PointerExited, PointerHovered 事件* SetPredefinedConfiguration(InkPresenterPredefinedConfiguration value) - 設置涂鴉行為（SimpleSinglePointer - 單接觸點涂鴉; SimpleMultiplePointer - 多接觸點涂鴉）* StrokesCollected - 當一個或多個 InkStroke 被畫進來時觸發的事件* StrokesErased - 當一個或多個 InkStroke 被擦除時觸發的事件* StrokeInput - 用于監聽一些涂鴉事件* StrokeStarted, StrokeEnded, StrokeContinued, StrokeCanceled - 顧名思義的一些事件* * InkStrokeContainer - 用于管理涂鴉* GetStrokes() - 獲取當前涂鴉板的所有 InkStroke 對象集合* BoundingRect - 獲取當前涂鴉板的所有 InkStroke 對象的 Rect 區域* Clear() - 清除所有涂鴉* SelectWithLine(Point from, Point to) - 返回指定對角線內的涂鴉所在的 Rect 區域* SelectWithPolyLine(IEnumerable<Point> polyline) - 返回指定 Polyline 內的涂鴉所在的 Rect 區域* CopySelectedToClipboard() - 復制選中的涂鴉到剪切板* CanPasteFromClipboard() - 剪切板中是否有涂鴉數據* PasteFromClipboard(Point position) - 從剪切板粘貼涂鴉到指定的位置，并返回粘貼涂鴉的 Rect 區域* MoveSelected(Point translation) - 指定偏移量，并移動選中的涂鴉，返回的是移動后的涂鴉的 Rect 區域* DeleteSelected() - 刪除選中的涂鴉，并返回刪除涂鴉的 Rect 區域* AddStroke(InkStroke stroke) - 在涂鴉板上繪制指定的 InkStroke 對象* AddStrokes(IEnumerable<InkStroke> strokes) - 在涂鴉板上繪制指定的 InkStroke 對象集合* * InkStroke - 涂鴉對象（這是一次的涂鴉對象，即鼠標按下后移動然后再抬起后所繪制出的涂鴉）* BoundingRect - 獲取當前 InkStroke 的 Rect 區域* DrawingAttributes - 涂鴉筆尖屬性（參見 InkCanvasDemo1.xaml.cs）* PointTransform - 用于轉換 InkStroke 的 Matrix3x2 仿射轉換矩陣（Matrix3x2 提供了一些簡便的方法：CreateRotation, CreateScale, CreateSkew, CreateTranslation 等）* Selected - 是否被選中* Clone() - 克隆一份，返回克隆后的 InkStroke 對象* GetInkPoints(), GetRenderingSegments() - 用于獲取組成 InkStroke 的一堆貝塞爾曲線的數據* * * 注：在 InkCanvas 有濕（wet）和干（dry）的感念* 所謂的濕就是指鼠標按下后移動，在鼠標抬起來之前繪制出的涂鴉* 所謂的干就是指鼠標抬起后，真正顯示在 InkCanvas 上的涂鴉（鼠標抬起后可以將 wet 做一些自定義處理，然后再 dry 到 InkCanvas 上）* 如何在 wet 和 dry 之間做自定義處理呢？需要通過 InkPresenter 的 ActivateCustomDrying() 方法獲取到 InkSynchronizer 對象來實現，具體的示例在之后介紹 Win2D 的時候再寫*/using Windows.Foundation; using Windows.UI; using Windows.UI.Core; using Windows.UI.Input.Inking; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Shapes; using System.Linq; using System.Collections.Generic; using System;namespace Windows10.Controls.MediaControl {public sealed partial class InkCanvasDemo2 : Page{// 右鍵軌跡（用于選擇涂鴉）private Polyline _polyline;// 被選中的涂鴉所在的 Rect 區域private Rect _rect;public InkCanvasDemo2(){this.InitializeComponent();inkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();drawingAttributes.IgnorePressure = true;drawingAttributes.Color = Colors.Red;drawingAttributes.Size = new Size(4, 4);inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);// 此設置用于禁用鼠標右鍵的涂鴉功能，從而在后面實現鼠標右鍵的選擇涂鴉的功能inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction = InkInputRightDragAction.LeaveUnprocessed;inkCanvas.InkPresenter.UnprocessedInput.PointerPressed += UnprocessedInput_PointerPressed;inkCanvas.InkPresenter.UnprocessedInput.PointerMoved += UnprocessedInput_PointerMoved;inkCanvas.InkPresenter.UnprocessedInput.PointerReleased += UnprocessedInput_PointerReleased;inkCanvas.InkPresenter.StrokeInput.StrokeStarted += StrokeInput_StrokeStarted;inkCanvas.InkPresenter.StrokesErased += InkPresenter_StrokesErased;}// 右鍵按下private void UnprocessedInput_PointerPressed(InkUnprocessedInput sender, PointerEventArgs args){// 右鍵軌跡_polyline = new Polyline(){Stroke = new SolidColorBrush(Colors.Blue),StrokeThickness = 1,StrokeDashArray = new DoubleCollection() { 5, 2 },};_polyline.Points.Add(args.CurrentPoint.RawPosition);// 繪制右鍵軌跡 selectionCanvas.Children.Add(_polyline);}// 右鍵按下后在 InkCanvas 中移動private void UnprocessedInput_PointerMoved(InkUnprocessedInput sender, PointerEventArgs args){// 更新右鍵軌跡 _polyline.Points.Add(args.CurrentPoint.RawPosition);}// 右鍵抬起private void UnprocessedInput_PointerReleased(InkUnprocessedInput sender, PointerEventArgs args){// 更新右鍵軌跡 _polyline.Points.Add(args.CurrentPoint.RawPosition);// 獲取右鍵圈起來的區域內的涂鴉所在的 Rect 區域_rect = inkCanvas.InkPresenter.StrokeContainer.SelectWithPolyLine(_polyline.Points);DrawBoundingRect();}// 繪制 _rect 區域（即被選中的涂鴉所在的 Rect 區域）private void DrawBoundingRect(){selectionCanvas.Children.Clear();if ((_rect.Width == 0) || (_rect.Height == 0) || _rect.IsEmpty){return;}var rectangle = new Rectangle(){Stroke = new SolidColorBrush(Colors.Blue),StrokeThickness = 1,StrokeDashArray = new DoubleCollection() { 5, 2 },Width = _rect.Width,Height = _rect.Height};Canvas.SetLeft(rectangle, _rect.X);Canvas.SetTop(rectangle, _rect.Y);selectionCanvas.Children.Add(rectangle);}// 開始此次涂鴉后private void StrokeInput_StrokeStarted(InkStrokeInput sender, PointerEventArgs args){ClearSelection();}// 擦除某些涂鴉后private void InkPresenter_StrokesErased(InkPresenter sender, InkStrokesErasedEventArgs args){ClearSelection();}// 清除涂鴉的選中狀態，以及選中框private void ClearSelection(){IReadOnlyList<InkStroke> strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();foreach (var stroke in strokes){stroke.Selected = false;}ClearDrawnBoundingRect();}// 清除涂鴉的選中框private void ClearDrawnBoundingRect(){if (selectionCanvas.Children.Any()){selectionCanvas.Children.Clear();_rect = Rect.Empty;}}// 清除全部涂鴉private void clear_Click(object sender, RoutedEventArgs e){ClearDrawnBoundingRect();inkCanvas.InkPresenter.StrokeContainer.Clear();}// 剪切選中涂鴉到剪切板private void cut_Click(object sender, RoutedEventArgs e){ClearDrawnBoundingRect();inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();Rect rect = inkCanvas.InkPresenter.StrokeContainer.DeleteSelected();}// 復制選中涂鴉到剪切板private void copy_Click(object sender, RoutedEventArgs e){inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();}// 從剪切板粘貼涂鴉private void paste_Click(object sender, RoutedEventArgs e){if (inkCanvas.InkPresenter.StrokeContainer.CanPasteFromClipboard()){Rect rect = inkCanvas.InkPresenter.StrokeContainer.PasteFromClipboard(new Point(0, 0));}}// 移動選中涂鴉private void move_Click(object sender, RoutedEventArgs e){Rect rect = inkCanvas.InkPresenter.StrokeContainer.MoveSelected(new Point(10, 10));_rect = rect;DrawBoundingRect();}// 克隆全部涂鴉private void cloneAll_Click(object sender, RoutedEventArgs e){Random random = new Random();IReadOnlyList<InkStroke> oldStrokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();List<InkStroke> newStrokes = new List<InkStroke>();foreach (InkStroke oldStroke in oldStrokes){InkStroke newStroke = oldStroke.Clone();newStroke.Selected = true;newStrokes.Add(newStroke);}inkCanvas.InkPresenter.StrokeContainer.AddStrokes(newStrokes);inkCanvas.InkPresenter.StrokeContainer.MoveSelected(new Point(random.Next(5, 30), random.Next(5, 30)));ClearSelection();}// 選中全部涂鴉private void selectAll_Click(object sender, RoutedEventArgs e){Rect rect = inkCanvas.InkPresenter.StrokeContainer.BoundingRect;_rect = rect;IReadOnlyList<InkStroke> strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();foreach (var stroke in strokes){stroke.Selected = true;}DrawBoundingRect();}// 改變全部涂鴉的顏色private void changeColor_Click(object sender, RoutedEventArgs e){Random random = new Random();Color color = Color.FromArgb(255, (byte)random.Next(0, 256), (byte)random.Next(0, 256), (byte)random.Next(0, 256));IReadOnlyList<InkStroke> strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();foreach (var stroke in strokes){InkDrawingAttributes drawingAttributes = stroke.DrawingAttributes;drawingAttributes.Color = color;stroke.DrawingAttributes = drawingAttributes;}}} }

OK
[源碼下載]

posted on 2017-09-21 14:25 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/7568433.html

總結

以上是生活随笔為你收集整理的背水一战 Windows 10 (61) - 控件（媒体类）: InkCanvas 涂鸦编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。