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

一、图片加载

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

<Image Name="WPFImage" Source="./test.jpg" </Image>
1

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

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

二、图片缩放

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

<Grid x:Name="grid01" HorizontalAlignment="Left" VerticalAlignment="Center">
            <Grid.LayoutTransform>
                <ScaleTransform x:Name="sfr"/>
            </Grid.LayoutTransform>
           <Image Name="WPFImage" Source="./test.jpg" </Image>
        </Grid>
1
2
3
4
5
6

后台代码为

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

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

三、LayoutTransform与RenderTransform区别

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

• LayoutTransform 属性 是在元素布局的过程中进行变换（布局完成之前）

• RenderTransform 属性 是在元素布局完成之后进行变换（渲染显示之前）

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

参考文档

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