C# Wpf 图片按照鼠标中心缩放和平移

C# Wpf 图片按照鼠标中心缩放和平移

1、缩放事件

MouseWheel(object sender, MouseWheelEventArgs e)

2、平移相关的事件

MouseMove(object sender, MouseEventArgs e)
MouseDown(object sender, MouseButtonEventArgs e)
MouseUp(object sender, MouseButtonEventArgs e)

3、图片平移实现

public Point StartPoint;
public Point Origin;



    private void ImageEx_MouseUp(object sender, MouseButtonEventArgs e)
    {
        this.ReleaseMouseCapture();
    }

    private void ImageEx_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Released) return;
        TranslateTransform transform = group.Children[1] as TranslateTransform;
        var startPoint = StartPoint - e.GetPosition(this);
        transform.X = Origin.X - startPoint.X;
        transform.Y = Origin.Y - startPoint.Y;
    }



    private void ImageEx_MouseDown(object sender, MouseButtonEventArgs e)
    {
        StartPoint = e.GetPosition(this);
        TranslateTransform trans = group.Children[1] as TranslateTransform;
        Origin = new Point(trans.X, trans.Y);
        this.CaptureMouse();
    }

4、图片缩放实现

private void ImageEx_MouseWheel(object sender, MouseWheelEventArgs e)
{
    Point relative = e.GetPosition(image);
    double zoom = e.Delta > 0 ? 0.1 : -0.1;
    ScaleTransform scale = group.Children[0] as ScaleTransform;
    TranslateTransform trans = group.Children[1] as TranslateTransform;
    double absoluteX;
    double absoluteY;

    absoluteX = relative.X * scale.ScaleX + trans.X;
    absoluteY = relative.Y * scale.ScaleY + trans.Y;

    scale.ScaleX += zoom;
    scale.ScaleY += zoom;

    trans.X = absoluteX - relative.X * scale.ScaleX;
    trans.Y = absoluteY - relative.Y * scale.ScaleY;
}

5、完整代码

1、xaml

<UserControl x:Class="WpfApp1.ImageEx"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             xmlns:panAndZoom="clr-namespace:Wpf.Controls.PanAndZoom;assembly=Wpf.Controls.PanAndZoom"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}">
        <Image Visibility="Collapsed" Source="{Binding CurrentImage}" x:Name="image">
            <Image.RenderTransform>
                <TransformGroup x:Name="group">
                    <ScaleTransform />
                    <TranslateTransform />
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Grid>

</UserControl>

2、CS

namespace WpfApp1
{
    /// <summary>
    /// ImageEx.xaml 的交互逻辑
    /// </summary>
    public partial class ImageEx : UserControl
    {
        public Point StartPoint;
        public Point Origin;
        public BitmapSource CurrentImage { get; set; }

        public ImageEx()
        {
            InitializeComponent();
            CurrentImage = new BitmapImage(new Uri("C:\\Users\\Desktop\\111.png"));

            this.MouseDown += ImageEx_MouseDown;
            this.MouseMove += ImageEx_MouseMove;
            this.MouseUp += ImageEx_MouseUp;
            this.MouseWheel += ImageEx_MouseWheel;
        }

        private void ImageEx_MouseUp(object sender, MouseButtonEventArgs e)
        {
            this.ReleaseMouseCapture();
        }

        private void ImageEx_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            Point relative = e.GetPosition(image);
            double zoom = e.Delta > 0 ? 0.1 : -0.1;
            ScaleTransform scale = group.Children[0] as ScaleTransform;
            TranslateTransform trans = group.Children[1] as TranslateTransform;
            double absoluteX;
            double absoluteY;

            absoluteX = relative.X * scale.ScaleX + trans.X;
            absoluteY = relative.Y * scale.ScaleY + trans.Y;

            scale.ScaleX += zoom;
            scale.ScaleY += zoom;

            trans.X = absoluteX - relative.X * scale.ScaleX;
            trans.Y = absoluteY - relative.Y * scale.ScaleY;
        }

        private void ImageEx_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Released) return;
            TranslateTransform transform = group.Children[1] as TranslateTransform;
            var startPoint = StartPoint - e.GetPosition(this);
            transform.X = Origin.X - startPoint.X;
            transform.Y = Origin.Y - startPoint.Y;
        }



        private void ImageEx_MouseDown(object sender, MouseButtonEventArgs e)
        {
            StartPoint = e.GetPosition(this);
            TranslateTransform trans = group.Children[1] as TranslateTransform;
            Origin = new Point(trans.X, trans.Y);
            this.CaptureMouse();
        }

    }

}

3、调用方法

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:ImageEx  x:Name="imageEx" />
    </Grid>
</Window>