Smooth-zoom e panoramica su Windows Phone 8

Sono riuscito a implementare lo zoom e il panning pizzicati collegando gli 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 rispetto alla fluidità del resto dell’interfaccia utente del telefono Windows si sente molto placido e rigido. Non c’è inerzia nel movimento.

C’è un modo per rendere i movimenti più fluidi? 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 triggersti ​​correttamente.

So che stai parlando di 8 e pubblicherò un link a un articolo relativo a 7, ma è stato molto utile quando si gioca 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 sia cambiato da allora …

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 elenco (Funziona con WP7.1 +). Avrai bisogno di fare riferimento a System.Windows.Interactivity e al toolkit di Windows Phone.

Uso:

      

Matematica

La panoramica e lo zoom utilizzano 2 trasformazioni su 4 di CompositeTransform, ovvero traduzione e ridimensionamento. Il punto chiave è capire come comporre due di quelle scale + tradurre le trasformazioni. Userò la notazione haskellish, perché è meno oneroso scrivere e leggere. I nostri ‘primitivi’ sono

  1. scale s = scala intorno (sx, sy) con fattore sx in direzione x e sy in direzione y
  2. translate t = sfalsa tutti i punti per tx in direzione x e ty in direzione y

Composito Trasforma le scale attorno a un punto centrale, che è express come

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

Le seguenti regole sono valide (fai i conti se non mi credi, tutti gli operatori sono 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)

Un CompositeTransform è come

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

Quando componiamo due di queste trasformazioni, dobbiamo muoverci intorno alle primitive fino a quando non arriviamo a una tale forma sopra. Sia a e b quei due CompositeTransforms. Quindi 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 dalla quantità di documentazione profonda sul perché certe persone fanno certe cose.

Per il codice effettivo della composizione, guarda qui

So che è una risposta tardiva, ma ecco un altro esempio di progetto che potrebbe aiutare a risolvere questo problema http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7