windows phone 8 中的双指缩放功能

Question

从这个post 我知道存在一些平台改进 实现捏合和缩放功能。通过使用这种新方法(ManipulationDeltaEventArgs.PinchManipulation)，我如何在 windows phone 中实现捏缩放功能。

除此之外，我还需要为图像控件实现滚动功能。在我当前的实现中，我使用 Toolkit（手势监听器）和滚动查看器来实现捏合和缩放功能，现在看起来滚动和捏合事件是重叠的，因此会产生糟糕的用户体验。

谁能帮我解决我的应用程序中的这个问题。我正在寻找一些可以帮助我实现功能的代码示例。

我不希望得到多点触控行为（codeplex）作为答案。项目中使用的程序集已经很老了，我听说他们中的许多人仅仅因为这个而面临市场提交的问题。

Answer 1

正如我在previous answer 中所说，如果您正在构建一个 WP8 专属应用程序，您可以使用新的ManipulationDeltaEventArgs.PinchManipulation 来实现捏合和缩放效果。这是一个如何使用ManipulationDeltaEventArgs.PinchManipulation 数据来缩放、移动和旋转图像的基本示例。

首先，我们将创建一个悬停在网格中间的基本图像：

<Grid x:Name="ContentPanel">
    <Image Source="Assets\Headset.png" 
           Width="200" Height="150"
           ManipulationDelta="Image_ManipulationDelta"
           x:Name="img"
           >
        <Image.RenderTransform>
            <CompositeTransform CenterX="100" CenterY="75" />
        </Image.RenderTransform>
    </Image>
</Grid>

接下来，我们将处理 ManipulationDelta 事件，检查它是否是 Pinch Manipulation 并在我们的 UIElement 上应用正确的 Silverlight 转换。

private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    if (e.PinchManipulation != null)
    {
        var transform = (CompositeTransform)img.RenderTransform;

        // Scale Manipulation
        transform.ScaleX = e.PinchManipulation.CumulativeScale;
        transform.ScaleY = e.PinchManipulation.CumulativeScale;

        // Translate manipulation
        var originalCenter = e.PinchManipulation.Original.Center;
        var newCenter = e.PinchManipulation.Current.Center;
        transform.TranslateX = newCenter.X - originalCenter.X;
        transform.TranslateY = newCenter.Y - originalCenter.Y;

        // Rotation manipulation
        transform.Rotation = angleBetween2Lines(
            e.PinchManipulation.Current, 
            e.PinchManipulation.Original);

        // end 
        e.Handled = true;
    }
}

// copied from http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
{
    if (line1 != null && line2 != null)
    {
        double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                   line1.PrimaryContact.X - line1.SecondaryContact.X);
        double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                   line2.PrimaryContact.X - line2.SecondaryContact.X);
        return (angle1 - angle2) * 180 / Math.PI;
    }
    else { return 0.0; }
}

这是我们所做的：

• 缩放： PinchManipulation 实际上为我们跟踪缩放，所以我们所要做的就是将 PinchManipulation.CumulativeScale 应用于缩放因子。
• 变换： PinchManipulation 跟踪原始中心和新中心（在两个接触点之间计算）。通过从旧中心减去新中心，我们可以知道 UIElement 需要移动多少并将其应用于平移变换。请注意，这里更好的解决方案还可以通过跟踪此代码没有的累积原始中心来解决多个操作会话。
• 旋转：我们计算出两个接触点之间的角度并将其应用为旋转变换。更多关于此诺基亚维基文章@Real-time rotation of the Windows Phone 8 Map Control

这里有几个打印屏幕显示此代码运行良好：

Answer 2

我找到了平滑捏缩放和平移的完美解决方案。它实际上是以下链接中的 Microsoft 代码示例 http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

我只是将它用作样板代码，效果非常好。

干杯

Answer 3

如果您想自己动手，不妨看看这篇关于 Silverlight 中捏拉缩放的文章：Implementing pinch zoom correctly in Silverlight

Telerik 还有一个开箱即用的平移和缩放图像控件，但确实要花钱：Telerik Pan and Zoom Control