Windows Phone 7 - Image加上Zoom in/out功能 | Pou's IT Life - 點部落

2012-09-26

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

6721
0
Windows Phone
2013-06-05

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(
		
     currentFinger2.X + (currentPosition.X - oldFinger2.X) * scaleFactor,
		
     currentFinger2.Y + (currentPosition.Y - oldFinger2.Y) * scaleFactor);
		
  
		
    var newPos = new Point(
		
        (newPos1.X + newPos2.X) / 2,
		
        (newPos1.Y + newPos2.Y) / 2);
		
  
		
    return new Point(
		
        newPos.X - currentPosition.X,
		
        newPos.Y - currentPosition.Y);
		
}

(2) 執行圖像Scale與Position更換的方法：ApplyScale()與ApplyPosition()；

依賴編輯好的公用變數：TotalImageScale與ImagePosition，進行圖像控件的調整；

/// <summary>
		
/// Applies the computed position to the image control.
		
/// </summary>
		
private void ApplyPosition()
		
{
		
    ((CompositeTransform)ImgZoom.RenderTransform).TranslateX = ImagePosition.X;
		
    ((CompositeTransform)ImgZoom.RenderTransform).TranslateY = ImagePosition.Y;
		
}
		
  
		
/// <summary>
		
/// Applies the computed scale to the image control.
		
/// </summary>
		
private void ApplyScale()
		
{
		
    ((CompositeTransform)ImgZoom.RenderTransform).ScaleX = TotalImageScale;
		
    ((CompositeTransform)ImgZoom.RenderTransform).ScaleY = TotalImageScale;
		
}

上述中CompositeTransform.ScaleX/ScaleY、CompositeTransform.TranslateX/TranslateY，該CompositeTransform是什麼呢？

‧CompositeTransform：提供一個整合的對象，讓開發人員可以直接設定物件對應的Transform對象；

(3) 識別新的Scale與Translate是否符合圖像的限制：IsScaleValid()與IsDragValid()；

/// <summary>
		
/// Checks that dragging by the given amount won't result in empty space around the image
		
/// </summary>
		
private bool IsDragValid(double scaleDelta, Point translateDelta)
		
{
		
    if (ImagePosition.X + translateDelta.X > 0 || ImagePosition.Y + translateDelta.Y > 0)
		
        return false;
		
  
		
    if ((ImgZoom.ActualWidth * TotalImageScale * scaleDelta) + (ImagePosition.X + translateDelta.X) < ImgZoom.ActualWidth)
		
        return false;
		
  
		
    if ((ImgZoom.ActualHeight * TotalImageScale * scaleDelta) + (ImagePosition.Y + translateDelta.Y) < ImgZoom.ActualHeight)
		
        return false;
		
  
		
    return true;
		
}
		
  
		
/// <summary>
		
/// Tells if the scaling is inside the desired range
		
/// </summary>
		
private bool IsScaleValid(double scaleDelta)
		
{
		
    //比對 "總Image Scale * 移動新的Scale 是否有大於1 ，而且 
		
    //比對 "總Image Scale * 移動新的Scale 是否有大於1 ，小於等於最大Scale比率
		
    return (TotalImageScale * scaleDelta >= 1) && (TotalImageScale * scaleDelta <= MAX_IMAGE_ZOOM);
		
}

(4) 搭配PinchDelta()與DragDelta()的方式，進行計算並且變動Scale與Position：UpdateImageScale()與UpateImagePosition()；

例如：PinchDelta()改變Scale也配合調整了Position；DragDelta()改變Position；

/// <summary>
		
/// Updates the scaling factor by multiplying the delta.
		
/// </summary>
		
private void UpdateImageScale(double scaleFactor)
		
{
		
    TotalImageScale *= scaleFactor;
		
    ApplyScale();
		
}
		
  
		
/// <summary>
		
/// Updates the image position by applying the delta.
		
/// Checks that the image does not leave empty space around its edges.
		
/// </summary>
		
private void UpdateImagePosition(Point delta)
		
{
		
    var newPosition = new Point(ImagePosition.X + delta.X, ImagePosition.Y + delta.Y);
		
  
		
    if (newPosition.X > 0) newPosition.X = 0;
		
    if (newPosition.Y > 0) newPosition.Y = 0;
		
  
		
    if ((ImgZoom.ActualWidth * TotalImageScale) + newPosition.X < ImgZoom.ActualWidth)
		
        newPosition.X = ImgZoom.ActualWidth - (ImgZoom.ActualWidth * TotalImageScale);
		
  
		
    if ((ImgZoom.ActualHeight * TotalImageScale) + newPosition.Y < ImgZoom.ActualHeight)
		
        newPosition.Y = ImgZoom.ActualHeight - (ImgZoom.ActualHeight * TotalImageScale);
		
  
		
    ImagePosition = newPosition;
		
  
		
    ApplyPosition();
		
}