14

我已经设法通过连接到 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 事件没有正确触发。

4

3 回答 3

6

I wanted to get this right from a mathematical point of view. The result is something similar in correctness to Telerik's PanAndZoomImage. If you aren't interested, jump straight to this gist (It works with WP7.1+). You'll need to reference System.Windows.Interactivity and the Windows Phone toolkit.

Usage:

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

Math

Panning and zooming uses 2 out of 4 transformations of CompositeTransform, namely Translation and Scaling. The key point is understanding how to compose two of those scale+translate transforms. I'll use haskellish notation, because it is less of burden to type and read. Our 'primitives' are

  1. scale s = scale around (s.x,s.y) with factor s.x in x direction and s.y in y direction
  2. translate t = offset all points by t.x in x direction and t.y in y direction

CompositeTransform scales around a center point, which is expressed like

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

The following rules hold (do the math if you don't believe me, all operators are componentwise):

  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)

A CompositeTransform is like

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

When composing two of those transforms, we have to move around primitives until we get to such a form above. Let a and b be those two CompositeTransforms. So we get:

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)

This is just because I was frustrated with the amount of profound documentation on why certain people do certain things.

For the actual composition code, looko here

于 2013-10-17T23:35:28.860 回答
5

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

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

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

于 2013-02-25T22:55:58.340 回答
1

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

于 2014-04-15T07:28:39.193 回答