稳扎稳打Silverlight(14) - 2.0交互之InkPresenter(涂鸦板)

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引页]</a>

<a href="http://down.51cto.com/data/100302" target="_blank">[源码下载]</a>

稳扎稳打Silverlight(14) - 2.0交互之InkPresenter(涂鸦板)

介绍

Silverlight 2.0 人机交互：InkPresenter(涂鸦板)

    InkPresenter - 涂鸦板，也就是在面板上呈现墨迹。InkPresenter 可以包含子控件

    Cursor - 鼠标移动到 InkPresenter 上面时，鼠标指针的样式

    Background - 涂鸦板背景

    Opacity - 面板上墨迹的不透明度

    Clip - InkPresenter 的剪辑区域

    Stroke.DrawingAttributes - Stroke（笔划）的外观属性

    UIElement.CaptureMouse() - 为 UIElement 对象启用鼠标捕捉

    UIElement.CaptureMouse() - 为 UIElement 对象释放鼠标捕捉

在线DEMO

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

InkPresenter.xaml

&lt;UserControl x:Class="Silverlight20.Interactive.InkPresenter" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"&gt; 

        &lt;Canvas&gt; 

                &lt;!--InkPresenter 的外围的带边框的背景图--&gt; 

                &lt;Rectangle Width="420" Height="350" Stroke="Black" StrokeThickness="1"&gt; 

                        &lt;Rectangle.Fill&gt; 

                                &lt;ImageBrush ImageSource="/Silverlight20;component/Images/Background.jpg" Stretch="Fill" /&gt; 

                        &lt;/Rectangle.Fill&gt; 

                &lt;/Rectangle&gt; 

                &lt;!--用于描绘 InkPresenter 的工作区--&gt; 

                &lt;Rectangle Canvas.Top="10" Canvas.Left="10" Width="400" Height="300" RadiusX="25" RadiusY="25" Fill="Black" Opacity="0.2" /&gt; 

                &lt;!-- 

                InkPresenter - 涂鸦板，也就是在面板上呈现墨迹 

                        Cursor - 鼠标移动到 InkPresenter 上面时，鼠标指针的样式 

                                Arrow - 箭头 

                                Hand - 手形    

                                Wait - 沙漏 

                                IBeam - “I”字形    

                                Stylus - 点 

                                Eraser - 橡皮 

                                None - 无 

                        Background - 涂鸦板背景。建议设置其为“Transparent”，需要的话可以使用其他控件来描绘背景 

                        Opacity - 面板上墨迹的不透明度 

                        Clip - InkPresenter 的剪辑区域。本例给 InkPresenter 做了一个圆角效果，其Clip值由 Blend 生成 

                --&gt; 

                &lt;InkPresenter x:Name="inkPresenter" Cursor="Stylus" Canvas.Top="10" Canvas.Left="10" Width="400" Height="300" Background="Transparent" 

                        MouseLeftButtonDown="inkPresenter_MouseLeftButtonDown"    

                        MouseLeftButtonUp="inkPresenter_MouseLeftButtonUp"    

                        MouseMove="inkPresenter_MouseMove"    

                        Clip="M0.5,25.5 C0.5,11.692882 11.692882,0.5 25.5,0.5 L374.5,0.5 C388.30713,0.5 399.5,11.692882 399.5,25.5 L399.5,274.5 C399.5,288.30713 388.30713,299.5 374.5,299.5 L25.5,299.5 C11.692882,299.5 0.5,288.30713 0.5,274.5 z"&gt; 

                        &lt;!-- 

                        InkPresenter 可以包含子控件。本例为在 InkPresenter 的底部循环播放视频 

                        --&gt; 

                        &lt;MediaElement x:Name="mediaElement" Source="/Silverlight20;component/Video/Demo.wmv" Width="400" Height="100" Canvas.Top="200" Stretch="UniformToFill" MediaEnded="mediaElement_MediaEnded" /&gt; 

                &lt;/InkPresenter&gt; 

                &lt;!--红色取色点，点此后可画红色的线--&gt; 

                &lt;Ellipse x:Name="ellipseRed" Canvas.Top="320" Canvas.Left="20" Cursor="Hand" Fill="Red" Width="20" Height="20" MouseLeftButtonDown="ellipseRed_MouseLeftButtonDown" /&gt; 

                &lt;!--黑色取色点，点此后可画黑色的线--&gt; 

                &lt;Ellipse x:Name="ellipseBlack" Canvas.Top="320" Canvas.Left="50" Cursor="Hand" Fill="Black" Width="20" Height="20" MouseLeftButtonDown="ellipseBlack_MouseLeftButtonDown" /&gt; 

                &lt;!--橡皮擦，点此后可擦除之前画的线--&gt; 

                &lt;Button x:Name="btnEraser" Canvas.Top="320" Canvas.Left="80" Content="橡皮擦" Click="btnEraser_Click" /&gt; 

                &lt;!--用于清除 InkPresenter 上的墨迹的按钮--&gt; 

                &lt;Button x:Name="btnClear" Canvas.Top="320" Canvas.Left="130" Content="清除" Click="btnClear_Click" /&gt; 

                &lt;!--用于显示当前 Stroke（笔划） 所在的 矩形范围 的位置信息--&gt; 

                &lt;TextBox x:Name="txtMsg" Canvas.Top="320" Canvas.Left="180" Width="220" /&gt; 

        &lt;/Canvas&gt; 

