Legare una linea al bordo di un'ellisse

Question

Su una tela ho un'ellisse ruotata da RotateTransform attraverso l'animazione. Vorrei aggiungere una linea con un'estremità collegata a un punto sull'ellisse. Posso in qualche modo legare ad un punto sull'ellisse?

Answer 1

Puoi animare insieme sia l'ellisse che la linea, in questo modo:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Resources>
        <PathGeometry x:Key="lineEndPath">
            <PathFigure StartPoint="25,50">
                <ArcSegment IsLargeArc="True" Point="100,50" Size="25,25" SweepDirection="Clockwise"/>
                <ArcSegment IsLargeArc="True" Point="25,50" Size="25,25" SweepDirection="Clockwise"/>
            </PathFigure>
        </PathGeometry>
    </Canvas.Resources>
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:5" From="0" RepeatBehavior="Forever" Storyboard.TargetName="rotTF" Storyboard.TargetProperty="Angle" To="360"/>
                    <PointAnimationUsingPath Duration="0:0:5" PathGeometry="{StaticResource lineEndPath}" RepeatBehavior="Forever" Storyboard.TargetName="lineEndPoint" Storyboard.TargetProperty="Point"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
    <Ellipse Width="75" Height="50" Canvas.Left="25" Canvas.Top="25" Stroke="Black">
        <Ellipse.RenderTransform>
            <RotateTransform x:Name="rotTF" CenterX="37.5" CenterY="25"/>
        </Ellipse.RenderTransform>
    </Ellipse>
    <Path Stroke="Black" StrokeThickness="1.0">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,0">
                    <LineSegment x:Name="lineEndPoint"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Data="{StaticResource lineEndPath}" Stroke="Black" StrokeDashArray="2,0,0" StrokeThickness="1.0"/>
</Canvas>

Animiamo un'estremità di un LineSegment con un PointAnimationUsingPath , e imposta il percorso su un cerchio (indicato dalla linea tratteggiata).

Answer 2

Non sono sicuro di quale sia il problema. Puoi aggiungere un altro elemento alla tua tela che si allinea correttamente e applicare la trasformazione alla tela che ruoterà entrambi gli elementi?

Se stai chiedendo se c'è un modo per dire " allinea con questo " sulla linea allora no, non puoi farlo fino a me adesso. Per layout complicati come questo, puoi provare ed errori con KaXaml / Bland oppure utilizzare Illustrator per disporlo e quindi esportare in XAML.

Answer 3

Supponendo che ho capito bene, dovrai capire la matematica per cambiare il punto finale della tua linea. Spiacenti, non conosci la formula con disinvoltura, ma fondamentalmente troverai il tuo punto sull'ellisse, quindi scoprirai la sua posizione dato l'angolo di rotazione, quindi cambi il punto finale della tua linea usando quelle informazioni.

Answer 4

Per collegare due elementi ai loro bordi tramite una linea, utilizzo un metodo del riquadro di selezione come spiegato in Collegare due elementi di tela WPF con una linea, senza usare ancore? .