silverlight.2.0:Silverlight(14) - 2.0交互的InkPresenter(涂鸦板)

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　介绍

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

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

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

　　Background - 涂鸦板背景

　　Opacity - 面板上墨迹不透明度

　　Clip - InkPresenter 剪辑区域

　　Stroke.DrawingAttributes - Stroke(笔划)外观属性

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

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

　　在线DEMO

　　http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

　　举例

　　InkPresenter.xaml

<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">
　　<Canvas>
　　
　　　　<!--InkPresenter 外围带边框背景图-->
　　　　<Rectangle Width="420" Height="350" Stroke="Black" StrokeThickness="1">
　　　　　　<Rectangle.Fill>
　　　　　　　　<ImageBrush ImageSource="/Silverlight20;component/Images/Background.jpg" Stretch="Fill" />
　　　　　　</Rectangle.Fill>
　　　　</Rectangle>
　　　　
　　　　<!--用于描绘 InkPresenter 工作区-->
　　　　<Rectangle Canvas.Top="10" Canvas.Left="10" Width="400" Height="300" RadiusX="25" RadiusY="25" Fill="Black" Opacity="0.2" />
　　
　　　　<!--
　　　　InkPresenter - 涂鸦板也就是在面板上呈现墨迹
　　　　　　Cursor - 鼠标移动到 InkPresenter 上面时鼠标指针样式
　　　　　　　　Arrow - 箭头
　　　　　　　　Hand - 手形
　　　　　　　　Wait - 沙漏
　　　　　　　　IBeam - “I”字形
　　　　　　　　Stylus - 点
　　　　　　　　Eraser - 橡皮
　　　　　　　　None - 无
　　　　　　Background - 涂鸦板背景建议设置其为“Transparent”需要话可以使用其他Control控件来描绘背景
　　　　　　Opacity - 面板上墨迹不透明度
　　　　　　Clip - InkPresenter 剪辑区域本例给 InkPresenter 做了个圆角效果其Clip值由 Blend 生成
　　　　-->
　　　　<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">
　　
　　　　　　<!--
　　　　　　InkPresenter 可以包含子Control控件本例为在 InkPresenter 底部循环播放视频
　　　　　　-->
　　　　　　<MediaElement x:Name="mediaElement" Source="/Silverlight20;component/Video/Demo.wmv" Width="400" Height="100" Canvas.Top="200" Stretch="UnormToFill" MediaEnded="mediaElement_MediaEnded" />
　　
　　　　</InkPresenter>
　　
　　　　<!--红色取色点点此后可画红色线-->
　　　　<Ellipse x:Name="ellipseRed" Canvas.Top="320" Canvas.Left="20" Cursor="Hand" Fill="Red" Width="20" Height="20" MouseLeftButtonDown="ellipseRed_MouseLeftButtonDown" />
　　
　　　　<!--黑色取色点点此后可画黑色线-->
　　　　<Ellipse x:Name="ellipseBlack" Canvas.Top="320" Canvas.Left="50" Cursor="Hand" Fill="Black" Width="20" Height="20" MouseLeftButtonDown="ellipseBlack_MouseLeftButtonDown" />
　　
　　　　<!--橡皮擦点此后可擦除的前画线-->
　　　　<Button x:Name="btnEraser" Canvas.Top="320" Canvas.Left="80" Content="橡皮擦" Click="btnEraser_Click" />
　　
　　　　<!--用于清除 InkPresenter 上墨迹按钮-->
　　　　<Button x:Name="btnClear" Canvas.Top="320" Canvas.Left="130" Content="清除" Click="btnClear_Click" />
　　
　　　　<!--用于显示当前 Stroke(笔划) 所在 矩形范围 位置信息-->
　　　　<TextBox x:Name="txtMsg" Canvas.Top="320" Canvas.Left="180" Width="220" />
　　　　　
　　</Canvas>
</UserControl>