&lt;/UserControl&gt;

InkPresenter.xaml.cs

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Net; 

using System.Windows; 

using System.Windows.Controls; 

using System.Windows.Documents; 

using System.Windows.Input; 

using System.Windows.Media; 

using System.Windows.Media.Animation; 

using System.Windows.Shapes; 

using System.Windows.Ink; 

using System.Xml.Linq; 

using System.ServiceModel; 

using System.ServiceModel.Channels; 

namespace Silverlight20.Interactive 

{ 

        public partial class InkPresenter : UserControl 

        { 

                // 在涂鸦板上描绘的笔划 

                private System.Windows.Ink.Stroke _newStroke; 

                // 在涂鸦板上描绘的笔划的颜色 

                private System.Windows.Media.Color _currentColor = Colors.Red; 

                // 是否是擦除操作 

                private bool _isEraser = false; 

                // 当前是否正在 InkPresenter 上捕获鼠标 

                private bool _isCapture = false; 

                public InkPresenter() 

                { 

                        InitializeComponent(); 

                } 

                void inkPresenter_MouseLeftButtonDown(object sender, MouseEventArgs e) 

                        // UIElement.CaptureMouse() - 为 UIElement 对象启用鼠标捕捉 

                        // 为 InkPresenter 启用鼠标捕捉 

                        inkPresenter.CaptureMouse(); 

                        _isCapture = true; 

                        if (_isEraser) 

                        { 

                                // 擦除鼠标当前位置所属的 Stroke（笔划） 

                                RemoveStroke(e); 

                        } 

                        else 

                                // System.Windows.Input.MouseEventArgs.StylusDevice.Inverted - 是否正在使用手写笔（tablet pen）的辅助笔尖 

                                // System.Windows.Ink.Stroke.DrawingAttributes - Stroke（笔划）的外观属性 

                                // System.Windows.Ink.Stroke.DrawingAttributes.Width - 笔划的宽 

                                // System.Windows.Ink.Stroke.DrawingAttributes.Height - 笔划的高 

                                // System.Windows.Ink.Stroke.DrawingAttributes.Color - 笔划的颜色 

                                // System.Windows.Ink.Stroke.DrawingAttributes.OutlineColor - 笔划的外框的颜色 

                                _newStroke = new System.Windows.Ink.Stroke(); 

                                _newStroke.DrawingAttributes.Width = 3d; 

                                _newStroke.DrawingAttributes.Height = 3d; 

                                _newStroke.DrawingAttributes.Color = _currentColor; 

                                _newStroke.DrawingAttributes.OutlineColor = Colors.Yellow; 

