WPF之加载图片实现缩放功能

╰+哭是因爲堅強的太久メ 2022-12-11 15:01 657阅读 0赞

### WPF之加载图片实现缩放功能 ###

*  一、图片加载
 *  二、图片缩放
 *  三、LayoutTransform与RenderTransform区别
 *  参考文档

# 一、图片加载 #

在使用WPF进行程序设计时，一般使用WPF的Image控件加载图片，Xaml代码如下

Name属性指定Image控件名称，Source属性指定加载的图片路径，可以使用相对路径或绝对路径。  
如果是在后台指定Source，则需要先加载图片为BimapImage类型，代码如下

string fn="./test.jpg"
    BitmapImage bmp = new BitmapImage(new Uri(fn));
    this.WPFImage.Source=bmp

# 二、图片缩放 #

使用Image控件加载图片后，如果要实现图片缩放功能，一般将Image控件放入一个容器内，然后对容器进行缩放，例如Grid容器。实现缩放一般有两种方法，一种是通过设置容器的长和宽属性：**Width和Height**，通过一定比例调节这两个属性实现放大和缩小。  
但这种方法会改变图片中某一点相对于容器的坐标，如果后续程序需要在图片上做一些处理会变得很麻烦，所以一般采用第二种方法。  
第二种方法是通过控件的缩放变换**ScaleTransform**实现缩放。这种缩放不会改变实际图片的长和宽，所以图像坐标系也不会改变，方便后续操作。  
**ScaleTransform**属于WPF的五种基本变换之一，其他四种分别分别是RotateTransform:旋转变换、SkewTransform：倾斜变换、TranslateTransform：移动变换、TransformGroup：变换组。  
使用ScaleTransform进行缩放，Xaml代码如下

后台代码为

public void AdjustImageSizeFromScale(double Scale)//计算图片宽高比例和容器宽高比例并进行比较，然后调整容器的Scaletransform
            {
        
                this.sfr.CenterX = 0;
                this.sfr.CenterY = 0;
                this.grid01.sfr.ScaleX = Scale;
                this.grid01.sfr.ScaleY = Scale;
            }

ScaleTransform缩放共有四个参数，分别为缩放中心点（CenterX，CenterY）和缩放比例（ScaleX、ScaleY）。

# 三、LayoutTransform与RenderTransform区别 #

WPF可以使用LayoutTransform和RenderTransform两种属性进行变换操作，

*  LayoutTransform 属性 是在元素布局的过程中进行变换（布局完成之前）
 *  RenderTransform 属性 是在元素布局完成之后进行变换（渲染显示之前）

由于LayoutTransform 在布局计算之前进行变换计算，因此如果LayoutTransform 发生了更改，比如动画更改，就会重新引发容器进行布局计算，简单来说LayoutTransform 的每一次变化都需要进行一次重新布局，而RenderTransform却不会。RenderTransform计算是在布局计算完成之后进行，它不会因此重新布局。因此默认情况下，推荐使用RenderTransform进行变换，只有非常特殊的情况下才会使用LayoutTransform 。

# 参考文档 #

[WPF 的Canvas画图区整体缩放与平移（一）][WPF _Canvas]  
[WPF 的Canvas画图区整体缩放与平移（二）][WPF _Canvas 1]  
[WPF可视对象变换（RenderTransform）][WPF_RenderTransform]

[WPF _Canvas]: https://blog.csdn.net/jiuzaizuotian2014/article/details/82659157
[WPF _Canvas 1]: https://blog.csdn.net/jiuzaizuotian2014/article/details/82684238
[WPF_RenderTransform]: https://www.cnblogs.com/xietianjiao/p/11238112.html