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
