Silverlight example _ multi-person handwritten discussion board

 

Silverlight example _ multi-person handwritten discussion board
Let's talk about the application scenarios of this example.

 

A friend asked me to help him implement an application a few days ago. In an approval process, he asked many people to participate and discussed the drawings through the network:

• B/S implementation
• During the discussion, everyone can circle and annotate the drawing.
• Everyone circles and comments on the drawing, and others can see it instantly.
• Everyone can clear their circle points without affecting others.
• Record discussion behavior and play back

 

I made a DEOM using Silverlight. Let's take a look at the effect first:

Effect demonstration

1. After logging on to multiple users, you will see the same drawing, and you can use pens of different colors and thicknesses to circle and annotate the drawing,

 

2. When a user circle and annotate a drawing, other users loading the drawing will immediately see the labeling and comments.

 

 

3. Multiple users can circle and annotate drawings at the same time.

 

 

 

4. Each user can clear their own circle points and annotate

 

 

 

 

 

The following describes the technical points of implementation.

 

 

In Silverlight, InkPresenter is provided to display the handwritten data of Stroke. However, Silverlight does not provide InkCanvas as in WPF to capture users' handwritten input.

 

First, you must capture the user's handwritten input code in Silverlight:

The following code captures users' handwritten input, controls the color and width of the paint brush, and displays handwritten data.

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 (); }

 

Communication is required for multi-user network access. In this example, I use WCF as the communication platform.

 

There are two communication solutions for such applications,

One is point-to-point, non-server, and direct communication between clients. This method works like a walkie talkie.

The other method is the [client-server-client] mode. Communication between clients is performed through the server. This method is similar to the working principle of mobile phones. This method is used in this example.

 

The business requires two-way communication. Therefore, this example uses the client to regularly ask for updates from the server.

 

 

Finally, the problem of identity record of handwritten data is solved.

Due to requirements:

• Everyone can clear their circle points without affecting others.
• Record discussion behavior and play back

 

Stroke itself does not record the attributes of such information, so it must be extended,

In Silverlight, many components cannot be inherited. Therefore, I use additional attributes to extend the Stroke.

 

The code for appending attributes is as follows:

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 ); } }

 

Last

Other code

Download: http://files.cnblogs.com/wxwinter/SilverlightApplication2.rar