在画布上,我有一个由 RotateTransform 通过动画旋转的椭圆。我希望添加一条线,其一端连接到椭圆上的一个点。我可以以某种方式绑定到椭圆上的一个点吗?
Jakob Christensen
问问题
1343 次
4 回答
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>
我们使用PointAnimationUsingPath为LineSegment的一端设置动画,并将路径设置为圆形(如虚线所示)。
于 2009-03-09T19:11:46.853 回答
0
我不确定问题是什么。您可以将另一个元素添加到正确排列的画布中,并将变换应用于将旋转两个元素的画布?
如果您问是否有任何方式可以在线上说“与此一致”,那么没有,就我现在而言,您不能这样做。对于像这样的复杂布局,您可以使用 KaXaml/Bland 反复试验,或者使用 Illustrator 对其进行布局,然后导出到 XAML。
于 2009-03-09T08:50:57.143 回答
0
假设我理解正确,您将不得不计算数学来更改您的线路的终点。抱歉,不知道公式,但您基本上会在椭圆上找到您的点,然后根据旋转角度计算出它的位置,然后使用该信息更改直线的终点。
于 2009-03-09T18:16:12.463 回答
0
为了通过线连接两个元素的边缘,我使用边界框方法,如 通过线连接两个 WPF 画布元素中所述,不使用锚点?.
于 2009-11-15T13:37:40.927 回答