Comment effectuer un panoramique et un zoom sur des images avec des superpositions dans WPF à l'aide de ViewBox, ImageBrush et ScrollViewer ?

Panoramique et zoom d'image dans WPF

WPF fournit un moyen simple de combiner ViewBox, ImageBrush et ScrollViewer pour créer une visionneuse d'images prenant en charge les fonctionnalités de panoramique, de zoom et de superposition d'images. Voici comment procéder :

1. Utilisez ViewBox pour effectuer un panoramique et un zoom :

ViewBox Un conteneur vous permet de mettre à l'échelle et de positionner les éléments enfants à l'intérieur. Placez l'image à l'intérieur d'un ViewBox et vous pouvez facilement effectuer un panoramique et un zoom sur l'image en ajustant ses propriétés Stretch et Offset.

2. Utilisez ImageBrush pour créer des superpositions :

ImageBrush vous permet de dessiner une image dans une zone spécifiée. Vous pouvez créer une superposition en créant un ImageBrush et en l'utilisant comme remplissage pour une forme ou un contrôle placé au-dessus de l'image principale.

3. Utilisez ScrollViewer pour afficher l'image complète :

Si la taille de l'image dépasse la taille de la visionneuse, vous pouvez utiliser ScrollViewer comme parent du ViewBox principal. Cela vous permet de faire défiler toute l’image originale.

4. Implémentation du panoramique et du zoom :

L'exemple suivant montre comment effectuer un panoramique et un zoom à l'aide de ViewBox, ImageBrush et ScrollViewer :

MainWindow.xaml :

<Window ...>
    <ScrollViewer>
        <Viewbox x:Name="PannableViewBox">
            <Image Source="myImage.jpg"/>
            <ImageBrush Opacity="0.5" x:Name="OverlayImageBrush"/>
        </Viewbox>
    </ScrollViewer>
</Window>

MainWindow.xaml.cs :

public partial class MainWindow : Window
{
    private Point _start;
    private ScaleTransform _scaleTransform;
    private TranslateTransform _translateTransform;

    public MainWindow()
    {
        InitializeComponent();

        _scaleTransform = new ScaleTransform();
        _translateTransform = new TranslateTransform();

        PannableViewBox.RenderTransform = new TransformGroup()
        {
            Children = { _scaleTransform, _translateTransform }
        };
    }

    private void PannableViewBox_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (Keyboard.IsKeyDown(Key.LeftCtrl))
        {
            _scaleTransform.ScaleX += e.Delta > 0 ? 0.1 : -0.1;
            _scaleTransform.ScaleY += e.Delta > 0 ? 0.1 : -0.1;
        }
    }

    private void PannableViewBox_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _start = e.GetPosition(PannableViewBox);
        PannableViewBox.CaptureMouse();
    }

    private void PannableViewBox_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        PannableViewBox.ReleaseMouseCapture();
    }

    private void PannableViewBox_MouseMove(object sender, MouseEventArgs e)
    {
        if (PannableViewBox.IsMouseCaptured)
        {
            var point = e.GetPosition(PannableViewBox);
            _translateTransform.X -= point.X - _start.X;
            _translateTransform.Y -= point.Y - _start.Y;
            _start = point;
        }
    }
}

Ce code montre comment utiliser ViewBox pour créer une zone panoramique, comment zoomer en réponse aux événements de la molette de la souris et comment gérer les événements de la souris pour le panoramique. Vous pouvez personnaliser davantage cette solution pour ajouter des superpositions et d'autres fonctionnalités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!