Płynne powiększanie i panoramowanie przez szczypanie w systemie Windows Phone 8

Chciałem to zrobić dobrze z matematycznego punktu widzenia. Rezultatem jest coś podobnego pod względem poprawności do PanAndZoomImage Telerika. Jeśli nie jesteś zainteresowany, przejdź od razu do tego sedna (działa z WP7.1+). Musisz odwołać się do System.Windows.Interactivity i zestawu narzędzi Windows Phone.

Użycie:

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

Matematyka

Panoramowanie i powiększanie wykorzystuje 2 z 4 przekształceń CompositeTransform, a mianowicie translację i skalowanie. Kluczową kwestią jest zrozumienie, jak skomponować dwie z tych przekształceń scale+translate. Użyję notacji haskellish, ponieważ jest mniej uciążliwa podczas pisania i czytania. Naszymi „prymitywami” są

1. scale s =skaluj wokół (s.x,s.y) ze współczynnikiem s.x w kierunku x i s.y w kierunku y
2. translate t =przesuń wszystkie punkty o t.x w kierunku x i t.y w kierunku y

CompositeTransform skaluje się wokół punktu środkowego, który jest wyrażony jako

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

Obowiązują następujące zasady (policz, jeśli mi nie wierzysz, wszystkie operatory są składowe):

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 jest jak

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

Komponując dwie z tych transformacji, musimy poruszać się po prymitywach, aż dojdziemy do takiej formy powyżej. Niech a i b być tymi dwoma CompositeTransforms. Otrzymujemy więc:

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)

Dzieje się tak tylko dlatego, że byłem sfrustrowany ilością szczegółowej dokumentacji wyjaśniającej, dlaczego niektórzy ludzie robią określone rzeczy.

Aktualny kod kompozycji znajdziesz tutaj

Wiem, że mówisz o 8 i opublikuję link do artykułu związanego z 7, ale było to bardzo przydatne podczas zabawy z Windows Phone, więc oto:

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

Nie wyobrażam sobie że od tego czasu wiele się zmieniło...