如何旋转椭圆中心附近的ArcSegment

Question

我有2个形状：一个椭圆和一个圆。我想围绕椭圆中心旋转圆。

<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

首先确保两个形状使用相同的坐标系是什么。您可以在一个普通的Canvas父级中将两者绘制为Path，其中一个具有EllipseGeometry，另一个具有PathGeometry。画布的左上角定义了坐标原点。

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