WPF图片(Image)或布局的缩放和旋转(TransformGroup与Transform)

发表于 更新于 分类于
WPF图片(Image)或布局的缩放和旋转(TransformGroup与Transform)

同时缩放和旋转

在做缩放和旋转的时候 我们可以使用两种方式

  • 目标本身的旋转和缩放
  • 使用Transform旋转和缩放

因为我这里还有画板，并且画板和图片要始终对应，所以使用Transform相对就比较简单。

注意

不要两种方式并存，比如缩放是改的目标本身的宽高，而旋转使用Transform，会导致实际效果和预期不符。

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Grid
    Name="OuterGrid"
    ClipToBounds="True">
    <Grid
        x:Name="MGridImage"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        RenderTransformOrigin="0.5,0.5">
        <Image
            Margin="0,0,0,0"
            Stretch="Uniform"
            Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UcBlackbord}}, Path=AnsPic}">
        </Image>
        <InkCanvas
            x:Name="BlackboardCanvas"
            Background="Transparent" />
    </Grid>
</Grid>

其中

RenderTransformOrigin="0.5,0.5"保证旋转的时候是按照中心旋转的。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
private double _rotationAngle;

private void RotateGrid()
{
    _rotationAngle += 90;
    if (_rotationAngle - 360 == 0)
    {
        _rotationAngle = 0;
    }
    TransformAction();
}

private void ZoomGrid()
{
    if (OuterGrid.ActualWidth != 0)
    {
        TransformAction();
    }
}

private void TransformAction()
{
    double zoom = _pageData.Zoom;
    ScaleTransform scaleTransform = new ScaleTransform(zoom, zoom);
    RotateTransform rotateTransform = new RotateTransform(_rotationAngle);
    TransformGroup transformGroup = new TransformGroup();
    transformGroup.Children.Add(scaleTransform);
    transformGroup.Children.Add(rotateTransform);
    MGridImage.RenderTransform = transformGroup;
}

放大

1
2
3
4
5
if (_pageData.Zoom < 2)
{
    _pageData.Zoom += 0.2;
}
ZoomGrid();

缩小

1
2
3
4
5
if (_pageData.Zoom > 0.6)
{
    _pageData.Zoom -= 0.2;
}
ZoomGrid();

只旋转

1
2
3
private double _rotationAngle = 90;
RotateTransform rotateTransform = new RotateTransform(_rotationAngle);
MGridImage.RenderTransform = rotateTransform;

只缩放

1
2
3
private double zoom = 1.2;
ScaleTransform scaleTransform = new ScaleTransform(zoom, zoom);
MGridImage.RenderTransform = scaleTransform;