[Silverlight]拿畫布來畫圖 ----- Day16.1
在Silverlight中,如果要在畫面上隨意塗鴉,可以透過InkPresenter物件來作處理。
透過手寫筆、滑鼠或觸控輸入的手寫或繪圖內容來作顯示,可以藉由回應 InkPresenter 上的事件,以程式設計方式建立或擷取筆劃。
我們透過實作來瞭解:
1.
首先,建立一個全新的Silverlight專案,並在其Page.xaml檔案中輸入下列程式碼:
這裡是建立了一個InlPresenter物件,然後當進入這個物件時,會以Stylus(筆刷)的方式呈現,這邊也可以替換成「Hand」(手)、
「Arrow」(箭頭)等。
然後設定了三個事件 :
在滑鼠指標位於 UIElement 上方且按下滑鼠左鍵 (或是手寫筆筆尖碰觸 Tablet PC) 時發生。 (繼承自 UIElement)。
在滑鼠 (或手寫筆) 位於 UIElement 上方 (或 UIElement 持有滑鼠捕捉),且釋放滑鼠左鍵 (或是手寫筆筆尖離開 Tablet PC)
時發生。 (繼承自 UIElement)。
MouseMove:
在滑鼠 (或手寫筆) 位於 UIElement 上方 (或 UIElement 持有滑鼠捕捉),且滑鼠 (或手寫筆) 變更其座標位置時發生。 (繼承自 UIElement)。
2.
然後我們在對應的事件中撰寫程式碼:
我們先建立一個筆畫物件,然後設定顏色,接下來則是建立一個Flag來判斷滑鼠是否有被按下。
在MouseLeftButtonDown事件中,我們先抓到滑鼠指標,設定Flag,設定筆劃大小,收集滑鼠點的集合,然後將它新增到InkPresenter作顯示。
在MouseLeftButtonUp事件中,則是作滑鼠的指標釋放以及Flag設定。
而在MouseMove事件則是偵測是否是滑鼠抓取狀態,如果是,則繼續收集滑鼠描繪的點。然後等滑鼠觸發MouseLeftButtonDown事件時,
再新增到InkPresenter作顯示。
當你操作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發問喔。