Windows Form中FlowLayoutPanel标签间无法绘制连线求助

问题根源 #

你当前代码无法稳定绘制连线的核心原因有两个：

1. 使用this.CreateGraphics()创建的是临时绘图上下文，窗口发生重绘（比如最小化、被其他窗口遮挡、控件刷新）时，绘制的线条会立即消失。
2. 坐标计算仅使用了标签的左上角，且未考虑FlowLayoutPanel作为父控件的偏移，导致连线位置可能不准确。

方案一：重写Form的OnPaint方法持久化连线 #

通过保存所有配对关系，在Form重绘时重新绘制连线，保证线条不会丢失：

1. 定义类存储配对的标签信息：

public class ConnectionLine
{
    public Label LabelA { get; set; }
    public Label LabelB { get; set; }
}

2. 在Form中添加列表保存所有连线：

private List<ConnectionLine> _connectionLines = new List<ConnectionLine>();

3. 修改LabelBDragDrop事件，记录配对并触发重绘：

private void LabelBDragDrop(object sender, DragEventArgs e)
{
    Label labelB = (Label)sender;
    Label labelA = (Label)e.Data.GetData(typeof(Label));

    // 保存配对关系
    _connectionLines.Add(new ConnectionLine { LabelA = labelA, LabelB = labelB });
    // 触发Form重绘
    this.Invalidate();
}

4. 重写Form的OnPaint方法，遍历配对绘制连线：

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    using (Pen pen = new Pen(Color.Black, 2))
    {
        foreach (var line in _connectionLines)
        {
            // 计算标签中心（相对于父控件FlowLayoutPanel）
            Point centerA = new Point(
                line.LabelA.Left + line.LabelA.Width / 2,
                line.LabelA.Top + line.LabelA.Height / 2
            );
            Point centerB = new Point(
                line.LabelB.Left + line.LabelB.Width / 2,
                line.LabelB.Top + line.LabelB.Height / 2
            );
            // 转换为Form的绝对坐标（加上FlowLayoutPanel的偏移）
            centerA.Offset(line.LabelA.Parent.Left, line.LabelA.Parent.Top);
            centerB.Offset(line.LabelB.Parent.Left, line.LabelB.Parent.Top);
            
            e.Graphics.DrawLine(pen, centerA, centerB);
        }
    }
}

方案二：使用PictureBox作为专用画布（推荐） #

用PictureBox作为连线的绘制层，将其置于FlowLayoutPanel下方，避免线条与控件刷新冲突，管理更灵活：

1. 在Form初始化时创建并配置PictureBox：

private PictureBox _canvas;
private List<ConnectionLine> _connectionLines = new List<ConnectionLine>();

public MatchTest()
{
    InitializeComponent();
    dictionary = new DictionaryNumbers();
    
    // 初始化画布
    _canvas = new PictureBox
    {
        Dock = DockStyle.Fill,
        BackColor = Color.Transparent,
        SizeMode = PictureBoxSizeMode.Normal
    };
    this.Controls.Add(_canvas);
    _canvas.SendToBack(); // 放到最底层，不遮挡标签和Panel
    _canvas.Paint += Canvas_Paint;
}

2. 实现PictureBox的Paint事件绘制连线：

private void Canvas_Paint(object sender, PaintEventArgs e)
{
    using (Pen pen = new Pen(Color.Black, 2))
    {
        foreach (var line in _connectionLines)
        {
            Point centerA = new Point(
                line.LabelA.Left + line.LabelA.Width / 2 + line.LabelA.Parent.Left,
                line.LabelA.Top + line.LabelA.Height / 2 + line.LabelA.Parent.Top
            );
            Point centerB = new Point(
                line.LabelB.Left + line.LabelB.Width / 2 + line.LabelB.Parent.Left,
                line.LabelB.Top + line.LabelB.Height / 2 + line.LabelB.Parent.Top
            );
            
            e.Graphics.DrawLine(pen, centerA, centerB);
        }
    }
}

3. 修改LabelBDragDrop事件触发画布重绘：

private void LabelBDragDrop(object sender, DragEventArgs e)
{
    Label labelB = (Label)sender;
    Label labelA = (Label)e.Data.GetData(typeof(Label));

    _connectionLines.Add(new ConnectionLine { LabelA = labelA, LabelB = labelB });
    _canvas.Invalidate();
}

额外提示 #

• 若需要支持删除错误连线，只需从_connectionLines列表中移除对应项，再触发重绘即可。
• 使用using语句管理Pen等GDI+对象，避免资源泄漏。

内容的提问来源于stack exchange，提问作者N00TS