Binden einer Linie an den Rand einer Ellipse

Question

Auf einer Leinwand Ich habe eine von einem RotateTransform durch Animation gedreht Ellipse. Ich wünsche eine Linie mit einem Ende an einen Punkt auf der Ellipse angebracht hinzuzufügen. Kann ich zu einem Punkt auf der Ellipse binden irgendwie?

Answer 1

Sie können animieren sowohl die Ellipse und die Linie zusammen, etwa so:

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

Wir animieren ein Ende eines Linesegment mit einem PointAnimationUsingPath , und den Pfad zu einem Kreis (durch die gepunktete Linie gezeigt).

Answer 2

Ich bin mir nicht sicher, was das Problem ist. Sie können ein anderes Element in der Leinwand, dass die Linien korrekt addieren und gelten für die Leinwand der Transformation, die beiden Elemente drehen werden?

Wenn Sie sich fragen, ob es eine Möglichkeit zu sagen, „Line-up mit diesem“ auf der Linie, dann nein, Sie nicht tun können, soweit ich das jetzt. Bei komplizierten Layouts wie diese können Sie entweder Versuch und Irrtum mit Kaxaml / Bland oder Illustrator verwenden, um das Layout und dann zu XAML exportieren.

Answer 3

Unter der Annahme, ich richtig verstehe, Sie gehen die Mathematik haben, um herauszufinden, um Ihre Linie des Endpunkt zu ändern. Sorry, nicht wissen, die Formel ohne weiteres, aber Sie werden im Grunde Ihren Punkt auf der Ellipse finden, dann herauszufinden es die Position der Winkel der Drehung gegeben, und dann Linie Endpunkt ändern, dass die Informationen verwendet wird.

Answer 4

Um zwei Elemente an ihren Kanten durch eine Linie zu verbinden, verwende ich ein Bounding-Box-Verfahren, wie in Verbinden von zwei WPF Canvas-Elementen durch eine Linie, ohne Dübel? .