Как оживить Путь по кругу?

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.

Я бы хотелповерните путь, «FlyingArc» вокруг внутреннего круга радиуса 100 с центральной точкой в ​​(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>