6

从这篇文章中，我了解到存在一些用于实现捏合和缩放功能的平台改进。通过使用这种新方法（ManipulationDeltaEventArgs.PinchManipulation），我如何在 windows phone 中实现捏缩放功能。

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

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

我不希望得到多点触控行为（codeplex）作为答案。项目中使用的程序集相当陈旧，我听说他们中的许多人正因为如此而面临市场提交的问题。

4

3 回答 3

28

正如我在之前的回答中所说，如果您正在构建一个 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 需要移动多少并将其应用于平移变换。请注意，这里更好的解决方案还可以通过跟踪此代码没有的累积原始中心来解决多个操作会话。
  • 旋转：我们计算出两个触摸点之间的角度并将其应用为旋转变换。更多关于此诺基亚 wiki 文章@Windows Phone 8 地图控件的实时旋转

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

未触动的图像 旋转、变换和缩放的图像 旋转、变换和缩放的图像

于 2012-12-24T23:02:57.257 回答
4

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

我只是将它用作样板代码，它创造了奇迹。

干杯

于 2013-05-17T00:39:53.120 回答
-2

如果你想自己动手，你可能想看看这篇关于 Silverlight 中捏拉缩放的文章：在 Silverlight 中正确实现捏拉缩放

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

于 2012-12-21T06:02:19.070 回答