Question

我正在创造有趣的轮盘赌游戏，我试图在其轴上（而不是360度）旋转带轮图像的日食。现在，它的轮换存在一些问题，它根据我的要求不能旋转。如果您将运行下面附带图像的代码。你会得到我的要求。

请设置您的屏幕分辨率，即Height =“1024”Width =“768”以了解我的确切要求。我也在这附上图片。一个是背景图像，另一个是轮图像。

从上一周开始，我就被困在了这个问题上。任何帮助都会很明显。提前谢谢。

     Title="MainWindow" Height="1024" Width="768"  
     WindowStyle="None"   
WindowStartupLocation="CenterScreen" WindowState="Maximized">
<Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ball">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>
<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="Image/fun_roulette.jpg" />
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>


    <Ellipse Name="ball" Stroke="Black"                                                       
            RenderTransformOrigin="0.5,0.5" Width="370" Height="200" 
             Grid.Row="0" Grid.Column="0" Opacity=".4" 
             Margin="0,30,0,0" 
              >
        <Ellipse.RenderTransform>
            <TransformGroup >
                <ScaleTransform  />
                <SkewTransform  />
                <RotateTransform Angle="45" CenterX="0" CenterY="0"  />
                <TranslateTransform />
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <ImageBrush ImageSource="Image/Roullette_Wheel.jpg"   />
        </Ellipse.Fill>
        <Ellipse.BitmapEffect>
            <BevelBitmapEffect BevelWidth="0" />
        </Ellipse.BitmapEffect>
        <Ellipse.BitmapEffectInput>
            <BitmapEffectInput />
        </Ellipse.BitmapEffectInput>
    </Ellipse>
</Grid>

从此处下载背景图片 https://drive.google.com/file/d/0ByTbA6S0c1TaZEo2akgtQjVCbjQ/view?usp=sharing

从这里下载Wheel Image https://drive.google.com/file/d/0ByTbA6S0c1TaY1JzazhudDkzMjA/view?usp=sharing

Answer 1

据我了解，您希望椭圆在背景图像中的静态光盘位置旋转完全。此外，由于一点3D效果（透视效果），通常旋转椭圆将无法产生所需的结果。您可以尝试在WPF中使用某些3D功能，但这有点过分，因为我们还有其他选择。

您可以只旋转ImageBrush，而不是旋转整个椭圆。我已经尝试过你的代码并稍微调整一下并进行一些修改，最后效果似乎就是你想要的。这是代码：

<Window.Resources>
 <Storyboard x:Key="Storyboard1">
    <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" 
                Storyboard.TargetProperty="Angle" Storyboard.TargetName="rot">
        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360" />
    </DoubleAnimationUsingKeyFrames>        
 </Storyboard>
</Window.Resources>
<Window.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
  </EventTrigger>
</Window.Triggers>
<Grid>  
 <Grid.Background>
    <ImageBrush ImageSource="Image/fun_roulette.jpg" />
 </Grid.Background>
 <Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
 </Grid.ColumnDefinitions>

 <Ellipse Name="ball" Stroke="Black" RenderTransformOrigin="0.5,0.8"
          Grid.Row="0" Grid.Column="0" Opacity=".4" 
          Margin="6,0,0,0">    
    <Ellipse.RenderTransform>
      <ScaleTransform ScaleX=".195" ScaleY=".45"/>
    </Ellipse.RenderTransform>
    <Ellipse.Fill>
        <ImageBrush ImageSource="Image/Roullette_Wheel.jpg">
           <ImageBrush.RelativeTransform>
              <TransformGroup >                                
                <RotateTransform CenterX="0.5" CenterY="0.5" x:Name="rot"/>
                <SkewTransform/>                
                <TranslateTransform />
              </TransformGroup>
           </ImageBrush.RelativeTransform>
        </ImageBrush>
    </Ellipse.Fill>
    <Ellipse.BitmapEffect>
        <BevelBitmapEffect BevelWidth="0" />
    </Ellipse.BitmapEffect>
    <Ellipse.BitmapEffectInput>
        <BitmapEffectInput />
    </Ellipse.BitmapEffectInput>
 </Ellipse>
</Grid>

您应该复制并尝试这个确切的代码，尝试扫描它与原始代码的某些差异。

有趣的轮盘椭圆图像旋转（不是360）

1 个答案: