2010年2月24日 星期三

Silverlight 3.0 + Multi-touch

Silverlight是微軟最新的Web用戶介面技術,它能夠跨流覽器、跨平臺運行.
Silverlight 3.0 上也支援多點觸控功能 , 但目前功能還是相當有限, 只能取得觸控點的資料,
若要想要有手勢的功能的話, 需要透過觸控點另外作計算.


Silverlight的多點觸控架構如下:



從上圖可知, 要寫一個Silverlight的觸控程式, 必要元素要有: Touch Device + Windows 7 + IE 8

Windows Touch API 不一樣的地方, Silverlight 不需要註冊RegisterTouchWindow, 是以整個應用程式為範圍來註冊多點觸控事件, 而不是在UIElement 加入觸控事件(WPF).

撰寫Silverlight multi-touch application的流程如下:

(1)註冊多點觸控的處理常式 - TouchFrameReported(它是一個static function)
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

針對多點觸控所發生的事件,Silverlight預設將多點觸控事件提升為滑鼠事件, 若不希望升級成滑鼠事件, 可以呼叫 SuspendMousePromotionUntilTouchUp

(2)取得觸控點的資料
TouchPoint GetPrimaryTouchPoint(UIElement relativeTo) --> 取得主要觸控點資料
TouchPointCollection GetTouchPoints(UIElement relativeTo) --> 取得所有觸控點資料

傳入一個UIElement將回傳相對偏移的 Position 產生包含相對座標的 TouchPoint.
如果想要獲得觸控點的的絕對座標, 請將 relativeTo 指定為 null.

觸控點的其他資訊如下所示;

example code:
foreach (TouchPoint tp in e.GetTouchPoints(_canvas))
{
// 取得作業系統針對特定觸控裝置所提供的唯一 ID
tp.TouchDevice.Id;

// 取得當觸控點產生時,滑鼠指標所停留的最上層 UIElement 物件
tp.TouchDevice.DirectlyOver

// 取得觸控點的 X, Y 座標位置(相當於觸控區域的中心點位置)
tp.Position;

// 取得觸控點接觸區域(其區域為一個矩形)
tp.Size;
}


(3) 識別觸控的動作 -TouchAction
觸控點的動作可分成下列3種:


TouchAction.Down: 來自 TOUCHEVENTF_DOWN 訊息的觸控動作
TouchAction.Move: 來自 TOUCHEVENTF_MOVE 訊息的觸控動作

TouchAction.Up:來自 TOUCHEVENTF_UP 訊息的觸控動作


下圖為利用Silverlight開發的繪圖板. 因此在網頁上也可利用觸控作繪圖.




P.S: 若要使用Silverlight 來作為開發工具. 如果您沒有 Visual Web Developer,請使用 Web Platform Installer,如果您已有 Visual Studio, 請直接下載這個工具 ( Silverlight 3 SDK )

參考文章:
Silverlight 3 Multi-touch: The Basics
Silverlight 3 中的multi-Touch程式開發
Silverlight 3 Multi-Touch with Windows 7 and HP Touch Smart