c# - 同时执行布局和渲染转换会导致错误的输出

Question

我只想旋转图像，因此我正在执行布局变换（旋转变换）而不是渲染变换。由于布局变换按预期旋转图像（图像适合新尺寸）。我还想翻转图像，为此使用渲染变换（缩放变换）。单独做时两者都可以正常工作。当我翻转后旋转时，图像定位不正确，反之亦然。

<Grid x:Name="grid1" Grid.Row="0" SizeChanged="Grid1_SizeChanged" >

    <Image x:Name="image1"  Source="Images/butterfly.jpg"   />          

</Grid>

private void Flip_Click(object sender, RoutedEventArgs e)
{
    int scaleX = -1;
    if (i % 2 == 0)
     scaleX = -1;
    else
     scaleX = 1;

    grid1.RenderTransformOrigin = new Point(0.5, 0.5);
    ScaleTransform scale = new ScaleTransform();
    scale.ScaleX = scaleX;
    grid1.RenderTransform = scale;
    i++;
}

private void Rotate_Click(object sender, RoutedEventArgs e)
{
    grid1.RenderTransformOrigin = new Point(0.5, 0.5);
    RotateTransform rotate = new RotateTransform();
    rotate.Angle = angle;
    grid1.LayoutTransform = rotate;
    angle += 90;
}

翻转后的原始图像旋转

Answer 1

更好地为 LayoutTransform 使用 TransformGroup。它应该有一个 RotateTransform 和一个 ScaleTransform 子元素。通过更改声明子变换的顺序，您可以控制图像是否先旋转然后翻转，反之亦然。

<Image Source="Images/butterfly.jpg">
    <Image.LayoutTransform>
        <TransformGroup>
            <ScaleTransform x:Name="scale"/>
            <RotateTransform x:Name="rotate"/>
        </TransformGroup>
    </Image.LayoutTransform>
</Image>

Button Click 处理程序不需要做更多的事情：

private void RotateButtonClick(object sender, RoutedEventArgs e)
{
    rotate.Angle += 90;
}

private void FlipButtonClick(object sender, RoutedEventArgs e)
{
    scale.ScaleX *= -1;
}