连接到两个形状的绘制线

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

来源

2013-11-21 SpicyWeenie

这是非常粗鲁和不当 – SpicyWeenie

而不是使用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>

来源

2013-11-21 13:50:44 Clemens

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

来源

2013-11-21 11:32:20 GameAlchemist

连接到两个形状的绘制线

回答

相关问题