連接到兩個形狀的繪製線

Question

注意：我不在尋找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); 

Answer 1

而不是使用Ellipse和Line控制和Canvas.Left定位他們的Canvas.Top你可能喜歡使用三個適當幾何形狀的Path控件。特別是EllipseGeometry與其控制中心相比，更容易處理其中心點。

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> 

Answer 2

我想你會分兩步更好得出：
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))