Гладкое масштабирование и панорамирование на Windows Phone 8

Мне удалось реализовать масштабирование масштабирования и панорамирование, подключившись к событиям 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 не срабатывают правильно.

Ответы

Ответ 2

Я хотел получить это право с математической точки зрения. Результат аналогичен поправке на 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>

Math

Панорамирование и масштабирование используют 2 из 4 преобразований CompositeTransform, а именно Translation and Scaling. Ключевым моментом является понимание того, как составлять два из этих преобразований scale + translate. Я буду использовать обозначение haskellish, потому что это меньше нагрузки для ввода и чтения. Наши "примитивы"

  • scale s= масштаб вокруг (s.x, s.y) с коэффициентом s.x в направлении x и s.y в направлении y
  • translate t= смещение всех точек по t.x в направлении x и t.y в направлении 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)

A CompositeTransform похож на

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

При составлении двух из этих преобразований мы должны перемещаться по примитивам, пока не дойдем до такой формы выше. Пусть a и b - эти два композитных преобразования. Итак, мы получаем:

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)

Это происходит только потому, что я был разочарован количеством глубокой документации о том, почему некоторые люди делают определенные вещи.

Для фактического кода композиции looko здесь