Unir una línea al borde de una elipse

Question

En un lienzo tengo una elipse rotada por un RotateTransform a través de la animación. Deseo agregar una línea con un extremo unido a un punto en la elipse. ¿Puedo enlazar de alguna manera a un punto en la elipse?

Answer 1

Puedes animar tanto la Elipse como la línea juntos, así:

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

Animamos un extremo de un LineSegment con un PointAnimationUsingPath , y establezca la ruta en un círculo (que se muestra mediante la línea de puntos).

Answer 2

No estoy seguro de cuál es el problema. ¿Puede agregar otro elemento a su Lienzo que se alinee correctamente y aplicar la transformación al lienzo que rotará ambos elementos?

Si está preguntando si hay alguna forma de decir " alinearse con este " en la línea entonces no, no puedes hacer eso tan lejos como yo ahora. Para diseños complicados como este, puede probar y cometer errores con KaXaml / Bland, o usar Illustrator para diseñarlo y luego exportarlo a XAML.

Answer 3

Suponiendo que entiendo correctamente, tendrá que resolver los cálculos para cambiar el punto final de su línea. Lo siento, no sé la fórmula de antemano, pero básicamente encontrará su punto en la elipse, luego descubrirá su posición dado el ángulo de rotación y luego cambiará el punto final de su línea con esa información.

Answer 4

Para conectar dos elementos en sus bordes por una Línea, utilizo un método de cuadro delimitador como se explica en ¿Conectando dos elementos de lienzo WPF por una línea, sin usar anclajes? .