WPF通过鼠标滑轮缩放显示图片

一时失言乱红尘 2022-06-16 07:42 310阅读 0赞

如果你使用WinForm比较难实现通过滚动鼠标滑轮来对图片进行缩放显示，那么，你应该考虑一下使用WPF，既然是下一代Windows客户端开发平台，明显是有一定优势的，不然，MS是吃饱了撑着。

首先，我们应该知道WPFUI元素都具备变换功能，不仅支持二维变换，同时也支持三维变换，但3D变换对CPU的处理能力有着一定要求，如果不使用3D，WPF对性能的要求其实并不高，说WPF吃内存更子扯谈，前面我的文章中已经详细讨论过，WPF与传统的面向对象编程模有些不同，WPF属性系统使用依赖项属性，所有属性都会在全局哈希表中进行注册，这也是为什么WPF程序启动速度较慢的原因，但它并不消耗内存，因为依赖项注项后并不随类的构造函一起初始，也就是说，用到的时候才分配内存，当然，这带来的问题显示是有些耗时间，所以说WPF是用时间来换取空间。

呵呵，扯远了，还是回到今天的主题，为什么说在WPF中实现滚动鼠标滑轮来缩放显示图象比较简单，除了路由事件的支持外，就是上文提到的变换。

变换包括旋转、倾斜、位移等，当然，比较灵活复杂的是矩阵变换。

我们今天的例子就是通过缩放变换来实现的，也就是ScaleTransform的使用。

首先建立一个WPF应用程序，并在在Grid中放一个Image元素，你就随便准备一个图片做测试就行了。

1.  <Grid x:Name="root">  
2.      <Image x:Name="img" Margin="20,20,20,77" Source="60.jpg"  
3.            MouseWheel="img\_MouseWheel">  
4.          <Image.RenderTransform>  
5.              <ScaleTransform x:Name="sfr" />  
6.          </Image.RenderTransform>  
7.      </Image>  
8.  </Grid>

上面的XAML都很简单，注意ScaleTransform 的使用，这里为了方便在代码中访问，所以我分配了一个名字给它。

接着，处理MouseWeel事件。

1.  private void img\_MouseWheel(object sender, MouseWheelEventArgs e)  
2.  \{  
3.      Point centerPoint = e.GetPosition(root);  
4.      this.sfr.CenterX = centerPoint.X;  
5.      this.sfr.CenterY = centerPoint.Y;  
6.      if (sfr.ScaleX < 0.3 && sfr.ScaleY < 0.3 && e.Delta < 0)  
7.      \{  
8.          return;  
9.      \}  
10.     sfr.ScaleX += (double)e.Delta / 3500;  
11.     sfr.ScaleY += (double)e.Delta / 3500;  
12. \}

从事件参数e的GetPosition方法获得鼠标指针的相对坐标，参照系为根Grid元素，通过这个我们可以设置缩放的中心点的坐标。

接着设置ScaleX和ScaleY属性，即分别沿X轴和Y轴缩放的倍数，当然，倍数可以负值，表示缩小显示。

为什么这里我要把Delta值除以3500呢？因为鼠标滑轮每次滑动变化的范围值太大，我在本机上测得的值为120，很明显，我们不能一下子就赋120，这样Image会放大或缩小120倍以上，动作太大了。

所以要想办法让每次的变化量不能太大，注意Delta值要先转换为double类型再进行运算，不然，由于是整型，运算结果太小，化为整数会被舍入为0，就等于没有变化了，所以运算前要先做类型转换。

现在，你可以看看效果了。如果你有兴趣的话可以进一步完善，这里只做演示。

![0_13239556398NFw.gif][]

![0_132395567768lZ.gif][]

![0_1323955717z2hX.gif][]

[0_13239556398NFw.gif]: /images/20220616/92f208e970464db1a4099d863ff9c1a5.png
[0_132395567768lZ.gif]: /images/20220616/0619fb8a9e054481b5295f605f5e7925.png
[0_1323955717z2hX.gif]: /images/20220616/0f07e89c20fb4e4bb9e497b00b0ffd4d.png