Windows Phone 8 上的平滑捏合缩放和平移答案

【问题标题】：Smooth pinch-zooming and panning on Windows Phone 8Windows Phone 8 上的平滑捏合缩放和平移
【发布时间】：2013-01-17 03:19:20
【问题描述】：

我已经通过连接到 ManipulationDelta 和 ManipulationStarted 事件（在图像控件上）实现了捏缩放和平移：

    private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        var transform = (CompositeTransform)image.RenderTransform;

        // pan
        transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;
        transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;

        // zoom
        if (e.PinchManipulation != null)
        {
            transform.CenterX = e.PinchManipulation.Original.Center.X;
            transform.CenterY = e.PinchManipulation.Original.Center.Y;

            transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;
            transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;
        }
    }

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
        // the user has started manipulating the screen, set starting points
        var transform = (CompositeTransform)image.RenderTransform;
        _scaleX = transform.ScaleX;
        _scaleY = transform.ScaleY;
        _translationX = transform.TranslateX;
        _translationY = transform.TranslateY;
    }

但与 windows phone UI 其余部分的流畅度相比，它感觉非常平静和僵硬。运动没有惯性。

有没有办法让动作更流畅？使用动画和故事板是一种解决方法吗？我已经尝试使用 ScrollView 至少获得平滑平移，但是 ManipulationDelta 事件没有正确触发。

【问题讨论】：

只是一个更新，因为这个问题似乎很受欢迎：我最终使用上面的代码结合以编程方式创建的动画来获得“惯性”的感觉。我还必须通过使用简单的控件（画布和位图缓存图像）进行优化，以使其顺利运行。
可能重复 - 这里解释得很好。 http://stackoverflow.com/questions/13969400/pinch-to-zoom-functionality-in-windows-phone-8

标签： c# .net windows-phone-8

【解决方案1】：

我想从数学的角度来解决这个问题。结果与 Telerik 的 PanAndZoomImage 的正确性相似。如果你不感兴趣，直接跳到这个gist（它适用于WP7.1+）。您需要参考 System.Windows.Interactivity 和 Windows Phone 工具包。

用法：

<Image Source="http://i.imgur.com/ZbKlRzK.jpg">
    <i:Interaction.Behaviors>
        <phoneApp1:PanAndZoomBehavior MaxZoom="10" />
    </i:Interaction.Behaviors>
</Image>

数学

平移和缩放使用 CompositeTransform 的 4 种变换中的 2 种，即平移和缩放。关键是了解如何组合其中两个比例+平移变换。我将使用 haskellish 表示法，因为打字和阅读的负担更小。我们的“原始人”是

scale s = 在 (s.x,s.y) 周围缩放，x 方向为 s.x，y 方向为 s.y
translate t = 将所有点在 x 方向偏移 t.x，在 y 方向偏移 t.y

CompositeTransform 围绕中心点缩放，表示为

scaleAround c s = translate c . scale s . translate -c

以下规则成立（如果您不相信我，请自行计算，所有运算符都是组件化的）：

translate a . translate b = translate (a+b)
scale a . scale b = scale (a*b)
translate t . scale s = scale s . translate (t/s)

CompositeTransform 就像

transform s c t = translate t . scaleAround c s
                = translate (t+c) . scale s . translate -c

当组合其中两个变换时，我们必须围绕基元移动，直到我们得到上面的这种形式。让 a 和 b 成为这两个 CompositeTransform。所以我们得到：

transform' = b . a
           = translate bt . scaleAround bc bs . translate at . scaleAround ac as
           = translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac
           = translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac
           = translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac
           = translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac
           = translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs)
           = translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs)

这只是因为我对关于某些人为什么做某些事情的大量深刻文档感到沮丧。

具体的组成代码，请看here

【讨论】：

【解决方案2】：

我知道你在谈论 8，我将发布与 7 相关的文章的链接，但它在玩 Windows Phone 时非常有用，所以这里是：

https://www.wintellect.com/building-touch-interfaces-for-windows-phones-part-3/

我不认为从那以后发生了很大变化......

【讨论】：

【解决方案3】：

我知道这是一个迟到的答案，但这里有另一个示例项目可以帮助解决这个问题 http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7

【讨论】：