Relier une ligne au bord d'une ellipse

Question

Sur une toile, une ellipse est pivotée par une animation RotateTransform. Je souhaite ajouter une ligne avec une extrémité attachée à un point de l'ellipse. Puis-je me lier à un point de l'ellipse?

Answer 1

Vous pouvez animer l'Ellipse et la ligne ensemble, comme suit:

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

Nous animons l'une des extrémités d'un LineSegment avec un PointAnimationUsingPath , et définissez le chemin sur un cercle (indiqué par la ligne pointillée).

Answer 2

Je ne sais pas quel est le problème. Vous pouvez ajouter un autre élément à votre canevas qui s'aligne correctement et appliquer la transformation au canevas qui fera pivoter les deux éléments?

Si vous demandez s'il est possible de dire "Alignez-vous avec ceci". sur la ligne alors non, vous ne pouvez pas le faire aussi loin que moi maintenant. Pour les mises en page compliquées comme celle-ci, vous pouvez soit essayer et faire des erreurs avec KaXaml / Bland, soit utiliser Illustrator pour l’organiser, puis exporter au format XAML.

Answer 3

En supposant que je comprends bien, vous allez devoir calculer le calcul pour changer le point final de votre ligne. Désolé, je ne connais pas la formule à l'avance, mais vous trouverez en gros votre point sur l'ellipse, puis vous déterminerez sa position en fonction de l'angle de rotation, puis vous modifierez le point final de votre ligne à l'aide de ces informations.

Answer 4

Pour connecter deux éléments au niveau de leurs arêtes par une ligne, j'utilise une méthode de cadre de sélection comme expliqué dans Connexion de deux éléments de la toile WPF par une ligne, sans utiliser d'ancres? .