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

Question

我正在创建有趣的轮盘游戏，我试图旋转日食轮内的其轴（但不是360度）。现在，它的旋转出现了一些问题，它不像我的要求那样旋转。如果您将运行下面的代码与附加的图像也。你会得到我的要求。

请设置您的屏幕分辨率，即高度=“1024”宽度=“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

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

Answer 1

据我了解你想要的椭圆的位置旋转正是静态光盘在后台im中的位置年龄。同样由于一点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> 

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