主页 / coding / 问题 / 77518304
Accepted
ExpertOnNothing
Asked: 2023-11-21 03:03:51 +0800 CST

WPF 旋转图像不需要 ClipToBounds

  • 772

我有一个旭日图像，我试图在窗口中旋转。我让它旋转得很好，但图像是一个大正方形，因此它填充了窗口的比例。然而，当它旋转时，图像就是窗口的确切形状。我认为它会填充窗口并在窗口“外部”旋转以赋予其完整的图片效果。不确定这是否正确解释。窗口大小为 800 x 450，图像大小为 918 x 918（我计算了所需的大小）。这是它的样子。

在此输入图像描述

我希望它在旋转时填满整个窗口，但我无法弄清楚。这是我的完整代码。虽然我没有在我发布的图像中显示 lblPlayer 标签。

<Window x:Class="currentPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:DartOverviewHistory"
    mc:Ignorable="d"
    Title="currentPlayer" Height="450" Width="800" WindowStyle="None" WindowState="Maximized" ResizeMode="NoResize" Background="Black" >
<Window.Resources>
  
</Window.Resources>
<Grid>     
    <Image Source="/images/finalStar.png" Width="918" Height="918" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity=".3">
        <Image.RenderTransform>
            <RotateTransform CenterX="459" CenterY="459" />
        </Image.RenderTransform>
        <Image.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="Image.IsEnabled" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                Storyboard.TargetProperty="RenderTransform.Angle"
                                From="0"
                                To="360"
                                Duration="0:1:0"
                                RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>          
    <Viewbox x:Name="vb1" Visibility="Visible">
        <Label x:Name="lblPlayer" Content="CAROLINE" Foreground="White" FontFamily="Cascadia Code" FontWeight="Bold" Background="Transparent"/>
    </Viewbox>
   
    <Label Margin="591,308,0,0" />

</Grid>

不确定我做错了什么。感谢您在这方面能给我的任何帮助。

wpf

2 个回答

  1. Best Answer

    该图像显然被窗口布局剪切了。

    您可以通过一个额外的 Canvas 元素来解决这个问题，该元素不会剪裁其子元素：

    <Grid>
    <Canvas Width="918" Height="918"
            HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image Source="/images/finalStar.png"
               Width="918" Height="918" Opacity=".3">
            <Image.RenderTransform>
                <RotateTransform CenterX="459" CenterY="459"/>
            </Image.RenderTransform>
            <Image.Style>
                ...
            </Image.Style>
        </Image>
    </Canvas>
    ...
</Grid>
    • 0

  2. 负边距也能达到目的。

    <Grid>
    <Image Source="/images/finalStar.png"
           Width="918" Height="918" Margin="-59 -234"
           HorizontalAlignment="Center" VerticalAlignment="Center"
           Opacity=".3"
           RenderTransformOrigin="0.5 0.5">
        <Image.RenderTransform>
            <RotateTransform/>
        </Image.RenderTransform>
        <Image.Style>
            ...
        </Image.Style>
    </Image>
</Grid>
    • 0

相关问题