Silverlight 多點觸控中圖形的放大縮小

談過了捕捉觸控點、以及透過觸控屏幕來手寫繪圖之後，當然，我們也希望能夠像Surface或是Mobile Phone那樣，能夠用手指直接放大縮小圖形，這一個部分就牽扯到所謂的筆勢(gesture)了。

 

儘管Silverlight Touch API中並沒有直接支持筆勢，但我們還是可以透過先前介紹過的API來實現相關的行爲。

 

從概念上來看，當我們要實現用兩個觸控點來縮放圖形時，整個概念如下：

假設場景中有多個觸控點，其中有兩個觸控點同時點選在某一個對象上，並且開始拖曳(Move)，而拖曳的過程中兩個觸控點的距離D愈來愈遠，我們就視爲用戶要將圖形放大，反之，若兩點的距離愈來愈近，我們則視爲圖形縮小。

 

在這個概念下，我們需要判斷並處理幾個狀況：

1.      是否有兩個觸控點同時點在一個對象上。

2.      這兩個觸控點移動時，取得觸控點之間的距離D。

3.      在觸控點移動時，透過兩點距離D，來調整被觸控對象的大小。

 

請參考先前的程序一，在先前實作的功能中，我們僅實現了拖曳的功能，現在我們看一下『Case TouchAction.Move』部分：

Case TouchAction.Move '當動作爲移動 If p.Action = TouchAction.Move Then '是否還有其他點在同一個對象身上? If isMultiPoints(p.TouchDevice.DirectlyOver, e) Then '縮放 '如果第一點是空值 If ElementLastDistance(i) = 0 Then ElementLastDistance(i) = getFirst2PointsDistance(p.TouchDevice.DirectlyOver, e) Else Dim offset As Integer = getFirst2PointsDistance(p.TouchDevice.DirectlyOver, e) - ElementLastDistance(i) ElementLastDistance(i) = getFirst2PointsDistance(p.TouchDevice.DirectlyOver, e) 'rectangle If element.GetType() Is GetType(Image) Then CType(element, Rectangle).Height = CType(element, Rectangle).Height * (1 + offset / SenseValue) CType(element, Rectangle).Width = CType(element, Rectangle).Width * (1 + offset / SenseValue) End If End If Else '移動 '取得新座標 Dim x, y As Integer x = p.Position.X - originalPointPosistions(i).X y = p.Position.Y - originalPointPosistions(i).Y If element IsNot Nothing Then element.SetValue(Canvas.LeftProperty, originalElementPosistions(i).X + x) element.SetValue(Canvas.TopProperty, originalElementPosistions(i).Y + y) End If End If End If

 

我們在程序代碼當中加入了幾個動作，分別是判斷同一個對象是否被兩個以上的觸控點所點選，以及這兩個觸控點之間的距離，接着，再透過這兩個觸控點之間的距離來動態調整Image對象的大小，就形成我們需要的效果了。

總的來說，Silverlight中的Multi-Touch技術相較而言並不困難，雖然沒有龐大的.NET Framework作爲後盾，但簡單好用的Touch API也足以讓我們建構出不錯的Web/RIA應用程序，而具體的實現方式就有賴開發人員的設計了。

 

總的來說，Silverlight作爲第一個支持Multi-Touch功能的RIA/Web應用程序開發技術，一舉將因特網應用程序的應用層面，擴展到另一個領域，讓應用程序的價值大增，也讓開發人員能夠發揮更多的創意。