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的左上角定义了坐标原点。

<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＆＃39; 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>

如何围绕椭圆中心旋转ArcSegment

1 个答案: