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

绘图线附有两个形状

2 个答案: