Question

我正在测试如何绘制一条线，在点击按钮时将按钮连接到另一个按钮，我对坐标和settop setleft感到困惑，它们实际上是如何工作的简单的术语。我知道我们必须设置该行的X2 Y2（以终点的起点减去），但我真的很混淆要减去的内容以及我该怎么做。

到目前为止，这是我尝试过的：

 int k = 20;
 for (int i = 0; i < 4; i++)
 {
      Button btn = new Button();
      btn.Content = i.ToString();
      btn.Height = 20;
      btn.Width = 20;
      Canvas.SetTop(btn,k); // 20
      Canvas.SetLeft(btn, 20); // 10 
      Canvas1.Children.Add(btn);
      btn.PreviewMouseDown += (source, e) =>
      {
          // No idea how to set X2 , Y2 for the line's end point.
          Line line = new Line();
          //line.X2 = ;
          //line.Y2 = ;
          line.Stroke = Brushes.Red;
          line.StrokeThickness = 4;
          Canvas.SetLeft(line,40); // Suppose this is where the line should start 
          Canvas.SetTop(line ,40); // for button " 0 " .
          Canvas1.Children.Add(line);
      };
      k += 20;
 }
 for (int i = 0; i < 4; i++)
 {
      Button btn2 = new Button();
      btn2.Content = i.ToString();
      btn2.Height = 20;
      btn2.Width = 20;
      Canvas.SetTop(btn2, k); // 20
      Canvas.SetRight(btn2, 20); // 10
      Canvas1.Children.Add(btn2);
      btn2.PreviewMouseDown += (source, e) =>
      {
          //Draw Line to connect here.
      };
      k += 20;
  }

我正在尝试从btn到btn2画一条线。

Preview image

另外，我如何将按钮调整到同一级别，现在右侧按钮（btn2）比左侧按钮（btn）低，我想绘制一条线来连接右侧按钮单击按钮0时左侧按钮，因此0将绘制一条线为0。

Answer 1

虽然您可以通过移动Canvas来实现这一目标，但最好使用Buttons上Canvas自己的位置。

基本上，您需要有两组坐标，即LineStart和LineEnd，在这种情况下，您将从您点击的两个Buttons获取坐标。

您可以使用Point location = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0))获取相对于父Canvas所点击按钮的位置。

然后，您需要执行类似的操作才能找到您单击的原始对象的位置（您似乎没有存储它）。然后，您可以通过设置Points值在两个计算的X1, X2, Y1, Y2之间绘制一条线。

调整你的例子，你可以做这样的事情（只是为了演示）：

public partial class MainWindow : Window
{
    public Button LastClicked { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        InitButtons();
    }


    public void InitButtons()
    {
        int k = 20;

        for (int i = 0; i < 4; i++)
        {
            Button btn = new Button();
            btn.Content = i.ToString();
            btn.Height = 20;
            btn.Width = 20;
            Canvas.SetTop(btn, k); // 20
            Canvas.SetLeft(btn, 20); // 10 
            Canvas1.Children.Add(btn);
            btn.PreviewMouseDown += (source, e) =>
            {
                if (LastClicked != null)
                {
                    // Get button locations.
                    Point LastClickedLocation = LastClicked.TransformToAncestor(Canvas1).Transform(new Point(0, 0));
                    Point ThisClickedLocation = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0));

                    // Stop same side lines.
                    if (LastClickedLocation.X != ThisClickedLocation.X)
                    {
                        Line line = new Line();

                        line.X1 = LastClickedLocation.X;
                        line.Y1 = LastClickedLocation.Y + btn.Height / 2; // Button Middle.
                        line.X2 = ThisClickedLocation.X + btn.Width; // Adjust Left side.
                        line.Y2 = ThisClickedLocation.Y + btn.Height / 2; // Button Middle.

                        line.Stroke = Brushes.Red;
                        line.StrokeThickness = 4;

                        Canvas1.Children.Add(line);
                    }
                }

                LastClicked = (Button)source;
            };
            k += 20;
        }

        k = 20; // Reset k, this is why your buttons weren't aligned.

        for (int i = 0; i < 4; i++)
        {
            Button btn2 = new Button();
            btn2.Content = i.ToString();
            btn2.Height = 20;
            btn2.Width = 20;
            Canvas.SetTop(btn2, k); // 20
            Canvas.SetRight(btn2, 20); // 10
            Canvas1.Children.Add(btn2);

            btn2.PreviewMouseDown += (source, e) =>
            {
                if (LastClicked != null)
                {
                    // Get button locations.
                    Point LastClickedLocation = LastClicked.TransformToAncestor(Canvas1).Transform(new Point(0, 0));
                    Point ThisClickedLocation = ((Button)source).TransformToAncestor(Canvas1).Transform(new Point(0, 0));

                    // Stop same side lines.
                    if (LastClickedLocation.X != ThisClickedLocation.X)
                    {
                        Line line = new Line();

                        line.X1 = LastClickedLocation.X + btn2.Width; // Adjust Left side.
                        line.Y1 = LastClickedLocation.Y + btn2.Height / 2; // Button Middle.
                        line.X2 = ThisClickedLocation.X;
                        line.Y2 = ThisClickedLocation.Y + btn2.Height / 2; // Button Middle.

                        line.Stroke = Brushes.Red;
                        line.StrokeThickness = 4;

                        Canvas1.Children.Add(line);
                    }
                }

                LastClicked = (Button)source;
            };
            k += 20;
        }
    }
}

我不建议使用这个确切的代码，因为处理Button点击并决定何时绘制线条并不是特别明亮，但它应该演示绘图并获得您所追求的坐标。

WPF C＃画布绘制线连接按钮

1 个答案: