Question

从此post我开始知道存在一些平台改进实现捏合和缩放功能。通过使用这种新方法（ManipulationDeltaEventArgs.PinchManipulation），我可以在windows phone中实现捏合缩放功能。

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

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

我不希望得到Multi touch行为（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

这里有一些打印屏幕显示此代码运行正常：

Untouched image Rotated, transformed and scaled image

Answer 2

我找到了完美的灵魂，可以平稳地进行缩放和平移。它实际上是以下链接中的Microsoft Code示例 http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

我只是用它作为锅炉板代码，它创造了奇迹。

干杯

Answer 3

如果您想要自己动手，可能需要查看有关在Silverlight中缩放缩放的文章：Implementing pinch zoom correctly in Silverlight

Telerik还具有开箱即用的平移和缩放图像控制功能，但确实需要花钱：Telerik Pan and Zoom Control

Windows Phone 8中的缩放缩放功能

3 个答案: