学步园

之前看过有用WPF+WCF实现共享白板的示例(CodeProject: http://www.codeproject.com/KB/WCF/DrawMeWCF.aspx) ，最近闲来无事重复造个Winform的轮子。在那篇文章里，利用了WPF的 InkCanvas Control + WCF Duplex 实现了某个客户端画图提交到服务端，服务端负责通知其他客户端。

先说说我的思路：服务端画图，客户端通过Timer轮询获得服务端画图信息，重画到自己的窗体上，使得客户端看上去像是在和服务端同步画图。先上张效果图：左边是Server，右边是Client。

当然这样有个不足，就是只能在服务端画图客户端收看。

工程很简单，窗体+WCF Library，窗体是服务端和客户端共用的，程序login的时候区分是服务端还是客户端：

public partial class Login : Form<br /> {<br /> public Login()<br /> {<br /> InitializeComponent();<br /> }<br /> private void btnLogin_Click(object sender, EventArgs e)<br /> {<br /> Main main = Application.OpenForms["Main"] as Main;<br /> if (radServer.Checked)<br /> {<br /> main.IsServer = true;<br /> this.Close();<br /> }<br /> else if (radClient.Checked)<br /> {<br /> main.IsServer = false;<br /> this.Close();<br /> }<br /> else<br /> MessageBox.Show(this, "Please select the type.");<br /> }<br /> private void btnCancel_Click(object sender, EventArgs e)<br /> {<br /> Application.Exit();<br /> }<br /> }  

选择服务端启动时，则将WCF Service Host到当前的Windows Form应用上。关于Winform Host，需要注意把ServiceHost封装到线程里，避免UI阻塞。(参看我的另一篇博客：WCF常见问题(2) -- Winform Host UI阻塞)

Text += "[Server]";<br /> Host = new ThreadedServiceHost(typeof(WcfShareDrawLib.DrawService));<br /> Host.Open();

选择客户端启动时，通过WCF Data Contract(Interface)创建远程代理，因为共用Winform工程，App.config也是共用的，因此利用ConfigurationManager读取ServiceModel配置里的服务地址，避免了硬编码写死地址。
#region get info from config<br /> var conf = ConfigurationManager.OpenExeConfiguration(Assembly.GetEntryAssembly().Location);<br /> var svcConf = (ServiceModelSectionGroup)conf.GetSectionGroup("system.serviceModel");<br /> var address = "";<br /> foreach (ServiceElement svc in svcConf.Services.Services)<br /> address = svc.Host.BaseAddresses[0].BaseAddress;<br /> #endregion<br /> var binding = new NetTcpBinding();<br /> binding.CloseTimeout = new TimeSpan(0, 10, 0);<br /> binding.ReceiveTimeout = new TimeSpan(0, 10, 0);<br /> binding.SendTimeout = new TimeSpan(0, 10, 0);<br /> var factory = new ChannelFactory<IDrawService>(binding, address);<br /> factory.Open();<br /> Client = factory.CreateChannel();  

完整的MainForm代码：
public partial class Main : Form<br /> {<br /> public Main()<br /> {<br /> InitializeComponent();<br /> }<br /> private DrawCtrl _draw;<br /> public bool IsServer { get; set; }<br /> public ThreadedServiceHost Host { get; set; }<br /> public IDrawService Client { get; set; }<br /> private void Form1_Load(object sender, EventArgs e)<br /> {<br /> _draw = new DrawCtrl();<br /> this.SetStyle(ControlStyles.OptimizedDoubleBuffer |<br /> ControlStyles.ResizeRedraw |<br /> ControlStyles.AllPaintingInWmPaint, true);<br /> }<br /> private void Main_Shown(object sender, EventArgs e)<br /> {<br /> var login = new Login();<br /> login.StartPosition = FormStartPosition.CenterParent;<br /> login.ShowDialog(this);<br /> if (IsServer)<br /> SetServer();<br /> else<br /> SetClient();<br /> }<br /> private void Main_FormClosing(object sender, FormClosingEventArgs e)<br /> {<br /> timer1.Stop();<br /> if (Client != null)<br /> ((IDisposable)Client).Dispose();<br /> if (Host != null)<br /> ((IDisposable)Host).Dispose();<br /> _draw.Dispose();<br /> }<br /> private void SetServer()<br /> {<br /> Text += "[Server]";<br /> Host = new ThreadedServiceHost(typeof(WcfShareDrawLib.DrawService));<br /> Host.Open();<br /> DrawService.OnRequestData += () => { return _draw.Lines; };<br /> panel1.Paint += (s, evt) => { _draw.DrawAll(evt.Graphics); };<br /> panel1.MouseDown += (s, evt) => { _draw.Begin(); };<br /> panel1.MouseMove += (s, evt) => { _draw.Draw(panel1.CreateGraphics(), evt.Location); };<br /> panel1.MouseUp += (s, evt) => { _draw.DrawTemp(panel1.CreateGraphics()); _draw.Stop(); };<br /> btnRedraw.Click += (s, evt) => { _draw.Clear(panel1.CreateGraphics(), panel1.BackColor); };<br /> }<br /> private void SetClient()<br /> {<br /> Text += "[Client]";<br /> #region get info from config<br /> var conf = ConfigurationManager.OpenExeConfiguration(Assembly.GetEntryAssembly().Location);<br /> var svcConf = (ServiceModelSectionGroup)conf.GetSectionGroup("system.serviceModel");<br /> var address = "";<br /> foreach (ServiceElement svc in svcConf.Services.Services)<br /> address = svc.Host.BaseAddresses[0].BaseAddress;<br /> #endregion<br /> var binding = new NetTcpBinding();<br /> binding.CloseTimeout = new TimeSpan(0, 10, 0);<br /> binding.ReceiveTimeout = new TimeSpan(0, 10, 0);<br /> binding.SendTimeout = new TimeSpan(0, 10, 0);<br /> var factory = new ChannelFactory<IDrawService>(binding, address);<br /> factory.Open();<br /> Client = factory.CreateChannel();<br /> timer1.Interval = 1000;<br /> timer1.Start();<br /> timer1.Tick += (s, evt) =><br /> {<br /> try<br /> {<br /> var lines = Client.GetDrawData();<br /> if (lines.Count > 1)<br /> _draw.DrawAll(panel1.CreateGraphics(), lines);<br /> else<br /> _draw.Clear(panel1.CreateGraphics(), panel1.BackColor);<br /> }<br /> catch (Exception)<br /> { }<br /> };<br /> }<br /> }  

可以看到客户端起动一个Timer,定时向服务索取画图信息:
var lines = Client.GetDrawData();
服务端的GetDrawData()方法并调用时，将触发一个static事件：OnRequestData。服务端UI注册了这个事件的处理方法，将当前的图片信息返回。简单的过程如下图：

WCF Service的代码：
[ServiceBehavior(InstanceContextMode=InstanceContextMode.Single,<br /> ConcurrencyMode=ConcurrencyMode.Multiple)]<br /> public class DrawService : IDrawService<br /> {<br /> public static event Func<List<List<Point>>> OnRequestData;<br /> public List<List<Point>> GetDrawData()<br /> {<br /> return OnRequestData();<br /> }<br /> }
当然，我们还需要一个画图的控制类：
(在上面UI的代码中，SetService方法里在各个UI事件里调用了下面的方法)
1. 鼠标按下时，开始
2. 鼠标按下移动时，记录坐标并画当前的线
3. 鼠标松开时，结束(重画当前画的这一条线,否则会有断点显得线条不平滑)

4. 在Paint事件里，重画所有线条
public class DrawCtrl : IDisposable<br /> {<br /> private List<List<Point>> _lines;<br /> private List<List<Point>> _tempLines;<br /> private List<Point> _newLine;<br /> private bool _isDrawing;<br /> private Pen _pen;<br /> private int _redrawNum;<br /> public List<List<Point>> Lines<br /> {<br /> get<br /> {<br /> lock (this)<br /> {<br /> return _lines;<br /> }<br /> }<br /> }<br /> public DrawCtrl()<br /> {<br /> _lines = new List<List<Point>>();<br /> _tempLines = new List<List<Point>>();<br /> _isDrawing = false;<br /> _pen = new Pen(Brushes.Black, 5);<br /> }<br /> public void Begin()<br /> {<br /> _isDrawing = true;<br /> _newLine = new List<Point>();<br /> _tempLines.Clear();<br /> _lines.Add(_newLine);<br /> _tempLines.Add(_newLine);<br /> _redrawNum = 0;<br /> }<br /> public void Stop()<br /> {<br /> _isDrawing = false;<br /> }<br /> public void Draw(Graphics g, Point p)<br /> {<br /> if (!_isDrawing) return;<br /> lock (this)<br /> {<br /> _newLine.Add(p);<br /> var count = _newLine.Count;<br /> if (count > 1)<br /> {<br /> g.DrawLine(_pen, _newLine[count - 2], _newLine[count - 1]);<br /> g.Dispose();<br /> }<br /> }<br /> }<br /> public void Clear(Graphics g, Color color)<br /> {<br /> lock (this)<br /> {<br /> _lines.Clear();<br /> }<br /> g.Clear(color);<br /> }<br /> public void DrawAll(Graphics g)<br /> {<br /> DrawAll(g, _lines);<br /> }<br /> public void DrawTemp(Graphics g)<br /> {<br /> DrawAll(g, _tempLines);<br /> }<br /> public void DrawAll(Graphics g, List<List<Point>> lines)<br /> {<br /> lock (this)<br /> {<br /> lines.ForEach(line => { if (line.Count > 1) g.DrawLines(_pen, line.ToArray()); });<br /> g.Dispose();<br /> }<br /> }<br /> public void Dispose()<br /> {<br /> _lines.ForEach(l => l.Clear());<br /> _lines.Clear();<br /> _pen.Dispose();<br /> }<br /> } 

OK，一个简单的白板共享的程序就搞定了。