楕円の中心を中心にArcSegmentを回転する方法

Question

私は2つの形を持っています：楕円と楕円が1つです。楕円の中心を中心に円を回転したいと思います。ここで

<Path Stroke="Indigo" StrokeThickness="3" RenderTransformOrigin="0.5,0.5" 
     Data="M 50 50 A 50 50 0 0 0 42.5 26.2"> 
     <Path.RenderTransform> 
      <RotateTransform Angle="270"/> 
     </Path.RenderTransform> 
</Path> 
<Ellipse Stroke="Black" Width="50" Height="50"/> 

は私が

Answer 1

まず、両方の形状が同じ座標系を使用することを確認して欲しいものです。両方とも、Pathとして描画することができます。一方はEllipseGeometry、他方はPathGeometryと共通のCanvas親で描画できます。キャンバスの左上隅が座標原点を定義します。

<Canvas Margin="100"> 
    <Path Stroke="Black"> 
     <Path.Data> 
      <EllipseGeometry RadiusX="50" RadiusY="50"/> 
     </Path.Data> 
    </Path> 
    <Path Stroke="LightBlue" StrokeThickness="5"> 
     <Path.Data> 
      <PathGeometry> 
       <PathFigure StartPoint="0,-50"> 
        <ArcSegment Point="42.5,-26.2" Size="50,50" 
           IsLargeArc="False" SweepDirection="Clockwise"/> 
       </PathFigure> 
       <PathGeometry.Transform> 
        <RotateTransform Angle="15"/> 
       </PathGeometry.Transform> 
      </PathGeometry> 
     </Path.Data> 
    </Path> 
</Canvas> 

今ArcSegmentのPointとRotateTransformのAngleニーズに応じて調整します。

---

更新：

<Path Stroke="LightBlue" StrokeThickness="5"> 
    <Path.Data> 
     <PathGeometry> 
      <PathFigure StartPoint="0,-50"> 
       <ArcSegment Point="42.5,-26.2" Size="50,50" 
          IsLargeArc="False" SweepDirection="Clockwise"/> 
      </PathFigure> 
      <PathGeometry.Transform> 
       <RotateTransform x:Name="transform"/> 
      </PathGeometry.Transform> 
     </PathGeometry> 
    </Path.Data> 
    <Path.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetName="transform" 
         Storyboard.TargetProperty="Angle" 
         To="360" Duration="0:0:2" RepeatBehavior="Forever"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Path.Triggers> 
</Path> 

または明示的にRotateTransformを命名することなく、：：

<Path Stroke="LightBlue" StrokeThickness="5"> 
    <Path.Data> 
     <PathGeometry> 
      <PathFigure StartPoint="0,-50"> 
       <ArcSegment Point="42.5,-26.2" Size="50,50" 
          IsLargeArc="False" SweepDirection="Clockwise"/> 
      </PathFigure> 
      <PathGeometry.Transform> 
       <RotateTransform/> 
      </PathGeometry.Transform> 
     </PathGeometry> 
    </Path.Data> 
    <Path.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation 
         Storyboard.TargetProperty="Data.Transform.Angle" 
         To="360" Duration="0:0:2" RepeatBehavior="Forever"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Path.Triggers> 
</Path>