Question

WPF

以下代码正确绘制了一条中心点为（560,200）的路径。路径由两个弧组成。半径为150的外弧和半径为100的内弧：

<Grid Margin="0,-2,0,2">
    <Path x:Name="FlyingArc" RenderTransformOrigin="0.5, 0.5"
                Data="M 710,200               
                A 150 150 0 0 0 666.0660,93.9340                
                L 630.7107,129.2893              
                A 100 100  0 0 1  660,200               
                z" 
                Fill="Green" Stroke="Black">

        <Path.RenderTransform>
            <RotateTransform x:Name="noFreeze" />
        </Path.RenderTransform>

        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
        Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
        To="-360" Duration="0:0:1" RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Grid>

问题在于，以这种方式旋转路径会导致半径为560的旋转。

我想绕着半径为100的内圆旋转路径“ FlyingArc”，中心点为（560,200）。也就是说，我希望FlyingArc路径的所有点与旋转中心保持相等的距离-该中心位于560,200，半径为100。

那是怎么做到的？

感谢您的帮助。

Answer 1

Path元素应具有固定的Width和Height，其值为300，并且Data的位置应调整为以（150,150）为中心。然后，您可以使用适当的Margin将其移动到所需位置。

还请注意，父网格会调整路径的布局位置。默认情况下，它是拉伸的，有效地使其具有固定大小时居中。也许使用不同的HorizontalAlignment和VerticalAlignment，或者使用Canvas的父级。

<Path x:Name="FlyingArc"
      Width="300" Height="300"
      Margin="410,50,0,0"
      HorizontalAlignment="Left" VerticalAlignment="Top"
      Data="M300,150
            A150,150,0,0,0,256.0660,43.9340                
            L220.7107,79.2893
            A100,100,0,0,1,250,150Z" 
      Fill="Green" Stroke="Black"
      RenderTransformOrigin="0.5,0.5">

为了避免剪辑方面的任何问题，您还可以为数据几何的Transform属性（而不是路径的RenderTransform）设置动画：

<Path x:Name="FlyingArc"
        Width="300" Height="300"
        Margin="410,50,0,0"
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Fill="Green" Stroke="Black">
    <Path.Data>
        <PathGeometry Figures="M300,150
                               150,150,0,0,0,256.0660,43.9340                
                               L220.7107,79.2893
                               A100,100,0,0,1,250,150Z">
            <PathGeometry.Transform>
                <RotateTransform CenterX="150" CenterY="150"/>
            </PathGeometry.Transform>
        </PathGeometry>
    </Path.Data>
    <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="Data.Transform.Angle"
                        To="-360" Duration="0:0:1" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
</Path>

如何为圆周围的路径设置动画？

1 个答案: