旋转时的图像不符合 parent 容器的高度和宽度

Question

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

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

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

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

编辑：请在此处查看解决方案，这正是我在 UWP 中想要的。

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

Answer 1

Image when rotated does not respect the height and width of the parent container

RotateTransform用于旋转变换uwpXAML。 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°并保持宽高比，图像会失真。

旋转时的图像不符合 parent 容器的高度和宽度

Image when rotated does not respect the height and width of the parent container

xaml

image

rotatetransform

uwp