Wie man ein ArcSegment um das Ellipsenzentrum dreht

Question

Ich habe 2 Formen: eine Ellipse und einen Kreis. Ich möchte den Kreis um die Ellipsenmitte drehen.

<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"/> 

Hier ist, was ich will

Answer 1

zunächst sicherstellen, dass beide Formen das gleiche Koordinatensystem verwenden. Sie können beide als Path, eine mit EllipseGeometry, die andere mit einem PathGeometry, in einem gemeinsamen Canvas-Parent zeichnen. Die obere linke Ecke des Canvas definiert den Koordinatenursprung.

<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> 

anpassen Nun ist die ArcSegment des Point und die Angle des RotateTransform nach Ihren Bedürfnissen.

---

Update: Sie können eine Animation hinzufügen, die das Bogensegment wie diese ständig dreht:

<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> 

oder ohne explizit die RotateTransform Benennung:

<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>