[Silverlight]拿畫布來畫圖 ----- Day16.1

[Silverlight]拿畫布來畫圖 ----- Day16.1

在Silverlight中,如果要在畫面上隨意塗鴉,可以透過InkPresenter物件來作處理。

透過手寫筆、滑鼠或觸控輸入的手寫或繪圖內容來作顯示,可以藉由回應 InkPresenter 上的事件,以程式設計方式建立或擷取筆劃。

 

我們透過實作來瞭解:

1.

首先,建立一個全新的Silverlight專案,並在其Page.xaml檔案中輸入下列程式碼:

這裡是建立了一個InlPresenter物件,然後當進入這個物件時,會以Stylus(筆刷)的方式呈現,這邊也可以替換成「Hand」(手)、

「Arrow」(箭頭)等。

然後設定了三個事件 :

MouseLeftButtonDown

在滑鼠指標位於 UIElement 上方且按下滑鼠左鍵 (或是手寫筆筆尖碰觸 Tablet PC) 時發生。 (繼承自 UIElement)。

 

MouseLeftButtonUp

在滑鼠 (或手寫筆) 位於 UIElement 上方 (或 UIElement 持有滑鼠捕捉),且釋放滑鼠左鍵 (或是手寫筆筆尖離開 Tablet PC)

時發生。 (繼承自 UIElement)。

 

MouseMove
在滑鼠 (或手寫筆) 位於 UIElement 上方 (或 UIElement 持有滑鼠捕捉),且滑鼠 (或手寫筆) 變更其座標位置時發生。 (繼承自 UIElement)。

 

2.

然後我們在對應的事件中撰寫程式碼:

 

我們先建立一個筆畫物件,然後設定顏色,接下來則是建立一個Flag來判斷滑鼠是否有被按下。

在MouseLeftButtonDown事件中,我們先抓到滑鼠指標,設定Flag,設定筆劃大小,收集滑鼠點的集合,然後將它新增到InkPresenter作顯示。

在MouseLeftButtonUp事件中,則是作滑鼠的指標釋放以及Flag設定。

而在MouseMove事件則是偵測是否是滑鼠抓取狀態,如果是,則繼續收集滑鼠描繪的點。然後等滑鼠觸發MouseLeftButtonDown事件時,

再新增到InkPresenter作顯示。

 

 image

 

線上Demo

當你操作Demo時,你會發現,在黃色區會才會呈現筆的指標,這是因為我們在InkPresenter區域中設定,所以超出時,則會顯示出滑鼠指標。

但是你又會發現,為什麼筆畫可以超出InkPresenter,那是因為在紀錄滑鼠描繪的點時,是可以超出INkPresenter的範圍,當然,你也可以透過

Rectangle物件來限制筆畫的範圍。

 

 

參考資料:

1. InkPresenter 類別:http://msdn.microsoft.com/zh-tw/library/system.windows.controls.inkpresenter(VS.95).aspx 

2. 筆墨概觀: http://msdn.microsoft.com/zh-tw/library/cc903942(VS.95).aspx

3. StylusPoint 結構:http://msdn.microsoft.com/zh-tw/library/system.windows.input.styluspoint(VS.95).aspx

 

修煉大會,我們下次見~

 

 

如果您有微軟技術開發的問題,可以到MSDN Forum發問。

如果您有微軟IT管理的問題,可以到TechNet Forum發問喔。