【WPF】对Image元素进行缩放平移等操作

元素布局

xml 复制代码
        <Border Grid.Row="1" Name="border" ClipToBounds="True" Margin="10,10,10,10">
            <Image Name="image" Visibility="Visible" Margin="3,3,3,3" Grid.Column="1" Source="{Binding SourceImage}" HorizontalAlignment="Center" VerticalAlignment="Center">
            </Image>
        </Border>

1.平移

1.1 定义私有变量记录相关初始位置

cs 复制代码
        /// <summary>
        /// 图片的起始偏移位置
        /// </summary>
        private Point origin;  
        /// <summary>
        /// 鼠标相对Border的起始位置
        /// </summary>
        private Point start; 

1.2 绑定 鼠标左键按下鼠标左键抬起鼠标移动事件

复制代码
        public DialogImageWindow()
        {
            InitializeComponent();
            image.MouseLeftButtonDown += image_MouseLeftButtonDown;
            image.MouseLeftButtonUp += image_MouseLeftButtonUp;
            image.MouseMove += image_MouseMove;
        }

1.3 鼠标左键按下

  1. 通过CaptureMouse将鼠标捕获到指定的元素image
  2. 通过GetPosition获取鼠标相对border位置
  3. 记录image当前偏移位置
cs 复制代码
        private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (image.IsMouseCaptured) return;
            image.CaptureMouse();

            start = e.GetPosition(border);
            origin.X = image.RenderTransform.Value.OffsetX;
            origin.Y = image.RenderTransform.Value.OffsetY;
        }

1.4 鼠标移动

  1. 通过GetPosition获取当前鼠标相对border位置
  2. 计算鼠标相对初始位置移动的像素差值
  3. 将像素差值累计到初始偏移量上
cs 复制代码
 private void image_MouseMove(object sender, MouseEventArgs e)
        {
            if (!image.IsMouseCaptured) return;
            Point p = e.MouseDevice.GetPosition(border);

            Matrix m = image.RenderTransform.Value;
            m.OffsetX = origin.X + (p.X - start.X);
            m.OffsetY = origin.Y + (p.Y - start.Y);

            image.RenderTransform = new MatrixTransform(m);
        }

1.5 鼠标左键抬起

  1. 通过ReleaseMouseCapture释放鼠标捕获
cs 复制代码
private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (image.IsMouseCaptured)
            {
                image.ReleaseMouseCapture();
            }
        }

2. 缩放

2.1 绑定 鼠标滚轮事件

cs 复制代码
        public DialogImageWindow()
        {
            InitializeComponent();
            MouseWheel += MainWindow_MouseWheel;
        }

2.1

  1. 通过GetPosition获取鼠标相对image的位置,该位置作为缩放中心点
  2. 根据Delta参数来决定是在当前放大系数上放大(1.1倍)还是缩小(1.1倍).
cs 复制代码
 private void MainWindow_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            Point p = e.MouseDevice.GetPosition(image);

            Matrix m = image.RenderTransform.Value;
            if (e.Delta > 0)
                m.ScaleAtPrepend(1.1, 1.1, p.X, p.Y);
            else
                m.ScaleAtPrepend(1 / 1.1, 1 / 1.1, p.X, p.Y);

            image.RenderTransform = new MatrixTransform(m);
        }

3. 还原

cs 复制代码
private void b1_Click(object sender, RoutedEventArgs e)
        {
            image.RenderTransform = new ScaleTransform(1.0,1.0);
            image.RenderTransform = new TranslateTransform(0,0);
        }
相关推荐
曲幽21 小时前
Python使用diffusers加载文生图模型教程
python·ai·prompt·pipeline·torch·image·diffusers·transforms
code bean1 天前
【WPF】WPF 自定义控件之依赖属性
wpf
上元星如雨1 天前
WPF 加载和显示 GIF 图片的完整指南
wpf
微小冷2 天前
WPF中ListView控件详解
c#·wpf·数据绑定·listview·bingding
专注VB编程开发20年3 天前
WPF,Winform,HTML5网页,哪个UI开发速度最快?
大数据·c#·wpf
YANQ6623 天前
3.1 WPF画折线图、直方图、饼状图
wpf
上元星如雨3 天前
WPF demo:全屏加载界面
wpf
深漂阿碉3 天前
WPF自定义日历选择控件
wpf
六点的晨曦3 天前
WPF的三轴机械手控件动画
wpf
军训猫猫头3 天前
5.浏览本地文件获取路径与文件名称 C#例子 WPF例子
开发语言·c#·wpf