代码之家  ›  专栏  ›  技术社区  ›  Jakob Christensen

将线绑定到椭圆的边缘

  •  0
  • Jakob Christensen  · 技术社区  · 17 年前

    在画布上,我有一个椭圆通过动画旋转变换。我希望添加一条线,一端连接到椭圆上的一个点。我可以绑定到椭圆上的一个点吗?

    4 回复  |  直到 17 年前
        1
  •  1
  •   Robert Macnee    17 年前

    可以同时设置椭圆和直线的动画,如下所示:

    <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

        2
  •  0
  •   Steven Robbins    17 年前

    我不确定是什么问题。您可以将另一个元素添加到正确排列的画布中,并将转换应用到将旋转这两个元素的画布?

    如果你问有没有办法在电话里说“排好队”,那么就我现在所知,你不能这么做。对于这样复杂的布局,您可以使用KaXaml/Bland反复尝试,也可以使用Illustrator进行布局,然后导出到XAML。

        3
  •  0
  •   Fortes    17 年前

    假设我理解正确,你必须计算出改变线端点的数学。对不起,我现在还不知道这个公式,但你基本上会在椭圆上找到你的点,然后根据旋转角度计算出它的位置,然后使用这些信息更改直线的端点。

    推荐文章