[英]WPF C# Canvas Drawing Line connecting buttons
我测试了如何绘制在点击按钮按钮连接到另一个按钮一条线,我得到的坐标和迷惑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处画一条线。
尽管可以通过移动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
单击和确定何时绘制线条方面并不是特别出色,但是它应该演示绘制并获取您要使用的坐标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.