                                // 为 Stroke（笔划） 在当前鼠标所在位置处增加 StylusPoint（点） 

                                _newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter)); 

                                // 将设置好的 Stroke（笔划） 添加到 InkPresenter 的 Strokes（笔划集） 中 

                                inkPresenter.Strokes.Add(_newStroke); 

                                // Stroke.GetBounds() - 获取当前 Stroke（笔划） 所在的 矩形范围 的位置信息 

                                // Strokes.GetBounds() - 获取当前 Strokes（笔划集） 所在的 矩形范围 的位置信息 

                                // 显示该 Stroke（笔划） 所在的 矩形范围 的位置信息 

                                Rect rect = _newStroke.GetBounds(); 

                                txtMsg.Text = string.Format("上:{0}; 下:{1}; 左:{2}; 右:{3}", 

                                     rect.Top, rect.Bottom, rect.Left, rect.Right); 

                void inkPresenter_MouseMove(object sender, MouseEventArgs e) 

                        if (_isCapture) 

                                if (_isEraser) 

                                { 

                                        // 擦除鼠标当前位置所属的 Stroke 

                                        RemoveStroke(e); 

                                } 

                                else if (_newStroke != null) 

                                        // 为已经添加到 InkPresenter 的 Strokes 中的 Stroke 增加 StylusPoint 

                                        _newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter)); 

                                        // 显示该 Stroke 所在的 矩形范围 的位置信息 

                                        Rect rect = _newStroke.GetBounds(); 

                                        txtMsg.Text = string.Format("上:{0}; 下:{1}; 左:{2}; 右:{3}", 

                                                     rect.Top, rect.Bottom, rect.Left, rect.Right); 

                void inkPresenter_MouseLeftButtonUp(object sender, MouseEventArgs e) 

                        // UIElement.CaptureMouse() - 为 UIElement 对象释放鼠标捕捉 

                        // 为 InkPresenter 释放鼠标捕捉 

                        inkPresenter.ReleaseMouseCapture(); 

                        _newStroke = null; 

                        _isCapture = false; 

                void RemoveStroke(MouseEventArgs e) 

                        // Stroke.HitTest(StylusPointCollection) -    Stroke 是否与指定的 StylusPoint 集合相连 

                        // Strokes.HitTest(StylusPointCollection) - 与指定的 StylusPoint 集合相连的 Stroke 集合 

                        // 获取当前鼠标所在位置处的 StylusPoint 集合 

                        StylusPointCollection erasePoints = new StylusPointCollection(); 

                        erasePoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter)); 

                        // 与当前鼠标所在位置处的 StylusPoint 集合相连的 Stroke 集合 

                        StrokeCollection hitStrokes = inkPresenter.Strokes.HitTest(erasePoints); 

                        for (int i = 0; i &lt; hitStrokes.Count; i++) 

                                // 在 InkPresenter 上清除指定的 Stroke 

                                inkPresenter.Strokes.Remove(hitStrokes[i]); 

                private void mediaElement_MediaEnded(object sender, RoutedEventArgs e) 

                        // 视频播放完后，再重新播放 

                        mediaElement.Position = TimeSpan.FromMilliseconds(0); 

                        mediaElement.Play(); 

                private void ellipseRed_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        // 单击了 红色取色点 

                        _currentColor = Colors.Red; 

                        inkPresenter.Cursor = Cursors.Stylus; 

                        _isEraser = false; 

                private void ellipseBlack_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        // 单击了 黑色取色点 

                        _currentColor = Colors.Black; 

                private void btnClear_Click(object sender, RoutedEventArgs e) 

                        // 单击了 清除 按钮 

                        inkPresenter.Strokes.Clear(); 

                private void btnEraser_Click(object sender, RoutedEventArgs e) 

                        // 单击了 橡皮擦 按钮 

                        inkPresenter.Cursor = Cursors.Eraser; 

                        _isEraser = true; 

        } 

}

OK

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/343057，如需转载请自行联系原作者