通訊機制與流程圖
 
本單元繼承聊天室單元的通訊機制,加上同學做過UDP版本的塗鴉牆,而且伺服端程式可以直接使用聊天室的伺服端程式,完全不必修改!所以算是一個相當簡單的單元。
如上圖,基本流程就是在本機端繪圖時將座標一一記在P字串,再以私密訊息的方式傳遞給指定的對象即可,與文字交談唯一的差別是使用不同的命令碼("3"),讓接收端收到訊息時知道這是繪圖動作,必須將座標拆解為線段,並繪製到圖板上即可。

客戶端表單
請承襲聊天室程式,IP顯示於TextBox1,Port顯示於TextBox2,我是誰顯示於TextBox3,再加入一個可以繪圖使用的PictureBox1,及清除繪圖的Button4,原先的看板TextBox4則簡化為一個顯示系統訊息的簡單TextBox,如下圖:


客戶端主動繪圖的程式
下載 PowerPacks for 2013
1.如果使用VS 2013版軟體請先下載上面的元件,加入參考(組件→擴充功能的)Microsoft.VisualBasic.PowerPacks,如下:

如果是VS 2010版程式,請加入參考 Microsoft.VisualBasic.PowerPacks.Vs(參考UDP塗鴉牆單元)

2.建立畫布與繪圖公用變數

請注意畫布canvas物件是加入到 PictureBox1裡面,這表示稍後加入Shape物件的座標都是以 PictureBox1內部座標為準,不是表單(Form1)的座標。

3.繪圖程式(PictureBox1的 MouseDown、MouseMove與 MouseUp)

MouseDown時開始記錄座標到P字串,MouseMove時持續記錄座標於P字串, MouseUp時將P字串以命命碼"3"傳給指定對象。在此所謂『繪圖』的動作其實是持續產生許多 LineShape小線段,比起實際使用 Graphics物件繪製線段(DrawLine)反應速度會快一點,但是要將影像存檔時會發現其實這些 LineShape並不是Image屬性的一部份,簡單說就是浮貼在PictureBox1或canvas上面,要取得你看到的圖樣,還需要更多程式處理。各有利弊之下,以設計遊戲來說使用Shapes物件會比較好!(速度快)

本機清除畫面的程式(Button2)
除了清除自己的畫面(canvas.Shapes.Clear)之外,這也是一個『繪圖』動作,必須傳給對方,內容用一個"C"代表即可。當然,如果未選擇對象時不必傳資料到伺服器。


有關網路通訊的程式碼
這部分基本上與TCP聊天室相同,首先命名空間匯入是一定要的:

接著是連線伺服器的程式碼如下都需要複製過來:

傳訊息的程式與離線的程式當然也不可少!

監聽用的副程式Listen也是一定要的,可以從之前的聊天室拷貝過來。

客戶端被動繪圖的程式
接收到遠端繪圖座標時必須以程式碼控制重複對方的繪圖動作, Listen副程式可拷貝前一單元,加入接收命令碼"3"的處理項目,程式碼如下,Listen程式的其餘部分程式碼可以不修改,但是Case "1" 與 "2" 在此範例不會用到可以刪除!剩下Case "L"(顯示線上名單) 與 "3"即可。

程式說明:
1.收到"3"訊息之後會先顯示於TextBox4這只是一個提示,表示有一個塗鴉訊息傳到。
2.塗鴉訊息如果只是一個"C",表示對方要求清除畫面,就執行 cnvas.Shapes.Clear
3.如果是一般的繪圖動作會有一串以"/"分隔的座標,每點的X與Y以","分隔。就分解它們繪製成 LineShapes小線段物件。

這樣就完成基本的連線塗鴉功能了!測試時請不要忘了所有該做的網路連結動作。畫面大概如下:


進階挑戰:
1.如何設定筆的顏色與粗細?
2.有可能傳遞影像嗎?