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

背水一戰 Windows 10 之控制項（媒體類）: InkCanvas 塗鴉編輯 ...

作者：webabcd

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

InkCanvas 塗鴉編輯

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

<Page
    x: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
[源碼下載]