《有博天天读》Silverlight中InkPresenter控件综合应用实例

     闲暇看"凤凰卫视"《有报天天读》，《一虎一席谈》节目时,留意到中间主持人经常拿着个笔或手在平板电脑上将页面划来划去,并不时在上面圈圈点点，让观众感觉相当时尚、并富含科技含量。在Silverlight中运用InkPresenter墨迹控件很容易实现这样的效果，今天通过一个实例山寨一把,来个《有博天天读》先来个图：

                             DEMO演示地址: http://xingjunli.webs.com/InkPresenter.html

     1、新建一个Silverlight项目"InkPresenter"，在MainPage.xaml页面中加入控件如:
        <InkPresenter x:Name="MyInk" Width="800" Height="550" Background="#19EEEAEA"/> 
     2、在MainPage.cs文件中引用命名空间:
        using System.Windows.Ink; 
     3、在CS文件中为MyInk注册一些事件：
           MyInk.MouseLeftButtonDown += new MouseButtonEventHandler(MyInk_MouseLeftButtonDown); //这里可以注册LostMouseCapture事件代替MouseLeftButtonUp实现同样的效果 MyInk.MouseLeftButtonUp += new MouseButtonEventHandler(MyInk_MouseLeftButtonUp); MyInk.MouseMove += new MouseEventHandler(MyInk_MouseMove);  

     4、为了设置画刷样式和实现墨迹擦除功能定义三个全局变量:
          Stroke inkStroke; //墨迹线条 StylusPointCollection erasePoints; bool isMouseCaptured; //记录否进行坐标捕获 
  5、在MouseLeftButtonDown事件中实例化inkStroke线条样式并将Stroke添加至MyInk Strokes属性中如：
        inkStroke = new Stroke(); inkStroke.DrawingAttributes.Color = ColorHelper.GetInkColor(InkColors.Blue); inkStroke.DrawingAttributes.Height = 4; MyInk.Strokes.Add(inkStroke);  

  6、在MouseMove事件中捕获鼠标轨迹绘制墨迹如:
       if (inkStroke != null) { this.inkStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyInk)); }     

  7、在鼠标松开事件MouseLeftButtonUp中设置inkStroke = null,以停止墨迹捕获绘制如:
if (inkStroke != null) inkStroke = null; isMouseCaptured = false; 
   8、要实现墨迹擦除我们需要在MouseLeftButtonDown事件中设置isMouseCaptured=true并设置erasePoints坐标信息
     isMouseCaptured = true; erasePoints = e.StylusDevice.GetStylusPoints(MyInk); 
   9、擦除墨迹时通过isMouseCaptured判断是否进行墨迹擦除并改写MouseMove事件如:
 void MyInk_MouseMove(object sender, MouseEventArgs e) { if (!isMouseCaptured) { if (inkStroke != null) { this.inkStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyInk)); } } else { if (this.erasePoints != null) { erasePoints.Add(e.StylusDevice.GetStylusPoints(this.MyInk)); StrokeCollection hitStrokes = this.MyInk.Strokes.HitTest(erasePoints); if (hitStrokes != null && hitStrokes.Count > 0) { foreach (Stroke hitStroke in hitStrokes) { this.MyInk.Strokes.Remove(hitStroke); } } } } }      

10、清空墨迹就很简单了如:
     MyInk.Strokes.Clear();

      完整XAML页面代码:

