Windows Phone 8 中的双指缩放功能 [英] Pinch To Zoom functionality in windows phone 8

问题描述

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

From this post i came to know that there exist some platform improvements for implementing pinch and zoom functionality. By using this new method(ManipulationDeltaEventArgs.PinchManipulation) how i can implement pinch to zoom functionality in windows phone.

除此之外，我还需要为图像控件实现滚动功能.在我当前的实现中，我使用 Toolkit(手势侦听器)以及滚动查看器来实现捏合和缩放功能，现在似乎滚动和捏合事件都重叠，因此会产生糟糕的用户体验.

Apart from this i need to implement scrolling feature too to the image control. In my current implementation, i am using Toolkit(gesture listener) for pinch and zoom functionality along with scroll viewer, now it seem both scrolling and and pinching events are overlapping and hence it produces a bad user experience.

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

Can anyone help me to solve this issue in my application. I am looking some code samples that help me to achieve the functionality.

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

I am not expected to get Multi touch behavior(codeplex) as answer. The assemblies using in the project are quite old and i heard that many of them are facing issues with marketplace submission only because of this.

推荐答案

正如我在 以前的答案 如果您正在构建 WP8 专属应用程序，您可以使用新的 ManipulationDeltaEventArgs.PinchManipulation 用于捏合&缩放效果.这是如何使用 ManipulationDeltaEventArgs.PinchManipulation 数据以缩放、移动和旋转图像.

As I said in my previous answer if you're building a WP8 exclusive app you can use the new ManipulationDeltaEventArgs.PinchManipulation for pinch & zoom effects. Here's a basic example of how to use ManipulationDeltaEventArgs.PinchManipulation data to scale, move and rotate an image.

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

First, we'll create a basic image hovering in the middle of a grid:

<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 转换.

Next, we'll handle the ManipulationDelta event, check if it's a Pinch Manipulation and apply the correct Silverlight transformations on our UIElement.

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 需要移动多少并将其应用于平移变换.请注意，此处更好的解决方案还可以通过跟踪此代码没有的累积原始中心来考虑多个操作会话.
• 旋转:我们计算出两个接触点之间的角度并将其应用为旋转变换.更多关于诺基亚维基文章@Windows Phone 8 的实时旋转地图控制

• Scaling: PinchManipulation actually tracks scaling for us, so all we had to do is apply PinchManipulation.CumulativeScale to the scaling factor.
• Transform: PinchManipulation tracks the original center and the new center (calculated between the two touch points). By subtracting the new center from the old center we can tell how much the UIElement needs to move and apply that to a translate transform. Note that a better solution here would also account for multiple Manipulation sessions by tracking cumulative original centers which this code doesn't.
• Rotation: We figured out the angle between the two touch points and applied it as the rotation transform. More on that in this Nokia wiki article @ Real-time rotation of the Windows Phone 8 Map Control

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

Here's a few print screens showing this code runs just fine:

这篇关于Windows Phone 8 中的双指缩放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！