Silverlight例子_多人手写讨论板

 

Silverlight例子_多人手写讨论板

先说一下这个例子的应用场景

 

前几天,一个朋友让我帮他实现一个应用,在一个审批环节中,要求多人参与,通过网络对图纸进行讨论:

• B/S实现
• 在讨论中,每个人都可以在图纸上进行圈点,批注.
• 每个人在图纸上进行圈点,批注,其他人都可以即时看到
• 每个人都可以清除自已的圈点,批注而不影响其他人
• 记录讨论行为,并可回放

 

我用Silverlight做了一个DEOM,先看一下效果:

效果演示

1.多个用户登录后,会看到同一图纸,并可选用不同颜色,粗细的笔在图纸上进行圈点,批注,

 

2.当一个用户在图纸上进行圈点,批注时,其他加载该图纸的用户会即时看到圈点,批注的内容

 

 

3.多个用户可同时在图纸上进行圈点,批注

 

 

 

4.每个用户可清除自已的圈点,批注

 

 

 

 

 

下面说一下实现的技术点

 

 

Silverlight中提供了InkPresenter 用来显示Stroke的手写数据,但Silverlight并没有像WPF那样提供InkCanvas用以捕获用户的手写输入.

 

首先要在Silverlight中实现捕获用户的手写输入的代码:

以下代码实现捕获用户的手写输入,控制画笔颜色,粗细,并将手写数据显示的功能

System.Windows.Ink.Stroke myStroke;

Color myColor;

double wh = 2;

private void myIP_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

myIP.CaptureMouse();

StylusPointCollection MyStylusPointCollection = new StylusPointCollection();

MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(myIP));

 

myStroke = new System.Windows.Ink.Stroke(MyStylusPointCollection);

myTag.SetuserName(myStroke, username.Text);

 

 

myStroke.DrawingAttributes = new System.Windows.Ink.DrawingAttributes();

 

myStroke.DrawingAttributes.Color = myColor;

myStroke.DrawingAttributes.Width = wh;

myStroke.DrawingAttributes.Height = wh;

myIP.Strokes.Add(myStroke);

}

 

 

private void myIP_MouseMove(object sender, MouseEventArgs e)

{

if (myStroke != null)

{

myStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(myIP));

}

}

 

private void myIP_LostMouseCapture(object sender, MouseEventArgs e)

{

myStroke = null;

save();

}

 

由于是多用户网络访问,就要考虑通讯问题,这个例子我用的是WCF做为通讯平台

 

这种应用的通讯有两种方案,

一种是点对点,没的服务器,所的客户端之间直接通讯,这种方式有点象对讲机的工作原理.

另一种是[客户端-服务器-客户端]方式,客户端之间的通讯都通过服务器进行,这种方式有点象手机的工作原理.本例使用这种方式

 

业务要求通讯双向进行,所以本例使用的是客户端定时向服务器询问更新的方式

 

 

最后解决手写数据的身份记录问题

由于需求要求:

•     每个人都可以清除自已的圈点,批注而不影响其他人
•     记录讨论行为,并可回放

 

而Stroke本身并没的记录这些信息的属性,所以要对其进行扩展,

在Silverlight中,许多组件都不允许继承,所以我使用附加属性对Stroke进行扩展

 

下面是附加属性的代码

public class myTag : DependencyObject

{

public static readonly DependencyProperty userNameProperty = DependencyProperty.RegisterAttached("userName", typeof(string),typeof(myTag), new PropertyMetadata(""));

public static void SetuserName(DependencyObject element, string value)

{

element.SetValue(userNameProperty, value);

}

public static string GetuserName(DependencyObject element)

{

return (string)element.GetValue(userNameProperty);

}

}

 

最后

其它的看代码吧

例子下载: https://files.cnblogs.com/wxwinter/SilverlightApplication2.rar