A ligao de uma linha para a borda de uma elipse

Question

Em uma tela eu tenho uma elipse girada por um RotateTransform através da animação. Desejo acrescentar uma linha com uma extremidade ligada a um ponto da elipse. Posso de alguma forma se ligam a um ponto da elipse?

Answer 1

Você pode animar tanto a Ellipse e a linha juntos, assim:

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

Nós animar uma extremidade de um LineSegment com um PointAnimationUsingPath , e definir o caminho para um círculo (mostrada pela linha a tracejado).

Answer 2

Eu não tenho certeza qual é o problema. Você pode adicionar um outro elemento em sua tela que as linhas corretamente e aplicar a transformação para a tela que vai rodar ambos os elementos?

Se você está perguntando se há alguma maneira de dizer "alinhar com esta" na linha então não, você não pode fazer isso tanto quanto eu agora. Para layouts complicados como este você pode tentativa e erro com Kaxaml / Bland, ou usar o Illustrator para colocá-lo fora e, em seguida, exportar para XAML.

Answer 3

Supondo que eu entendi, você vai ter que descobrir a matemática para alterar ponto final da sua linha. Desculpe, não sei a fórmula de improviso, mas você basicamente encontrar o seu ponto sobre a elipse, em seguida, descobrir a sua posição dado o ângulo de rotação, e, em seguida, mudar o ponto final da sua linha usando essa informação.

Answer 4

Para conectar dois elementos em suas bordas por uma linha, eu uso um método caixa delimitadora, como explicado em conectando dois WPF lona elementos por uma linha, sem o uso de âncoras? .