Pizzica per ingrandire su immagini enormi?

Question

Ho trovato questo esempio Pinch-to-zoom a http://forums.create.msdn.com

Ecco il codice XAML:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
      <StackPanel> 
       <TextBlock Text="Tap to center" Style="{StaticResource PhoneTextNormalStyle}"/> 
       <TextBlock Text="Tap and hold to reset" Style="{StaticResource PhoneTextNormalStyle}"/> 
       <TextBlock Text="Touch and move to drag" Style="{StaticResource PhoneTextNormalStyle}"/> 
       <TextBlock Text="Pinch (touch with two fingers) to scale and rotate" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/> 
       <TextBlock Text="Flick (drag and release the touch while still moving) will show flick data on bottom of screen." Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap"/> 
      </StackPanel> 
      <TextBlock x:Name="flickData" Text="Flick:" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Bottom"/> 
      <Image x:Name="image" Source="/map.jpg" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"> 
       <Image.RenderTransform> 
        <CompositeTransform x:Name="transform"/> 
       </Image.RenderTransform> 
       <toolkit:GestureService.GestureListener> 
        <toolkit:GestureListener 
         Tap="OnTap" Hold="OnHold" 
         DragStarted="OnDragStarted" DragDelta="OnDragDelta" DragCompleted="OnDragCompleted" 
         Flick="OnFlick" 
         PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/> 
       </toolkit:GestureService.GestureListener> 
      </Image> 
     </Grid> 

E la fonte cs:

public partial class GestureSample : PhoneApplicationPage 
    { 
     double initialAngle; 
     double initialScale; 

     public GestureSample() 
     { 
      InitializeComponent(); 
     } 

     private void OnTap(object sender, GestureEventArgs e) 
     { 
      transform.TranslateX = transform.TranslateY = 0; 
     } 

     private void OnDoubleTap(object sender, GestureEventArgs e) 
     { 
      transform.ScaleX = transform.ScaleY = 1; 
     } 

     private void OnHold(object sender, GestureEventArgs e) 
     { 
      transform.TranslateX = transform.TranslateY = 0; 
      transform.ScaleX = transform.ScaleY = 1; 
      transform.Rotation = 0; 
     } 

     private void OnDragStarted(object sender, DragStartedGestureEventArgs e) 
     { 
      image.Opacity = 0.3; 
     } 

     private void OnDragDelta(object sender, DragDeltaGestureEventArgs e) 
     { 
      transform.TranslateX += e.HorizontalChange; 
      transform.TranslateY += e.VerticalChange; 
     } 

     private void OnDragCompleted(object sender, DragCompletedGestureEventArgs e) 
     { 
      image.Opacity = 1.0; 
     } 

     private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e) 
     { 
      Point point0 = e.GetPosition(image, 0); 
      Point point1 = e.GetPosition(image, 1); 
      Point midpoint = new Point((point0.X + point1.X)/2, (point0.Y + point1.Y)/2); 
      image.RenderTransformOrigin = new Point(midpoint.X/image.ActualWidth, midpoint.Y/image.ActualHeight); 
      initialAngle = transform.Rotation; 
      initialScale = transform.ScaleX; 
      image.Opacity = 0.8; 
     } 

     private void OnPinchDelta(object sender, PinchGestureEventArgs e) 
     { 
      transform.Rotation = initialAngle + e.TotalAngleDelta; 
      transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio; 
     } 

     private void OnPinchCompleted(object sender, PinchGestureEventArgs e) 
     { 
      image.Opacity = 1.0; 
     } 

     private void OnFlick(object sender, FlickGestureEventArgs e) 
     { 
      flickData.Text = string.Format("{0} Flick: Angle {1} Velocity {2},{3}", 
       e.Direction, Math.Round(e.Angle), e.HorizontalVelocity, e.VerticalVelocity); 
     } 
    } 

Funziona abbastanza bene per immagini di piccole dimensioni (meno quindi 2000x2000 pixel). Ma nel mio esempio, ho questo enorme mappa della metropolitana (http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.png o vettore http://www.vasttrafik.se/upload/Linjekartor_hogupplost/Goteborg2010/Linjen%C3%A4tskarta-101212.pdf). Sarebbe ancora più bello se l'utente potesse ridimensionare un'immagine vettoriale, ma persino importare un vettore così grande è un serio problema di prestazioni.

forse avrei potuto dividere l'immagine in alto in diverse "immagini multi-scala" e utilizzare questo http://dotnetbyexample.blogspot.com/2010/08/windows-phone-7-multi-touch-panzoom.html, ma io non so davvero come utilizzare la sua classe :(

Tutte le idee? Come sarebbe voi ragazzi risolvere questo problema?

Grazie

Richard

Answer 1

L'approccio ideale per la soluzione è utilizzare MultiScaleImage, progettato specificamente per visualizzare dati di immagine di grandi dimensioni. Tuttavia, al fine di lavorare con MultiScaleImage è necessario per ottenere i dati iamge preparati int egli giusto formato. Fondamentalmente, è necessario l'immagine tagliata a fette e riscalato, ecc in modo che l'utente carica il meno informazioni possibile mentre lo zoom in e out della vostra immagine.

Il DeepZoom documentation descrive il processo e dispone di collegamenti allo strumento DeepZoom Composer, che viene utilizzato per preparare i dati dell'immagine.

Dopo aver applicato l'approccio MultiScaleImage, è possibile utilizzare il comportamento multitouch di Laurent (se necessario) per fornire ulteriori interazioni dell'utente.

Answer 2

avete sentito parlare di Silverlight profondo-Zoom?

http://msdn.microsoft.com/en-us/library/cc645050(v=vs.95).aspx

Answer 3

C'è un limite di dimensione sul UIElements Silverlight al telefono. Come hai scoperto, questo è 2000x2000 pixel. Nessun singolo controllo può essere più grande di questo, quindi il tuo problema.

Se è necessario utilizzare un'immagine più grande di questo sguardo al MultiScaleImage.

Inoltre, si noti il ​​potenziale di problemi di memoria se si utilizzano file di immagine molto grandi.