　　InkPresenter.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
using .Windows.Ink;
using .Xml.Linq;
using .ServiceModel;
using .ServiceModel.Channels;
　　
Silverlight20.Interactive
{
　　public partial InkPresenter : UserControl
　　{
　　　　// 在涂鸦板上描绘笔划
　　　　private .Windows.Ink.Stroke _Stroke;
　　
　　　　// 在涂鸦板上描绘笔划颜色
　　　　private .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;
　　
　　　　　　 (_isEraser)
　　　　　　{
　　　　　　　　// 擦除鼠标当前位置所属 Stroke(笔划)
　　　　　　　　RemoveStroke(e);
　　　　　　}
　　　　　　
　　　　　　{
　　　　　　　　// .Windows.Input.MouseEventArgs.StylusDevice.Inverted - 是否正在使用手写笔(tablet pen)辅助笔尖
　　
　　　　　　　　// .Windows.Ink.Stroke.DrawingAttributes - Stroke(笔划)外观属性
　　　　　　　　// .Windows.Ink.Stroke.DrawingAttributes.Width - 笔划宽
　　　　　　　　// .Windows.Ink.Stroke.DrawingAttributes.Height - 笔划高
　　　　　　　　// .Windows.Ink.Stroke.DrawingAttributes.Color - 笔划颜色
　　　　　　　　// .Windows.Ink.Stroke.DrawingAttributes.OutlineColor - 笔划外框颜色
　　
　　　　　　　　_Stroke = .Windows.Ink.Stroke;
　　　　　　　　_Stroke.DrawingAttributes.Width = 3d;
　　　　　　　　_Stroke.DrawingAttributes.Height = 3d;
　　　　　　　　_Stroke.DrawingAttributes.Color = _currentColor;
　　　　　　　　_Stroke.DrawingAttributes.OutlineColor = Colors.Yellow;
　　
　　　　　　　　// 为 Stroke(笔划) 在当前鼠标所在位置处增加 StylusPo(点)
　　　　　　　　_Stroke.StylusPos.Add(e.StylusDevice.GetStylusPos(inkPresenter));
　　　　　　　　// 将设置好 Stroke(笔划) 添加到 InkPresenter Strokes(笔划集) 中
　　　　　　　　inkPresenter.Strokes.Add(_Stroke);
　　
　　　　　　　　// Stroke.GetBounds - 获取当前 Stroke(笔划) 所在 矩形范围 位置信息
　　　　　　　　// Strokes.GetBounds - 获取当前 Strokes(笔划集) 所在 矩形范围 位置信息
　　
　　　　　　　　// 显示该 Stroke(笔划) 所在 矩形范围 位置信息
　　　　　　　　Rect rect = _Stroke.GetBounds;
　　　　　　　　txtMsg.Text = .Format("上:{0}; 下:{1}; 左:{2}; 右:{3}",
　　　　　　　　　 rect.Top, rect.Bottom, rect.Left, rect.Right);
　　　　　　}
　　　　}
　　
　　　　void inkPresenter_MouseMove(object sender, MouseEventArgs e)
　　　　{
　　　　　　 (_isCapture)
　　　　　　{
　　　　　　　　 (_isEraser)
　　　　　　　　{
　　　　　　　　　　// 擦除鼠标当前位置所属 Stroke
　　　　　　　　　　RemoveStroke(e);
　　　　　　　　}
　　　　　　　　 (_Stroke != null)
　　　　　　　　{
　　　　　　　　　　// 为已经添加到 InkPresenter Strokes 中 Stroke 增加 StylusPo
　　　　　　　　　　_Stroke.StylusPos.Add(e.StylusDevice.GetStylusPos(inkPresenter));
　　
　　　　　　　　　　// 显示该 Stroke 所在 矩形范围 位置信息
　　　　　　　　　　Rect rect = _Stroke.GetBounds;
　　　　　　　　　　txtMsg.Text = .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;
　　　　　　_Stroke = null;
　　　　　　_isCapture = false;
　　　　}
　　
　　　　void RemoveStroke(MouseEventArgs e)
　　　　{
　　　　　　// Stroke.HitTest(StylusPoCollection) -　Stroke 是否和指定 StylusPo 集合相连
　　　　　　// Strokes.HitTest(StylusPoCollection) - 和指定 StylusPo 集合相连 Stroke 集合
　　
　　　　　　// 获取当前鼠标所在位置处 StylusPo 集合
　　　　　　StylusPoCollection erasePos = StylusPoCollection;
　　　　　　erasePos.Add(e.StylusDevice.GetStylusPos(inkPresenter));
　　
　　　　　　// 和当前鼠标所在位置处 StylusPo 集合相连 Stroke 集合
　　　　　　StrokeCollection hitStrokes = inkPresenter.Strokes.HitTest(erasePos);
　　
　　　　　　for ( i = 0; i < 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;
　　　　　　inkPresenter.Cursor = Cursors.Stylus;
　　　　　　_isEraser = false;
　　　　}
　　
　　　　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

　　文章来源 : http://www.cnblogs.com/webabcd

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:学Silverlight 2系列(23):Silverlight和HTML混合的无窗口模式
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放