[Silverlight]玩玩電子白板,塗鴉板!

2008-12-30

6351
0
Microsoft

前言

之前看到dotjum在收集電子白板的線上範例,
因為之前玩過VML editor,也將它用在之前的專案中,
所以對於做電子白板的做法還算清楚,
而VML跟silverlight的xaml蠻類似的,
所以要純手工打造一個電子白板應該不成問題,
只是要花點時間寫code就是了.
不過看一下範例,比較吸引我的是文字辨識的部分,
因為之前玩驗證碼辨識時最多也只能辨識已知的字體,而且還是只有數字而已…
所以蠻好奇它這個應該要怎麼寫才能辨識中文.
本來是想說要抓他的*.xap檔回來拆拆看.

不過還好,後來發現了一篇MSDN雜誌的一篇文章 : [塗鴉萬歲 : 使用 Silverlight 2 建立可直接繪圖的 Web 應用程式]
大致上說明了怎麼在silberlight中使用inkPresenter的控制項來製作塗鴉板,
以及怎麼製作手寫辨識的功能.

上面的文章有點長.
因此我在這就寫一下怎麼快速寫出一個塗鴉板.
基本上要做一個塗鴉板,只要幾個步驟,再加上幾行code.

在開始以下的步驟前,
如果你還沒建立好silverlight的環境,請先參考topcat的文章 : 報告班長：新兵戰士Silverlight 2 工具裝備完成，準備出發
如果你還不知道怎麼建立silverlight的專案的話,請先參考lolota的文章 : [Silverlight]Hello Siverlight ----- Day 1

專案開始

建立一個silverlight專案.
開啟Page.xaml進行編輯
1. 增加一個InkPresenter,並給予名稱(下面的程式是給inkP)
  這個是silverlight預設就有的控制項,也是今天的主角
2. 設定InkPresenter的背景色
  這個一定要設定,不設定的話,就沒辦法塗鴉,不過,你可以設定背景色為Transparent,讓它變成透明背景,這樣在後面再放在照片的話,就可以做到在照片上塗鴉了.
3. 設定InkPresenter的滑鼠事件
  需要設定的事件分別為 : MouseLeftButtonDown,MouseLeftButtonUp,MouseMove
開啟Page.xaml.cs進行編輯
因為InkPresenter主要是透過Stroke來顯示筆畫.所以我們需要建立一個Stroke來記錄滑鼠點下,移動及放開間的筆畫位置,然後加入到InkPresenter中.
1. 宣告一個System.Windows.Ink.Stroke
  System.Windows.Ink.Stroke newStroke;
2. 撰寫MouseLeftDown的程式 : 設定筆畫物件,並加入InkPresenter中
  inkP.CaptureMouse(); //讓inkpresenter開始接收mouse的input,即使滑鼠超出這個物件的範圍,物件還是可以接收到
  newStroke = new System.Windows.Ink.Stroke(); //初始話stroke
  newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP)); //取得滑鼠事件的手寫筆點並加到Stroke中
  inkP.Strokes.Add(newStroke); //將Stroke加入InkPresenter中
3. 撰寫MouseMove : 紀錄滑鼠移動位置並加到筆畫物件中
  if (newStroke != null)
  {
  newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
  }
4. 撰寫MouseLeftButtonUp
  newStroke = null; //清除Storke
  inkP.ReleaseMouseCapture(); // 釋放滑鼠捕捉.
按下F5開始玩了!