Чертежная линия, прикрепленная к двум формам

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 обеспечивает гораздо более удобное управление его центральной точкой, по сравнению с управлением Ellipse.

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))