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));
        }
    }
}

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索指针
， windows
， canvas
， using
， sender
， 简单涂鸦板
， 涂鸦板示例
涂鸦板
，以便于您获取更多的相关知识。