Smooth pinch-zoom e panoramica su Windows Phone 8

Question

Sono riuscito a implementare pinch zoom e panning agganciando fino agli eventi ManipulationDelta e ManipulationStarted (su un controllo immagine):

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; 
    } 

Ma la paragonato a la fluidità del resto dell'interfaccia utente del telefono Windows si sente molto placida e rigida. Non c'è inerzia nel movimento.

C'è un modo per rendere più fluidi i movimenti? Usare le animazioni e gli storyboard è un modo per farlo? Ho provato a utilizzare ScrollView per ottenere un panning minimo, ma gli eventi ManipulationDelta non vengono attivati ​​correttamente.

Answer 1

so che stai parlando di 8 e io postare un link ad un articolo relativo a 7, ma è stato molto utile quando si gioca in giro con Windows Phone così qui va:

http://www.wintellect.com/cs/blogs/jprosise/archive/2011/01/19/building-touch-interfaces-for-windows-phones-part-3.aspx

Non immagino che molto è cambiato da allora ...

Answer 2

Volevo ottenere questo da un punto di vista matematico. Il risultato è qualcosa di simile nella correttezza a PanAndZoomImage di Telerik. Se non sei interessato, vai direttamente a questo gist (Funziona con WP7.1 +). Avrai bisogno di fare riferimento a System.Windows.Interactivity e al toolkit di Windows Phone.

utilizzati:

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

Math

panning e zoom utilizza 2 di 4 trasformazioni CompositeTransform, cioè Definizione e Scaling. Il punto chiave è capire come comporre due di quelle scale + tradurre le trasformazioni. Userò la notazione haskellish, perché è meno oneroso scrivere e leggere. Nostri 'primitivi sono

1. scale s = scala muoversi (sx, sy) con fattore sx in direzione xe sy in direzione y
2. translate t = compensare tutti i punti da tx in direzione X e ty in direzione Y

CompositeTransform scale intorno a un punto centrale, che si esprime come

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

le seguenti regole tengono (fare i calcoli, se si Non mi credi, tutti gli operatori sono componente per componente):

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)

Un CompositeTransform è come

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

Durante la composizione di due di queste trasformazioni , dobbiamo muoverci intorno alle primitive finché non arriviamo a s uch un modulo sopra.Lasciate che a e b siano quei due CompositeTransforms. Così otteniamo:

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) 

Questo è solo perché ero frustrato con la quantità di documentazione di profonda sul perché certe persone fanno certe cose.

Per il codice effettiva composizione, looko here

Answer 3

Lo so che è una risposta in ritardo, ma qui è un altro progetto di esempio che potrebbe contribuire a risolvere questo problema http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7