Je souhaite créer une visionneuse d'images simple dans WPF qui permettra à l'utilisateur de:
- Panoramique (en faisant glisser l'image avec la souris).
- Zoom (avec un curseur).
- Afficher les superpositions (sélection de rectangle par exemple).
- Afficher l'image originale (avec des barres de défilement si nécessaire).
Pouvez-vous expliquer comment faire?
Je n'ai pas trouvé un bon échantillon sur le Web. Dois-je utiliser ViewBox? Ou ImageBrush? Ai-je besoin de ScrollViewer?
Réponses:
La façon dont j'ai résolu ce problème était de placer l'image dans une bordure avec sa propriété ClipToBounds définie sur True. Le RenderTransformOrigin sur l'image est alors défini sur 0,5,0,5 afin que l'image commence à zoomer sur le centre de l'image. Le RenderTransform est également défini sur un TransformGroup contenant un ScaleTransform et un TranslateTransform.
J'ai ensuite géré l'événement MouseWheel sur l'image pour implémenter le zoom
Pour gérer le panoramique, la première chose que j'ai faite a été de gérer l'événement MouseLeftButtonDown sur l'image, de capturer la souris et d'enregistrer son emplacement, je stocke également la valeur actuelle de TranslateTransform, ce qui est mis à jour pour implémenter le panoramique.
Ensuite, j'ai géré l'événement MouseMove pour mettre à jour le TranslateTransform.
Enfin, n'oubliez pas de libérer la capture de la souris.
En ce qui concerne les poignées de sélection pour le redimensionnement, cela peut être accompli à l'aide d'un adorner, consultez cet article pour plus d'informations.
la source
Après avoir utilisé des exemples de cette question, j'ai créé une version complète de l'application panoramique et zoom avec un zoom approprié par rapport au pointeur de la souris. Tout le code de panoramique et de zoom a été déplacé vers une classe distincte appelée ZoomBorder.
ZoomBorder.cs
MainWindow.xaml
MainWindow.xaml.cs
la source
double zoomCorrected = zoom*st.ScaleX; st.ScaleX += zoomCorrected; st.ScaleY += zoomCorrected;
La réponse a été publiée ci-dessus mais n'était pas complète. voici la version complète:
XAML
Code derrière
J'ai un exemple de projet wpf complet utilisant ce code sur mon site Web: Notez l'application pense-bête .
la source
Essayez ce contrôle de zoom: http://wpfextensions.codeplex.com
l'utilisation du contrôle est très simple, référence à l'assembly wpfextensions que:
Les barres de défilement ne sont pas prises en charge pour le moment. (Ce sera dans la prochaine version qui sera disponible dans une ou deux semaines).
la source
la source
@Anothen et @ Number8 - La classe Vector n'est pas disponible dans Silverlight, donc pour le faire fonctionner, nous avons juste besoin de garder un enregistrement de la dernière position aperçue la dernière fois que l'événement MouseMove a été appelé, et de comparer les deux points pour trouver la différence ; puis ajustez la transformation.
XAML:
Code derrière:
Notez également que vous n'avez pas besoin d'un TransformGroup ou d'une collection pour implémenter le panoramique et le zoom; à la place, un CompositeTransform fera l'affaire avec moins de tracas.
Je suis presque sûr que c'est vraiment inefficace en termes d'utilisation des ressources, mais au moins cela fonctionne :)
la source
Pour zoomer par rapport à la position de la souris, il vous suffit de:
la source
@ Merk
Pour votre solution insted de l'expression lambda, vous pouvez utiliser le code suivant:
ce code peut être utilisé tel quel pour .Net Frame work 3.0 ou 2.0
J'espère que cela vous aide :-)
la source
Encore une autre version du même type de contrôle. Il a des fonctionnalités similaires aux autres, mais il ajoute:
L'utilisation est simple:
Et le code:
la source
if (image.ActualWidth*(st.ScaleX + zoom) < 200 || image.ActualHeight*(st.ScaleY + zoom) < 200) //don't zoom out too small. return;
zoomée en arrière jusqu'à ce que nous ne puissions rien faire et ne rien voir.J'ajoute un peu de limitation: dans l'image.MouseWheelCela effectuera un zoom avant et arrière ainsi qu'un panoramique, mais gardera l'image dans les limites du conteneur. Écrit en tant que contrôle, ajoutez le style
App.xaml
directement ou via leThemes/Viewport.xaml
.Pour plus de lisibilité, j'ai également téléchargé ceci sur gist et github
J'ai aussi emballé ceci sur nuget
./Controls/Viewport.cs:
./Themes/Viewport.xaml:
./App.xaml
Usage:
Tous les problèmes, donnez-moi un cri.
Bon codage :)
la source