Привязка линии к краю эллипса

Question

На холсте у меня есть эллипс, вращаемый с помощью RotateTransform с помощью анимации. Я хочу добавить линию с одним концом к точке на эллипсе. Можно ли как-нибудь привязать точку на эллипсе?

Answer 1

Вы можете анимировать и Эллипс, и линию вместе, вот так:

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

Мы анимируем один конец LineSegment с помощью PointAnimationUsingPath и устанавливаем путь к кругу (показан пунктиром).

Answer 2

Чтобы соединить два элемента на их краях линией, я использую метод ограничительной рамки, как описано в Соединение двух элементов холста WPF линией без использования якорей? .

Answer 3

Предполагая, что я правильно понимаю, вам придется вычислить математику, чтобы изменить конечную точку вашей линии. Извините, не знаю формулу, но в основном вы найдете свою точку на эллипсе, затем определите ее положение с учетом угла поворота, а затем измените конечную точку вашей линии, используя эту информацию.

Answer 4

Я не уверен, в чем проблема. Вы можете добавить еще один элемент в свой Canvas, который выстроится корректно и применить преобразование к холсту, которое будет вращать оба элемента?

Если вы спрашиваете, есть ли способ сказать «подстроиться под это» в строке, то нет, вы не можете сделать это так, как я сейчас. Для сложных макетов, подобных этой, вы можете либо методом проб и ошибок с KaXaml / Bland, либо использовать Illustrator, чтобы выложить его, а затем экспортировать в XAML.