posts - 106, comments - 969, trackbacks - 55, articles - 11
  博客园 :: 首页 ::  :: 联系 :: 订阅 订阅 :: 管理

在Silverlight2 Beta2中实现手写功能

Posted on 2008-08-03 23:16 生鱼片 阅读(1381) 评论(5)  编辑 收藏 网摘 所属分类: Silverlight

想象一下我们在纸上写字的过程,我们需要一张纸和一只笔,然后我们下笔开始写第一字的头一个笔画,运笔的过程中我们可以根据力度来控制笔画线条的轻重,最后收笔。然后写下一个笔画......。

在Silverlight2中这张纸就是InkPresenter控件,InkPresenter控件作为一组笔画(Stroke)的容器用来现实墨迹,Ink 引用的是笔、触摸屏和鼠标输入的笔迹或者画的内容。Silverlight 中的 Ink 由StrokeCollection对象构成,StrokeCollection对象由不同的Stroke对象组成。每个Stroke对应一个笔的按下、移动和抬起序列。Stroke可以是一个点、一条直线甚至一条曲线。每个Stroke 由一个 StylusPointCollection对象组成,它又有不同的StylusPoint组成。当笔与数字转换器接触并移动的时候,StylusPoint 对象是一个集合。我们可以通过该对象的DrawingAttributes属性来设置颜色,宽度,轮廓颜色等。

下图说明InkPresenter的结构:

SLMan1 

InkPresenter不支持在该控件内来使用Stroke,StrokeCollection标记。你只能通过编程的方式来控制。下面就来简单实现一个例子来说明。InkPresenter控件中比较关键的事件为MouseLeftButtonDown,MouseMove,MouseLeftButtonUp,当InkPresenter接收到MouseLeftButtonDown事件,你需要创建一个新的Stroke在内存中,并且将其加入到StrokeCollection中,当MouseMove的时候我们将StylusPoints到Stroke中。MouseLeftButtonUp事件中结束Stroke。我们创建一个Silverlight项目,在page.xaml中添加如下代码:

<
UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle x:Name="inkBorder" Width="346" Height="234" Stroke="#FF000000"
         Canvas.Top="25" Canvas.Left="25" RadiusX="25" RadiusY="25"/>
        <InkPresenter x:Name="inkP" Width="344" Height="232" Canvas.Left="25" Canvas.Top="34"
         MouseLeftButtonDown="inkP_MouseLeftButtonDown" MouseLeftButtonUp="inkP_MouseLeftButtonUp"
         MouseMove="inkP_MouseMove" Background="LightBlue"> 
        </InkPresenter>
    </Grid>
</UserControl>

在page.xaml.cs中添加鼠标MouseLeftButtonDownMouseMoveMouseLeftButtonUp的事件处理程序来实现手写功能代码如下:

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.IO;

namespace SilverlightApplication2
{
    public partial class Page : UserControl { public Page()
        {
            InitializeComponent();
        }

        System.Windows.Ink.Stroke newStroke;       

        void inkP_MouseLeftButtonDown(object sender, MouseEventArgs e)
        {
            inkP.CaptureMouse();
            newStroke = new System.Windows.Ink.Stroke();
            newStroke.DrawingAttributes.Color = Colors.Red;
            newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;
         
            newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));           
            inkP.Strokes.Add(newStroke);
        }
        void inkP_MouseMove(object sender, MouseEventArgs e)
        {
            if (newStroke != null)
            {
                newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));               
            }
        }
        void inkP_MouseLeftButtonUp(object sender, MouseEventArgs e)
        {           
            newStroke = null;
            inkP.ReleaseMouseCapture();           
        }
    }
}

1.下面代码用来设置笔画颜色和轮廓颜色:

newStroke.DrawingAttributes.Color = Colors.Red; 
newStroke.DrawingAttributes.OutlineColor = Colors.Yellow;



运行项目后效果如下:
SLMan2 
上面只是实现了最简单的手写功能,还有很多很多不完善的地方。

本blog文章如无特殊说明,均属原创,转载请注明出处。

Feedback

#1楼   回复  引用  查看    

2008-08-03 21:01 by 真见      
告诉你个消息,Deep Zoom Composer 出来新的Preview了。
有兴趣的话去看看,http://blogs.msdn.com/expression/archive/2008/08/01/download-the-new-deep-zoom-composer-preview.aspx" target="_new">http://blogs.msdn.com/expression/archive/2008/08/01/download-the-new-deep-zoom-composer-preview.aspx

#2楼[楼主]   回复  引用  查看    

2008-08-03 21:12 by 生鱼片      
@真见
多谢了 有空我去看看

#3楼   回复  引用  查看    

2008-08-04 00:14 by Windie Chai(笑煞天)      
去年的tech-ed上有一堂课就是将silverlight做电子表单,用数字墨水填写,很好玩。

#4楼   回复  引用  查看    

2008-08-04 09:48 by t-mac.NET      
@真见
支持全景了?

#5楼   回复  引用  查看    

2008-08-04 20:21 by fox23      
有空了我也来玩玩:)
发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1259411




相关文章:

相关链接: