windows-phone-7 - Windows Phone 8 中的双指缩放功能

Question

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

除此之外，我还需要为图像控件实现滚动功能。在我当前的实现中，我使用 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 事件，检查它是否是捏合操作并在我们的 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 需要移动多少并将其应用于平移变换。请注意，此处更好的解决方案还可以通过跟踪此代码没有的累积原始中心来考虑多个操作 session 。

轮换:我们计算出两个触摸点之间的角度并将其应用为旋转变换。更多关于诺基亚维基文章@ Real-time rotation of the Windows Phone 8 Map Control

下面是一些显示此代码运行良好的打印屏幕: