缩放和平移仅适用于第一次尝试使用 Windows Phone 的手势监听器

Posted 2023-03-05

【中文标题】缩放和平移仅适用于第一次尝试使用 Windows Phone 的手势监听器

【英文标题】：Zooming and panning only work on first try using gesturelistener for Windows Phone

【发布时间】：2013-11-15 14:01:42

【问题描述】：

我是 windows phone 开发的新手，我正在尝试使用 Microsoft.Phone.Controls.Toolkit 来缩放和平移图像。我的问题是缩放和平移仅在第一次尝试时有效。如果我在图像上缩放/平移，请转到应用程序中的其他位置，然后返回到该图像，它不会做任何事情。 OnPinchStarted 方法在应该被调用时从不运行。我使用了几种不同的方法，这些方法是从在这里和其他地方搜索手势监听器时发现的。代码贴在下面。在我走另一条路线并以这种方式折腾之前，我想看看我所拥有的东西是否缺少一些东西，因为它第一次工作得很好。

第一次尝试：

XAML：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image x:Name="Map"
        Source="Images/park.png" 
          HorizontalAlignment="Center" VerticalAlignment="Center" 
          Stretch="Uniform" >
        <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener
                    PinchStarted="OnPinchStarted"
                    PinchDelta="OnPinchDelta"
                    DragDelta="OnDragDelta"/>
        </toolkit:GestureService.GestureListener>
        <Image.RenderTransform>
            <CompositeTransform
                    ScaleX="1" ScaleY="1"
                    TranslateX="0" TranslateY="0"/>
        </Image.RenderTransform>
    </Image>
</Grid>  

CS：

// these two fields fully define the zoom state:
    private double TotalImageScale = 1d;
    private Point ImagePosition = new Point(0, 0);


    private const double MAX_IMAGE_ZOOM = 5;
    private Point _oldFinger1;
    private Point _oldFinger2;
    private double _oldScaleFactor;

    // Initializes the zooming operation
    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    
        _oldFinger1 = e.GetPosition(Map, 0);
        _oldFinger2 = e.GetPosition(Map, 1);
        _oldScaleFactor = 1;
    

    //Computes the scaling and translation to correctly zoom around your fingers.
    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    
        var scaleFactor = e.DistanceRatio / _oldScaleFactor;
        if (!IsScaleValid(scaleFactor))
            return;

        var currentFinger1 = e.GetPosition(Map, 0);
        var currentFinger2 = e.GetPosition(Map, 1);

        var translationDelta = GetTranslationDelta(
            currentFinger1,
            currentFinger2,
            _oldFinger1,
            _oldFinger2,
            ImagePosition,
            scaleFactor);

        _oldFinger1 = currentFinger1;
        _oldFinger2 = currentFinger2;
        _oldScaleFactor = e.DistanceRatio;

        UpdateImageScale(scaleFactor);
        UpdateImagePosition(translationDelta);
    

    //Moves the image around following your finger.
    private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
    
        var translationDelta = new Point(e.HorizontalChange, e.VerticalChange);

        if (IsDragValid(1, translationDelta))
            UpdateImagePosition(translationDelta);
    

    //Computes the translation needed to keep the image centered between your fingers.

    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);
    

    //Updates the scaling factor by multiplying the delta.
    private void UpdateImageScale(double scaleFactor)
    
        TotalImageScale *= scaleFactor;
        ApplyScale();
    

    //Applies the computed scale to the image control.
    private void ApplyScale()
    
        ((CompositeTransform)Map.RenderTransform).ScaleX = TotalImageScale;
        ((CompositeTransform)Map.RenderTransform).ScaleY = TotalImageScale;
    

    //Updates the image position by applying the delta.
    //Checks that the image does not leave empty space around its edges.
    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 ((Map.ActualWidth * TotalImageScale) + newPosition.X < Map.ActualWidth)
            newPosition.X = Map.ActualWidth - (Map.ActualWidth * TotalImageScale);

        if ((Map.ActualHeight * TotalImageScale) + newPosition.Y < Map.ActualHeight)
            newPosition.Y = Map.ActualHeight - (Map.ActualHeight * TotalImageScale);

        ImagePosition = newPosition;

        ApplyPosition();
    

    //Applies the computed position to the image control.
    private void ApplyPosition()
    
        ((CompositeTransform)Map.RenderTransform).TranslateX = ImagePosition.X;
        ((CompositeTransform)Map.RenderTransform).TranslateY = ImagePosition.Y;
    

    //Resets the zoom to its original scale and position
    private void ResetImagePosition()
    
        TotalImageScale = 1;
        ImagePosition = new Point(0, 0);
        ApplyScale();
        ApplyPosition();
    

    //Checks that dragging by the given amount won't result in empty space around the image
    private bool IsDragValid(double scaleDelta, Point translateDelta)
    
        if (ImagePosition.X + translateDelta.X > 0 || ImagePosition.Y + translateDelta.Y > 0)
            return false;

        if ((Map.ActualWidth * TotalImageScale * scaleDelta) + (ImagePosition.X + translateDelta.X) < Map.ActualWidth)
            return false;

        if ((Map.ActualHeight * TotalImageScale * scaleDelta) + (ImagePosition.Y + translateDelta.Y) < Map.ActualHeight)
            return false;

        return true;
    

    //Tells if the scaling is inside the desired range
    private bool IsScaleValid(double scaleDelta)
    
        return (TotalImageScale * scaleDelta >= 1) && (TotalImageScale * scaleDelta <= MAX_IMAGE_ZOOM);
    

第二次尝试（来自http://www.wintellect.com/blogs/jprosise/building-touch-interfaces-for-windows-phones-part-4）

XAML：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid x:Name="ContentPanel" Grid.Row="1" RenderTransformOrigin="0.5,0.5" >
        <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener PinchDelta="OnPinchDelta"
        PinchStarted="OnPinchStarted" DragDelta="OnDragDelta" />
        </toolkit:GestureService.GestureListener>
        <Grid.RenderTransform>
            <CompositeTransform x:Name="HambyTransform" />
        </Grid.RenderTransform>
        <Image Source="Images/trails.png" 
               HorizontalAlignment="Center" VerticalAlignment="Center" 
          Stretch="Uniform" />
    </Grid>
</Grid>

CS：

private double _cx, _cy;
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    
        _cx = HambyTransform.ScaleX;
        _cy = HambyTransform.ScaleY;
    

    //scale the map
    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    
        //compute the new scaling factors
        double cx = _cx * e.DistanceRatio;
        double cy = _cy * e.DistanceRatio;

        // If they're between 1.0 and 4.0, inclusive, apply them

        if (cx >= 1.0 && cx <= 4.0 && cy >= 1.0 && cy <= 4.0)
        
            HambyTransform.ScaleX = cx;
            HambyTransform.ScaleY = cy;
        
    

    private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
    
        HambyTransform.TranslateX += e.HorizontalChange;
        HambyTransform.TranslateY += e.VerticalChange;
    

【参考方案1】：

在多次尝试寻找解决方案（我从未这样做过）之后，我重新开始了一个新项目，问题就消失了。缩放/平移工作正常。我不知道发生了什么，或者我的项目内部是否有问题，但它现在可以工作了。我希望这可以帮助遇到同样问题的任何人。我不得不做很多复制/粘贴代码，但它奏效了。