Response.Write("Hello LOLOTA")

Just Code4Fun


2009 ASP/ASP.NET MVP


最新回應

在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

 

修煉大會,我們下次見~


DotBlogs Tags: SilverLight 修煉大會

回應

  • Axion 2009/6/29 下午 11:26 回覆

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

    請問要如何可以將繪圖資訊記錄下來 ?

  • lolota 2009/6/30 下午 06:01 回覆

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

    Hi Axion, 您要的功能是不是能把畫面capture成圖片檔之類的? 如果是, 我記得SL2.0沒有辦法達到.

  • Beer 2009/8/28 上午 07:12 回覆

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

    你好,你在文中最後有提到可以用rectangle來限制畫圖範圍
    可以麻煩你講解一下要怎麼做嗎?
    因為我是silverlight的新手,對它不太熟悉:p

    謝謝你唷~

  • lolota 2009/8/29 下午 08:34 回覆

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

    Hi Beer,

    您可以參考這篇文章:

    http://www.dotblogs.com.tw/lolota/archive/2009/08/29/10306.aspx

     

*標  題:

*姓  名:

  電子郵件: (將不會被顯示)

  個人網頁:

*回應

登入後使用進階評論

Please add 8 and 8 and type the answer here: