程式執行流程圖
本單元的目的是使用程式動態產生的連續 LineShape物件製作一個類似小畫家,可以任意塗鴉的程式,接著使用UDP連線使得繪圖動作可以在不同使用者之間互相傳遞,就變成一個線上的互動塗鴉牆了!

下載 PowerPacks for 2013
加入參考 Microsoft.VisualBasic.PowerPacks.Vs
請開啟一個新專案,雖然工具箱中有LineShape等物件(如上圖),但是因為這些物件並不是標準控制項,要使用它們必須放在ShapeContainer物件裡面,不幸的這個物件又不在工具箱中,所以必須麻煩一點,先呼叫上面的函式庫參考。方法是選擇功能表的:專案→加入參考,出現下面視窗後選擇→Microsoft.VisualBasic.PowerPacks.Vs即可:
請記得點一下「元件名稱」的標題,這會讓選項按字母排序,不然很不好找。


表單設計

請設計表單如上,三個TextBox依序為TextBox1~3,連線按鍵為Button1。

繼承不變的程式碼
以下幾個程式單元與之前的單元相同,直接打開舊專案複製即可。
首先是匯入的命名空間

接著是啟動監聽的程式

在啟動按鍵程式中會呼叫Listen副程式,你可以先建立一個程式框架,以免一直受錯誤提示困擾,如:
Private Sub Listen
End Sub

繪圖物件容器的準備
雙擊表單空白處出現Form_Load事件框架後寫入如下程式碼:

1.首先是宣告畫布物件C,也就是未來放LineShape物件的容器(Container)
2.接著是宣告 stP變數做為繪圖起點座標,請注意這是一個 Point資料結構,內部包含X與Y座標屬性。
3.宣告 p字串變數用來記錄你畫過的座標點,以便傳給遠端的玩家。
4.在 From_Load中建置C的實體(New),並將C加入為表單(Me)的控制項集合。此動作與一般設計階段拖拉工具箱物件到表單其實是一樣的!只不過 ShapeContainer這種物件目前並不在工具箱中,所以必須用程式宣告建置。

繪圖程式
繪圖程式就是在表單上的畫布物件C內加入許多小線段(LineShape),必須經過表單的滑鼠事件來完成,請先到程式碼頁面選擇Form1事件之後建立 MouseDown 與 MouseMove事件副程式框架,並填寫程式如下:

1. e.Location表示滑鼠的座標位置,也是一個 Point資料結構,所以能直接指定給 stP。
2. MouseMove的時候建立一個 L 線段物件,起點為stP,終點為目前滑鼠位置。
3.將L加入畫布C,移動stp到目前的滑鼠位置(e.Location),成為下一線段的起點。
試試看!你已經可以在表單上面塗鴉了!


傳出繪圖訊息
傳出繪圖訊息的時機是滑鼠畫完一筆畫,放開滑鼠鍵觸發MouseUp事件的時候,所以必須加入MouseUP事件副程式,而且必須在MouseDown與MouseMove事件中就持續記錄滑鼠的移動座標到變數 p,完整的滑鼠事件程式應該變成:

1. 變數 p 持續記錄滑鼠移動的座標,以逗點","分隔X與Y,以"/"分隔各點。
2. MouseUp時建立UDP物件傳送資料到指定的網路位置(IP與Port)

監聽與繪圖程式
監聽程式在此會收到遠端傳來的繪圖座標,並將座標自動繪圖,就是替遠端使用者在你的圖板上繪圖,程式如下:

1. 用"/"切開資料成為點的資訊字串陣列Q
2.用迴圈翻譯Q字串陣列為Point資料陣列R
3.用R陣列繪製連續線段,線段一為起點(StartPoint)為R(0),終點(EndPoint)為R(1),依此類推。
4.將產生的線段物件之『父(母)親』物件設為C(畫布),就可以顯示於表單了!
很有趣的語法,Me.Controls.Add好像是表單主動認養兒子;L.Parent的語法就好像千里尋母,孩子自己找爸媽了!
至此程式已經完成,可以找同學互相指定適當的 IP與 Port進行測試了!

當然有空還可以試試看改變筆的顏色與粗細,就是改變LineShape物件的 BorderColor與 BorderWidth屬性。也可以試試看使用 RectangleShape(矩形)與 OvalShape(橢圓)等不同形狀的物件。