<UserControl 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" xmlns:InkPresenter_control="clr-namespace:InkPresenter.control" x:Class="InkPresenter.MainPage" Width="800" Height="600"> <UserControl.Resources> <ImageBrush x:Key="ImageBrushMenuState" ImageSource="image/menustate.png"/> <Storyboard x:Name="sbMenuState" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="pathState" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="3.335"/> <EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="-3.498"> <EasingDoubleKeyFrame.EasingFunction> <SineEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:01.6000000" Value="3.335"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="pathStateMask" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.334"/> <EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="3.997"> <EasingDoubleKeyFrame.EasingFunction> <SineEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:01.6000000" Value="1.334"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="sbMovePage"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="StackPanelMain" Storyboard.TargetProperty="(Canvas.Left)"> <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-2400"> <EasingDoubleKeyFrame.EasingFunction> <QuinticEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="Black"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition/> </Grid.RowDefinitions> <Canvas x:Name="CanvasMain" Grid.Row="1" Grid.Column="0" Margin="0" > <Canvas.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF1F2021" Offset="0"/> <GradientStop Color="#FF1E5722" Offset="1"/> </LinearGradientBrush> </Canvas.Background> <InkPresenter x:Name="MyInk" Width="800" Height="550" Background="#19EEEAEA"/> <StackPanel x:Name="StackPanelMain" Width="3200" Canvas.Left="0" Canvas.Top="0" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5"> <StackPanel.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </StackPanel.OpacityMask> <StackPanel.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </StackPanel.RenderTransform> <Image Height="538" Source="image/001.png" Stretch="Fill"/> <Image Height="538" Source="image/002.png" Stretch="Fill"/> <Image Height="538" Source="image/003.png" Stretch="Fill"/> <Image Height="538" Source="image/004.png" Stretch="Fill"/> </StackPanel> </Canvas> <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#72454749" x:Name="SPanelToolBar"> <InkPresenter_control:UButton x:Name="btnMove" Selected="Collapsed" BtnType="Move" Width="48" Height="48" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" ToolTipService.ToolTip="Move" Cursor="Hand"/> <InkPresenter_control:UButton x:Name="btnBrush" Selected="Collapsed" BtnType="Brush" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" ToolTipService.ToolTip="Brush" Cursor="Hand"/> <InkPresenter_control:UButton x:Name="btnInk" Selected="Collapsed" BtnType="Ink" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" ToolTipService.ToolTip="Ink" Cursor="Hand"/> <InkPresenter_control:UButton x:Name="btnEraser" Selected="Collapsed" BtnType="Eraser" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" ToolTipService.ToolTip="Eraser" Cursor="Hand"/> <InkPresenter_control:UButton x:Name="btnClear" Selected="Collapsed" BtnType="Clear" Width="48" Height="48" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0" ToolTipService.ToolTip="Clear" Cursor="Hand"/> </StackPanel> <Canvas x:Name="CanvasMenu" Grid.Row="0" HorizontalAlignment="Right" Width="173" Margin="0,2"> <Canvas x:Name="canvasMenuState" Width="26" Height="50" Margin="0" Canvas.Top="11"> <Path x:Name="pathState" Fill="{StaticResource ImageBrushMenuState}" Stretch="Fill" Height="26" Width="26" Data="M0,0 L26,0 L26,26 L0,26 z" RenderTransformOrigin="0.5,0.5"> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> <Path x:Name="pathStateMask" Fill="{StaticResource ImageBrushMenuState}" Stretch="Fill" Height="26" Width="26" RenderTransformOrigin="0.5,0.5" Canvas.Top="27" Data="M0,0 L26,0 L26,26 L0,26 z"> <Path.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#8C000000" Offset="0.996"/> <GradientStop Color="Transparent" Offset="0.213"/> </LinearGradientBrush> </Path.OpacityMask> <Path.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="-1"/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Path.RenderTransform> </Path> </Canvas> <TextBlock x:Name="lab01" Height="26" Width="26" Canvas.Left="0" Canvas.Top="9" Text="1" TextWrapping="Wrap" Foreground="White" TextAlignment="Center" FontWeight="Bold" FontFamily="微软雅黑" FontSize="21.333" Cursor="Hand" ToolTipService.ToolTip="Page 01"/> <TextBlock x:Name="lab02" Height="26" Width="26" Canvas.Left="33" Canvas.Top="8" Text="2" TextWrapping="Wrap" Foreground="White" TextAlignment="Center" FontWeight="Bold" FontFamily="微软雅黑" FontSize="21.333" Cursor="Hand" ToolTipService.ToolTip="Page 02"/> <TextBlock x:Name="lab03" Height="26" Width="26" Canvas.Left="66" Canvas.Top="8" Text="3" TextWrapping="Wrap" Foreground="White" TextAlignment="Center" FontWeight="Bold" FontFamily="微软雅黑" FontSize="21.333" Cursor="Hand" ToolTipService.ToolTip="Page 03"/> <TextBlock x:Name="lab04" Height="26" Width="26" Canvas.Left="99" Canvas.Top="8" Text="4" TextWrapping="Wrap" Foreground="White" TextAlignment="Center" FontWeight="Bold" FontFamily="微软雅黑" FontSize="21.333" Cursor="Hand" ToolTipService.ToolTip="Page 04"/> </Canvas> </Grid> </UserControl>

    完整后台代码:
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using InkPresenter.control; namespace InkPresenter { public partial class MainPage : UserControl { UButton SelectButton; //当前选中的Button bool isMouseCaptured; //记录否进行坐标移动 Point movePoint; //记录移动前相对于主面板坐标信息 double beforePostion; //记录移动之前所在页面位置信息 Stroke inkStroke; //墨迹线条 public MainPage() { // Required to initialize variables InitializeComponent(); foreach (Button btn in SPanelToolBar.Children) { btn.Click += new RoutedEventHandler(btn_Click); } foreach (UIElement element in CanvasMenu.Children) { if (element.GetType() == typeof(TextBlock)) { element.MouseLeftButtonUp += new MouseButtonEventHandler(Element_MouseLeftButtonUp); } } this.Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { SelectButton = btnMove; btnMove.Selected = Visibility.Visible; sbMenuState.Begin(); StackPanelMain.MouseLeftButtonDown += new MouseButtonEventHandler(StackPanelMain_MouseLeftButtonDown); StackPanelMain.MouseLeftButtonUp += new MouseButtonEventHandler(StackPanelMain_MouseLeftButtonUp); StackPanelMain.MouseMove += new MouseEventHandler(StackPanelMain_MouseMove); StackPanelMain.MouseLeave += new MouseEventHandler(StackPanelMain_MouseLeave); MyInk.MouseLeftButtonDown += new MouseButtonEventHandler(MyInk_MouseLeftButtonDown); MyInk.MouseLeftButtonUp += new MouseButtonEventHandler(MyInk_MouseLeftButtonUp); MyInk.MouseMove += new MouseEventHandler(MyInk_MouseMove); } StylusPointCollection erasePoints; void MyInk_MouseMove(object sender, MouseEventArgs e) { if (!isMouseCaptured) { if (inkStroke != null) { this.inkStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyInk)); } } else { if (this.erasePoints != null) { erasePoints.Add(e.StylusDevice.GetStylusPoints(this.MyInk)); StrokeCollection hitStrokes = this.MyInk.Strokes.HitTest(erasePoints); if (hitStrokes != null && hitStrokes.Count > 0) { foreach (Stroke hitStroke in hitStrokes) { this.MyInk.Strokes.Remove(hitStroke); } } } } } void MyInk_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (inkStroke != null) inkStroke = null; isMouseCaptured = false; } void MyInk_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if(SelectButton != null) { switch (SelectButton.BtnType) { case ButtonType.Brush: inkStroke = new Stroke(); inkStroke.DrawingAttributes.Color = ColorHelper.GetInkColor(InkColors.Blue); inkStroke.DrawingAttributes.Height = 4; MyInk.Strokes.Add(inkStroke); break; case ButtonType.Ink: inkStroke = new Stroke(); inkStroke.DrawingAttributes.Color = ColorHelper.GetInkColor(InkColors.Ink); inkStroke.DrawingAttributes.Height = 15; MyInk.Strokes.Add(inkStroke); break; case ButtonType.Eraser: isMouseCaptured = true; erasePoints = e.StylusDevice.GetStylusPoints(MyInk); break; case ButtonType.Clear: break; } } } #region 主页面移动 void StackPanelMain_MouseMove(object sender, MouseEventArgs e) { if (isMouseCaptured) { if(SelectButton.BtnType == ButtonType.Move) { MoveMainPage(e); } } } void StackPanelMain_MouseLeave(object sender, MouseEventArgs e) { SetCurrMainPage((double)StackPanelMain.GetValue(Canvas.LeftProperty) - beforePostion); } void StackPanelMain_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { SetCurrMainPage((double)StackPanelMain.GetValue(Canvas.LeftProperty) - beforePostion); } void StackPanelMain_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (SelectButton != null && SelectButton.BtnType == ButtonType.Move) { movePoint = e.GetPosition(StackPanelMain); StackPanelMain.CaptureMouse(); beforePostion = Canvas.GetLeft(StackPanelMain); //获取移动前所在坐标位置 } isMouseCaptured = true; } //移动页面 void MoveMainPage(MouseEventArgs args) { Point newPoint = args.GetPosition(CanvasMain); StackPanelMain.SetValue(Canvas.LeftProperty, newPoint.X - movePoint.X); } //根据坐标信息设置划屏动画 void SetCurrMainPage(double moveStep) { if (moveStep > 200) beforePostion += 800.0; else if (moveStep < -200) beforePostion -= 800.0; if (beforePostion > 0) beforePostion = 0.0; else if (beforePostion < -2400) beforePostion = -2400.0; PlayMoveAnimation(beforePostion); isMouseCaptured = false; StackPanelMain.ReleaseMouseCapture(); } void PlayMoveAnimation(double moveToPostion) //播放移动到动画 { DoubleAnimationUsingKeyFrames keyFrames = sbMovePage.Children[0] as DoubleAnimationUsingKeyFrames; EasingDoubleKeyFrame frmae = keyFrames.KeyFrames[0] as EasingDoubleKeyFrame; frmae.Value = moveToPostion; sbMovePage.Begin(); if (moveToPostion == 0.0) Canvas.SetLeft(canvasMenuState, Canvas.GetLeft(lab01)); else if(moveToPostion == -800.0) Canvas.SetLeft(canvasMenuState, Canvas.GetLeft(lab02)); else if (moveToPostion == -1600.0) Canvas.SetLeft(canvasMenuState, Canvas.GetLeft(lab03)); else if (moveToPostion == -2400.0) Canvas.SetLeft(canvasMenuState, Canvas.GetLeft(lab04)); } void Element_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { TextBlock tb = sender as TextBlock; MyInk.Strokes.Clear(); if (tb != null) { switch (tb.Name) { case "lab01": PlayMoveAnimation(0.0); break; case "lab02": PlayMoveAnimation(-800.0); break; case "lab03": PlayMoveAnimation(-1600.0); break; case "lab04": PlayMoveAnimation(-2400.0); break; } } } #endregion void btn_Click(object sender, RoutedEventArgs e) { SelectButton = sender as UButton; if (SelectButton != null) { //设置选中状态 foreach (UButton element in SPanelToolBar.Children) { if (element == SelectButton) element.Selected = Visibility.Visible; else element.Selected = Visibility.Collapsed; } switch (SelectButton.BtnType) { case ButtonType.Move: Canvas.SetZIndex(MyInk, 0); Canvas.SetZIndex(StackPanelMain, 1); MyInk.Strokes.Clear(); this.MyInk.Cursor = Cursors.Arrow; break; case ButtonType.Brush: case ButtonType.Ink: Canvas.SetZIndex(MyInk, 1); Canvas.SetZIndex(StackPanelMain, 0); this.MyInk.Cursor = Cursors.Arrow; break; case ButtonType.Eraser: this.MyInk.Cursor = Cursors.Eraser; break; case ButtonType.Clear: MyInk.Strokes.Clear(); this.MyInk.Cursor = Cursors.Arrow; break; } } isMouseCaptured = false; } } }

   结束语：本示例中“UButton”和“ColorHelper”是工具条上自定义模版按钮控件和统一进行颜色管理的帮助类，代码并不在本示例中，如需源码请留下您的脚印。本示例希望在您使用InkPresenter控件的过程中有所帮助!