c# - 在 Windows Phone 8 上平滑缩放和平移

Question

我已经通过连接到 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 其余部分的流畅性相比，它感觉非常平静和僵硬。运动中没有惯性。

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

Answer 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 表示法，因为它可以减轻打字和阅读的负担。我们的“原语”是

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

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

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

以下规则成立(如果您不相信我，请计算一下，所有运算符都是按分量计算的):

1. 翻译一个 .翻译 b = 翻译 (a+b)
2. 缩放一个 .比例 b = 比例 (a*b)
3. 翻译 t 。比例 s = 比例 s 。翻译(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