Windows Phone 7 – Image加上Zoom in/out功能缩放功能

现在的位置: 首页 > 综合 > 正文

RSS

Windows Phone 7 – Image加上Zoom in/out功能缩放功能

2012年10月03日 ⁄ 综合 ⁄ 共 4758字 ⁄ 字号小中大 ⁄ 评论关闭

Windows Phone 7 - Image加上Zoom in/out功能

最近不小心迷上用手機看漫畫這件事，所以想說寫一個自己的漫畫程式，這樣可以選擇自己覺得

取得圖像資料比較快且穩定的網站。不過在撰寫過程裡，對於Image的處理卻是最為困難的地方。

不過還好，在網路上找到了這一篇資料<Windows Phone 7: correct pinch zoom in Silverlight>，裡面

針對圖像的處理提供了最完整的解釋，往下針對該篇文章提到的部分，加以說明。

〉定義XAML中Image的呈現樣式：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image x:Name="ImgZoom"
           Source="sample.jpg"
           Stretch="UniformToFill"
           RenderTransformOrigin="0,0"> 
        <toolkit:GestureService.GestureListener>
            <!-- 定義Pinch系列的事件，DoubleTap回到原圖，Drag圖像移動-->
            <toolkit:GestureListener
                    PinchStarted="OnPinchStarted"
                    PinchDelta="OnPinchDelta"
                    DragDelta="OnDragDelta"
                    DoubleTap="OnDoubleTap"/>
        </toolkit:GestureService.GestureListener>
        <Image.RenderTransform>
            <!-- 定義CompositeTransform支援Scale與Translate的特效 -->
            <CompositeTransform
                    ScaleX="1" ScaleY="1"
                    TranslateX="0" TranslateY="0"/>
        </Image.RenderTransform>
    </Image>
</Grid>

如果針對GestureService不是非常熟悉的地方，可以參考<Windows Phone 7 - 淺談手勢(Gestures)運作>的說明。

上述程式主要針對Pinch、Drag與DoubleTap三種手勢進行事件的定義，並且實作了二種RenderTransform支援

Image圖像內容的Scale、Translate二種特效。

‧Image：

在Image控件裡幾個屬性，在使用RenderTransform時需要注意的，如下：

屬性	說明
ScaleX	屬於ScaleTransform的重要屬性。控制物件的Scale X比例(横向擴大)，一種二維的X-Y坐標系統。
SacleY	屬於ScaleTransform的重要屬性。控制物件的Scale Y比例(直向擴大)，一種二維的X-Y坐標系統。
TranslateX	屬於TranslateTransform的重要屬性。控制物件的TranslatesX比例(横向移動)，一種二維的X-Y坐標系統。
TranslateY	屬於TranslateTransform的重要屬性。控制物件的TranslatesX比例(直向移動)，一種二維的X-Y坐標系統。

在處理RenderTransform裡還有包括：RotateTransform、SkewTransform、TranslateTransform、MatrixTransform等，

這些Transform可透過TransformGroup組合起來一同管理，讓套用的物件可同時具有這些效果。

定義好了圖像的基本效果與XAML後，接下來便來看看，實際如何處理：Pinch、Drag與DoubleTap的手勢事件；

〉處理Pinch事件(PinchStarted與PinchDelta)：

Pinch代表運用二個手指按在螢幕上，進行二指間的拉近與拉遠移動所觸發的事件。

在<Windows Phone 7 - 淺談手勢(Gestures)運作>提到二個事件的定義，如下：

PinchStarted：代表Pinched事件的開始，即是二個手指剛觸控於螢幕時；

PinchDelta：代表Pinched事件執行的過程，即時二個手指間距移動時觸發的事件；

(1) 在PinchStarted記下目前圖像控件的二個手指點擊的位置與設定Scale比例為1；

/// <summary>
/// Initializes the zooming operation
/// </summary>
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    //取得目前二個手指在圖像控件的座置，並且設定目前Scale比率為1
    _oldFinger1 = e.GetPosition(ImgZoom, 0);
    _oldFinger2 = e.GetPosition(ImgZoom, 1);
    
    //設定為1，代表以目前圖像的狀態進行Scale的調整
    _oldScaleFactor = 1;    
}

