有趣的輪盤橢圓圖像旋轉（不是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> 

您應該複製並嘗試這個確切的代碼，嘗試掃描它從你的原代碼一些差異。