C# 附着到两个形状的绘图线

注意：我不是在寻找XAML解决方案。

我搞不清楚如何将一条线连接到两个形状上。我要找的东西的最好的可见表示是两个球连接在一根直棒的两端。我遇到的问题是如何显示直线，这取决于ball01和ball02的中心位置。现在，两个球都显示为我想要的样子，但是当ball02远离ball01时（ball02以ball01为中心开始），这条线就不可见了

ball01 = new Ellipse() { Height = BIG_SIZE, Width = BIG_SIZE };     
ball01.Fill = baseBrush;
ball01.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
setBall01X(e.GetPosition(canvas).X - (BIG_SIZE / 2));
setBall01Y(e.GetPosition(canvas).Y - (BIG_SIZE / 2));
Canvas.SetLeft(ball01, getBall01X());
Canvas.SetTop(ball01, getBall01Y()); 
canvas.Children.Add(ball01);

ball02 = new Ellipse() { Height = SMALL_SIZE, Width = SMALL_SIZE };
ball02.Fill = childBrush;
ball02.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
setBall02X(e.GetPosition(canvas).X - (SMALL_SIZE / 2));
setBall02Y(e.GetPosition(canvas).Y - (SMALL_SIZE / 2));
Canvas.SetLeft(ball02, getBall02X());
Canvas.SetTop(ball02, getBall02Y());
canvas.Children.Add(ball02);

// line's X's and Y's are to point to the center of both balls
// Regardless of where the balls move.
line01 = new Line() 
{
    X1 = getBall01X() + (BIG_SIZE / 2),
    Y1 = getBall01Y() + (BIG_SIZE / 2),
    X2 = getBall02X() + (SMALL_SIZE / 2),
    Y2 = getBall02Y() + (SMALL_SIZE / 2)
};


line01.Fill = baseBrush;
line01.SnapsToDevicePixels = true;
line01.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased);
line01.StrokeThickness = 2;
// Canvas.Set???
canvas.Children.Add(line01);

---

我想你最好分两步画：
1） 添加3个图形并存储它们（在构建窗口时）。
2） 更新动画循环中的坐标。
这将比在每一帧上清除/填充画布更快/更方便

对于您的线路问题：将其挂在圆圈1的中心，然后将其转到圆圈2的中心：

  // new line coordinates :
  X1 = Y1 = 0
  X2 = Balle02X - Balle01X + ( SMALL_SIZE / 2 )
  Y2 = Balle02Y - Balle01Y + ( SMALL_SIZE / 2 )
  Canvas.SetTop ( line01, Balle01X + (BIG_SIZE / 2) )
  Canvas.SetLeft( line01, Balle01Y + (BIG_SIZE / 2) )

---

与其使用

椭圆

和

直线

控件并通过

画布将其定位。左侧

和

画布。顶部

您可能更喜欢使用三个具有适当几何图形的

路径

控件。尤其是与

椭圆

控制相比，

椭圆

测量法更容易处理其中心点

private EllipseGeometry ball1Geometry = new EllipseGeometry();
private EllipseGeometry ball2Geometry = new EllipseGeometry();
private LineGeometry lineGeometry = new LineGeometry();

public MainWindow()
{
    InitializeComponent();

    canvas.Children.Add(new Path
    {
        Stroke = Brushes.Black,
        Data = ball1Geometry
    });

    canvas.Children.Add(new Path
    {
        Stroke = Brushes.Black,
        Data = ball2Geometry
    });

    canvas.Children.Add(new Path
    {
        Stroke = Brushes.Black,
        Data = lineGeometry
    });
}

...

private void UpdateDrawing(
    Point ball1Position, double ball1Radius,
    Point ball2Position, double ball2Radius)
{
    ball1Geometry.RadiusX = ball1Radius;
    ball1Geometry.RadiusY = ball1Radius;
    ball1Geometry.Center = ball1Position;

    ball2Geometry.RadiusX = ball2Radius;
    ball2Geometry.RadiusY = ball2Radius;
    ball2Geometry.Center = ball2Position;

    lineGeometry.StartPoint = ball1Position;
    lineGeometry.EndPoint = ball2Position;
}

---

然后，您可能还更喜欢使用WPF方式并在XAML中创建路径：

<Canvas>
    <Path Stroke="Black">
        <Path.Data>
            <EllipseGeometry x:Name="ball1Geometry"/>
        </Path.Data>
    </Path>
    <Path Stroke="Black">
        <Path.Data>
            <EllipseGeometry x:Name="ball2Geometry"/>
        </Path.Data>
    </Path>
    <Path Stroke="Black">
        <Path.Data>
            <LineGeometry x:Name="lineGeometry"/>
        </Path.Data>
    </Path>
</Canvas>

---

这是非常粗鲁和不恰当的