(2) 在PinchDelta進行一系列移動時的圖像Scale與座標移動的計算；

/// <summary>
/// Computes the scaling and translation to correctly zoom around your fingers.
/// </summary>
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    //取得移動的距離比率 / 目前的Scale比率，取得對應的Scale比率
    var scaleFactor = e.DistanceRatio / _oldScaleFactor;
    //檢查新的Scale比率是否合法
    if (!IsScaleValid(scaleFactor))
        return;
 
    //取得新的二個手指座標
    var currentFinger1 = e.GetPosition(ImgZoom, 0);
    var currentFinger2 = e.GetPosition(ImgZoom, 1);
 
    //根據目前的二手指座標、上一個二手指座標、圖像的座標、新Scale比率，重新建立一個Point
    var translationDelta = GetTranslationDelta(
        currentFinger1,
        currentFinger2,
        _oldFinger1,
        _oldFinger2,
        ImagePosition,
        scaleFactor);
 
    //更新儲存現在的手指座標與Scale比率
    _oldFinger1 = currentFinger1;
    _oldFinger2 = currentFinger2;
    _oldScaleFactor = e.DistanceRatio;
 
    //更新圖像Scale比率與圖像座標
    UpdateImageScale(scaleFactor);
    UpdateImagePosition(translationDelta);
}

透過在該PinchDelta擷取到的(1) 移動距離搭配目前的Scale比率，計算出的Scale比率；並且因為比率的改變，也要讓

(2) 圖像放大的位置是二指間的圖像區域，因此再透過二指間的座標與Scale比率等參數，計算新的座標來配合Scale

的變動；

在上述的程式裡有二個事件參數，它們均繼承GestureEventArgs加上了Pinch的部分：

‧PinchStartedGestureEventArgs：定義了二個觸控點在啟動時需要擷取到的基本資料；

屬性/方法	說明
GetPosition	回傳在相對應UIElement中二個觸控點(0或1)任一個的座標位置。
Distance	二個觸控點之間的距離。

‧PinchGestureEventArgs：定義在Pinch過程中相對於距離、角度的處理值；

屬性/方法	說明
DistanceRatio	回傳接觸點之間的當前距離/原來的接觸點之間的距離的比值。
TotalAngleDelta	回傳當前的觸摸位置和原始觸摸位置之間的角度差。

〉處理Drag事件：

Drag負責一個手指按在螢幕上，移動時連著帶動有監聽Drag事件的物件跟著移動。此程式增加Drag的機制讓圖像

可以跟著Drag的新座標進行移動的效果。如下程式：

/// <summary>
/// Moves the image around following your finger.
/// </summary>
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    //取得移動的新座標
    var translationDelta = new Point(e.HorizontalChange, e.VerticalChange);
 
    //驗證是否超過Scale後可移動範圍、目前圖像移動與實體大小的差距
    if (IsDragValid(1, translationDelta))
        UpdateImagePosition(translationDelta);
}

〉處理DoubleTab事件：

DoubleTab事件發生連續快速二次Tap(輕敲)動作於UIElement。此程式增加了在圖像上進行DoubleTab之後，將圖像復原

成原來的樣子。如下程式：

/// <summary>
/// Resets the image scaling and position
/// </summary>
private void OnDoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    TotalImageScale = 1;
    ImagePosition = new Point(0, 0);
    //呼叫ApplyScale()與ApplyPosition()根據TotalImageScale與ImagePosition
    //復原圖像的原始比例
    ApplyScale();
    ApplyPosition();
}

〉相關的副程式：

(1) 取得隨著Scale與座標改變圖像的新座標：GetTranslationDelta()；

/// <summary>
/// Computes the translation needed to keep the image centered between your fingers.
/// </summary>
private Point GetTranslationDelta(
    Point currentFinger1, Point currentFinger2,
    Point oldFinger1, Point oldFinger2,
    Point currentPosition, double scaleFactor)
{
    var newPos1 = new Point(
     currentFinger1.X + (currentPosition.X - oldFinger1.X) * scaleFactor,
     currentFinger1.Y + (currentPosition.Y - oldFinger1.Y) * scaleFactor);
 
    var newPos2 = new Point(