Windows 8 Store Apps學習(51) 輸入: 塗鴉板

介紹

通過 Pointer 相關事件實現一個具有準系統的塗鴉板

通過 InkManager 實現一個功能完善的塗鴉板

樣本

1、示範如何通過 Pointer 相關事件實現一個只有準系統的塗鴉板

Input/Ink/Simple.xaml

<Page    x:Class="XamlDemo.Input.Ink.Simple"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Input.Ink"    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="120 0 0 0">                <Button Name="btnClear" Content="清除" Click="btnClear_Click_1" />                <Canvas Name="canvas" Background="Blue" Width="800" Height="480" HorizontalAlignment="Left" Margin="0 10 0 0" />            </StackPanel>    </Grid></Page>

Input/Ink/Simple.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 XamlDemo.Input.Ink{    public sealed partial class Simple : Page    {        // 用於儲存觸摸點（PointerId - Point）        private Dictionary<uint, Point?> _dicPoint;            public Simple()        {            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_1(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));        }    }}