Zoomer/faire défiler jusqu'à

Question

J'ai un problème lorsque je fais un zoom avant/arrière sur une image dans un scrollviewer. Lorsque j'utilise le bouton de zoom avant, j'utilise une double animation pour la largeur/hauteur de l'image à 1,25 de sa taille d'origine chaque fois que le bouton est cliqué. Il en va de même pour le bouton de zoom arrière qui règle le facteur d'échelle à 0,75. Jusqu'ici tout va bien.

Le problème est que sur la base de l'endroit où je clique par rapport au centre de l'id de scrollviewer comme pour faire défiler vers le point de clic. Je calcule un delta x/y basé sur ce qui est utilisé pour déterminer la direction du défilement sur les axes x et y.

double deltaX = (ClickPosition.X - center.X) 
double deltaY = (ClickPosition.Y - center.Y) 

Maintenant, je dois tenir compte du facteur de zoom de l'image lors de l'application du delta aux barres de défilement verticales et horizontales (qui aussi sont animés d'une double animation).

Lorsque j'effectue un zoom et que je défile en même temps, la position finale ne se termine pas là où je le souhaite. L'origine de la mise à l'échelle de l'image semble toujours être 0,0 (coin supérieur gauche) de l'image, donc je ne sais pas comment gérer cela, donc cliquer sur le côté gauche du centre donne un défilement plus fort vers la gauche que de cliquer sur le côté droit du centre.

Exemple: http://212.214.41.66/SilverlightZoom/RealQImageMapTestPage.html

Source: http://212.214.41.66/SilverlightZoom/ImageMap.zip

Answer 1

Dans votre code, vous effectuez un zoom de l'image en augmentant la largeur et la hauteur de l'image. Cela arrivera toujours autour du point en haut à gauche. Toutefois, si vous utilisez une transformation de mise à l'échelle, vous pouvez définir le point autour duquel l'image doit être mise à l'échelle.

<Image x:Name="img" Margin="151,127,208,142" Source="Waterfall.jpg" Stretch="Fill"> 
        <Image.RenderTransform> 
        <ScaleTransform x:Name="imagescale" ScaleX="1.2" ScaleY="1.2" CenterX="100" CenterY="100"> 
        </ScaleTransform> 
        </Image.RenderTransform> 
        </Image> 

Cet exemple de code a été prise de here

Cela devrait vous permettre de définir la mise à l'échelle de la ClickPosition par liaison à une propriété. Sur une autre note: je ne suis pas sûr que vous vouliez que votre mise à l'échelle fonctionne comme cela, mais si vous zoomez de 1,25, vous devriez effectuer un zoom arrière de 1/1,25 et non de 0,75. Cela maintiendra un zoom constant, où votre zoom change au fur et à mesure (par exemple, si je zoome deux fois et que je bifurque deux fois, je n'aurai plus un zoom de 1).