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

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;
}

Original Image Rotation after flipping

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;
}

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

Performing both layout and render transform results in wrong output

c#

wpf

rotatetransform

scaletransform

layouttransform