将一条线绑定到椭圆的边缘答案

【问题标题】：Binding a line to the edge of an ellipse将一条线绑定到椭圆的边缘
【发布时间】：2009-03-09 08:46:03
【问题描述】：

在画布上，我有一个由 RotateTransform 通过动画旋转的椭圆。我希望添加一条线，其一端连接到椭圆上的一个点。我可以以某种方式绑定到椭圆上的一点吗？

【问题讨论】：

【解决方案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 的一端设置动画，并将路径设置为一个圆圈（如虚线所示）。

【讨论】：

优秀。我不知道 PointAnimationUsingPath 类。谢谢。

【解决方案2】：

我不确定是什么问题。您可以将另一个元素添加到正确排列的画布中，然后将变换应用于将旋转两个元素的画布？

如果您要问是否有任何方式可以在线上说“与此一致”，那么没有，就我现在而言，您无法做到这一点。对于像这样的复杂布局，您可以使用 KaXaml/Bland 反复试验，或者使用 Illustrator 对其进行布局，然后导出到 XAML。

【讨论】：

我只想旋转椭圆。线的一端应该看起来连接到椭圆上的一点。

【解决方案3】：

假设我理解正确，您将不得不计算出更改线路终点的数学方法。抱歉，不知道公式，但您基本上会在椭圆上找到您的点，然后根据旋转角度计算出它的位置，然后使用该信息更改直线的终点。

【讨论】：

【解决方案4】：

为了通过一条线将两个元素的边缘连接起来，我使用Connecting two WPF canvas elements by a line, without using anchors? 中解释的边界框方法。

【讨论】：