旋转时的图像不尊重父容器的高度和宽度答案

【问题标题】：Image when rotated does not respect the height and width of the parent container旋转时的图像不尊重父容器的高度和宽度
【发布时间】：2019-11-21 19:24:53
【问题描述】：

我有一个 UWP 应用程序，我将图像旋转 90 度角。我在 Grid 中有这个图像和一个 Canvas，因为我希望 Canvas 位于图像之上，因此我可以从代码中创建一些拇指控件并进行拖放。

如果我不应用旋转变换，图像会在网格内正确对齐，如下所示。

另一方面，如果我指定旋转变换，图像会旋转，但它永远不会缩放到容器的高度和宽度，如下所示。

我在这里看到了这篇文章Rotating and scaling image，但我不知道如何让它在 UWP 中工作。请帮忙。这是我的 xaml。最终我想要的是，在图像旋转后，它应该适合 Grid 缩放高度和宽度的尺寸。

编辑：请在此处查看解决方案，这正是我在 UWP 中想要的。 fit image height and width after rotating WPF

<Grid x:Name="gridBarImagePanel" Grid.Row="4" BorderBrush="Black" BorderThickness="2"
                      Height="476" Width="625">

                    <Image x:Name="BarCodeImage" Source="..\SampleImage\demo.png" 
                           RenderTransformOrigin="0.54,0.40" Height="476" Width="625">
                        <Image.RenderTransform>
                            <RotateTransform Angle="90"></RotateTransform>
                        </Image.RenderTransform>
                    </Image>

                    <Canvas x:Name="cnvBarCodeImage" Canvas.ZIndex="100" VerticalAlignment="Stretch">

                    </Canvas>
                </Grid>

【问题讨论】：

是的，谢谢 Nico，它可以工作。首先写入文件并像您说的那样旋转它可以正常工作。

标签： image xaml uwp rotatetransform

【解决方案1】：

旋转时的图像不考虑父容器的高度和宽度

RotateTransform 用于旋转变换uwp XAML。 RotateTransform 由 Angle 定义，它通过围绕点 enterX、CenterY 的圆弧旋转对象。但是通常使用转换来填充UIElement.RenderTransform 属性并保持纵横比。对于您的场景，我们需要使用BitmapDecoder 重新渲染图像并保持纵横比。请参考以下代码。

private async void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/test.jpg"));
    using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read),
                                       memStream = new InMemoryRandomAccessStream())
    {
        BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
        uint originalWidth = decoder.PixelWidth;
        uint originalHeight = decoder.PixelHeight;
        BitmapEncoder encoder = await BitmapEncoder.CreateForTranscodingAsync(memStream, decoder);

        encoder.BitmapTransform.ScaledWidth = (uint)(originalHeight * 1.0);
        encoder.BitmapTransform.ScaledHeight = (uint)(originalWidth * 1.0);
        encoder.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Linear;

        //Rotate 180
        encoder.BitmapTransform.Rotation = BitmapRotation.Clockwise90Degrees;
        await encoder.FlushAsync();
        memStream.Seek(0);
        fileStream.Seek(0);
        fileStream.Size = 0;
        var bitmap = new BitmapImage();
        bitmap.SetSource(memStream);
        MyImg.Source = bitmap;
    }
}

请注意：如果我们将图像旋转到 90° 并保持纵横比，图像会失真。

【讨论】：