WPF C＃畫布繪圖線連接按鈕

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划清界限。

而且，我如何將按鈕調整為同一水平，因為現在右按鈕（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而言被單擊的按鈕的位置。

然后，您需要做類似的事情來找到您單擊的原始對象的位置（您似乎沒有在存儲它）。 然后，您可以通過設置X1, X2, Y1, Y2值在兩個計算的Points之間簡單地畫一條線。

改編您的示例，您可以執行以下操作（僅用於演示）：

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單擊和確定何時繪制線條方面並不是特別出色，但是它應該演示繪制並獲取您要使用的坐標。