Faire défiler avec la molette de la souris et agrandir l'image avec panoramique

Question

Je voudrais faire une petite application silverlight qui affiche une assez grande image qui peut être agrandie en faisant défiler la souris, puis panoramique avec la souris. c'est similaire à la fonction dans google maps et je ne veux pas utiliser deepzoom.

Voici ce que j'ai pour le moment. S'il vous plaît gardez à l'esprit que c'est ma première application Silverlight: cette application est juste pour moi de voir c'est un bon moyen de construire dans un site web. c'est donc une application de démonstration et donc de mauvais noms de variables.

l'image initiale est 1800px largeur.

private void sc_MouseWheel(object sender, MouseWheelEventArgs e) 
    { 
     var st = (ScaleTransform)plaatje.RenderTransform; 
     double zoom = e.Delta > 0 ? .1 : -.1; 
     st.ScaleX += zoom; 
     st.ScaleY += zoom; 
    } 

cela fonctionne, mais pourrait utiliser un lissage et il est placé en haut à gauche et pas centrée.

le balayage panoramique est comme ceci: trouvé ce @Pan & Zoom Image et converti à ce ci-dessous pour travailler dans silverlight

Point start; 
    Point origin; 
    bool captured = false; 

    private void plaatje_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
     plaatje.CaptureMouse(); 
     captured = true; 
     var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform) 
      .Children.First(tr => tr is TranslateTransform); 
     start = e.GetPosition(canvasje); 
     origin = new Point(tt.X, tt.Y); 
    } 

    private void plaatje_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    { 
     plaatje.ReleaseMouseCapture(); 
     captured = false; 
    } 

    private void plaatje_MouseMove(object sender, MouseEventArgs e) 
    { 
     if (!captured) return; 

     var tt = (TranslateTransform)((TransformGroup)plaatje.RenderTransform).Children.First(tr => tr is TranslateTransform); 
     double xVerschuiving = start.X - e.GetPosition(canvasje).X; 
     double yVerschuiving = start.Y - e.GetPosition(canvasje).Y; 
     tt.X = origin.X - xVerschuiving; 
     tt.Y = origin.Y - yVerschuiving; 
    } 

de sorte que la mise à l'échelle n'est pas lisse et le panoramique ne fonctionne pas, parce que quand je clique dessus, l'image disparaît.

Answer 1

première chose que je remarqué était le suivant:

var st = (ScaleTransform)plaatje.RenderTransform; 

et

(TransformGroup)plaatje.RenderTransform 

. Donc, dans un gestionnaire, vous lancez "plaatje.RenderTransform" dans ScaleTransform, dans l'autre vous transtypez dans TransformGroup? Cela provoque probablement une exception, ce qui fait disparaître votre image.

Pour la partie zoom, vous pouvez essayer de régler la RenderTransformOrigin de l'objet que vous voulez à l'échelle (« plaatje »?) À « 0.5,0.5 », ce qui signifie le centre de l'élément de l'interface utilisateur. L'image sera donc mise à l'échelle autour de son point central au lieu de son coin supérieur gauche.

Cheers, Alex