Привязка линии к краю эллипса
-
05-07-2019 - |
Вопрос
На холсте у меня есть эллипс, вращаемый с помощью RotateTransform с помощью анимации. Я хочу добавить линию с одним концом к точке на эллипсе. Можно ли как-нибудь привязать точку на эллипсе?
Решение
Вы можете анимировать и эллипс, и линию вместе, например:
<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 , и установите путь к кругу (показан пунктирной линией).
Другие советы
Я не уверен, в чем проблема. Вы можете добавить еще один элемент в свой Canvas, который выстроится корректно, и применить преобразование к холсту, которое будет вращать оба элемента?
Если вы спрашиваете, можно ли как-то сказать "подстроиться под это" на линии тогда нет, вы не можете сделать это, насколько я сейчас. Для сложных макетов, подобных этой, вы можете либо методом проб и ошибок с KaXaml / Bland, либо использовать Illustrator, чтобы выложить его, а затем экспортировать в XAML.
Предполагая, что я правильно понимаю, вам придется выяснить математику, чтобы изменить конечную точку вашей линии. Извините, не знаю формулу, но в основном вы найдете свою точку на эллипсе, затем определите ее положение с учетом угла поворота, а затем измените конечную точку вашей линии, используя эту информацию.
Чтобы соединить два элемента по их краям линией, я использую метод ограничивающего прямоугольника, как описано в Соединение двух элементов холста WPF одной линией без использования якорей? .