在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手机用户界面的平滑度相比,它感觉非常平静和僵硬.机芯没有惯性.

有没有办法让运动更顺畅？使用动画和故事板是一种方法吗？我尝试使用ScrollView至少进行平滑平移,但ManipulationDelta事件未正确触发.

Answer 1

我知道你在谈论 8，我会发布一个与 7 相关的文章的链接，但是在使用 Windows Phone 时它​​非常有用，所以它是这样的：

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

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

Answer 2

我想从数学的角度来看这一点.结果类似于Telerik的PanAndZoomImage的正确性.如果你不感兴趣,直接跳到这个要点(它适用于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个,即Translation和Scaling.关键是要了解如何组合其中两个scale + translate变换.我将使用haskellish表示法,因为输入和阅读的负担较小.我们的"原始人"是

1. scale s =围绕(sx,sy)缩放,在x方向上具有因子sx,在y方向上具有sy
2. translate t =在x方向上将所有点偏移tx,在y方向上偏移ty

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

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

以下规则成立(如果您不相信我,请进行数学运算,所有运算符都是分数):

1. translate a . translate b = translate (a+b)
2. scale a . scale b = scale (a*b)
3. 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是这两个CompositeTransforms.所以我们得到:

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)

这只是因为我对某些人做某些事情的深刻文献感到沮丧.

对于实际的组合代码,请在此处查看