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

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

     闲暇看"凤凰卫视"《有报天天读》，《一虎一席谈》节目时,留意到中间主持人经常拿着个笔或手在平板电脑上将页面划来划去,并不时在上面圈圈点点，让观众感觉相当时尚、并富含科技含量。在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,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,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,26 z"> <Path.OpacityMask> <linearGradIEntBrush EndPoint="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控件的过程中有所帮助!

总结

以上是内存溢出为你收集整理的《有博天天读》Silverlight中InkPresenter控件综合应用实例全部内容，希望文章能够帮你解决《有博天天读》Silverlight中InkPresenter控件综合应用实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。