|
Silverlight多點觸控中圖形放大縮小
談過了捕捉觸控點、以及透過觸控屏幕來手寫繪圖之后，當然，我們也希望能夠像Surface或是Mobile Phone那樣，能夠用手指直接放大縮小圖形，這一個部分就牽扯到所謂的筆勢(gesture)了。
盡管Silverlight Touch API中并沒有直接支持筆勢，但我們還是可以透過先前介紹過的API來實現(xiàn)相關的行為。
從概念上來看，當我們要實現(xiàn)用兩個觸控點來縮放圖形時，整個概念如下：
假設場景中有多個觸控點，其中有兩個觸控點同時點選在某一個對象上，并且開始拖曳(Move)，而拖曳的過程中兩個觸控點的距離D愈來愈遠，我們就視為用戶要將圖形放大，反之，若兩點的距離愈來愈近，我們則視為圖形縮小。
在這個概念下，我們需要判斷并處理幾個狀況：
- 是否有兩個觸控點同時點在一個對象上。
- 這兩個觸控點移動時，取得觸控點之間的距離D。
- 在觸控點移動時，透過兩點距離D，來調(diào)整被觸控對象的大小。
請參考先前的程序一，在先前實作的功能中，我們僅實現(xiàn)了拖曳的功能，現(xiàn)在我們看一下『Case TouchAction.Move』部分：
view plaincopy to clipboardprint?
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
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
我們在程序代碼當中加入了幾個動作，分別是判斷同一個對象是否被兩個以上的觸控點所點選，以及這兩個觸控點之間的距離，接著，再透過這兩個觸控點之間的距離來動態(tài)調(diào)整Image對象的大小，就形成我們需要的效果了。
總的來說，Silverlight中的Multi-Touch技術相較而言并不困難，雖然沒有龐大的.NET Framework作為后盾，但簡單好用的Touch API也足以讓我們建構(gòu)出不錯的Web/RIA應用程序，而具體的實現(xiàn)方式就有賴開發(fā)人員的設計了。
總的來說，Silverlight作為第一個支持Multi-Touch功能的RIA/Web應用程序開發(fā)技術，一舉將因特網(wǎng)應用程序的應用層面，擴展到另一個領域，讓應用程序的價值大增，也讓開發(fā)人員能夠發(fā)揮更多的創(chuàng)意。
本文鏈接：http://www.95time.cn/tech/multimedia/2010/7629.asp 
出處：藍色理想
責任編輯：bluehearts
◎進入論壇RIA設計與應用版塊參加討論
|
