C#?Windows?Forms中實(shí)現(xiàn)控件之間的連接線的方法詳解

更新時(shí)間：2024年02月13日 08:23:01 作者：金士頓

這篇文章主要為大家詳細(xì)介紹了如何在C#?Windows?Forms應(yīng)用程序中實(shí)現(xiàn)繪圖工具中多個(gè)控件之間的連接線功能,文中的示例代碼講解詳細(xì),需要的可以參考下

幫我實(shí)現(xiàn)繪圖工具多個(gè)控件連接線

實(shí)現(xiàn)繪圖工具中多個(gè)控件之間的連接線功能，可以通過以下幾個(gè)步驟來進(jìn)行：

定義連接線的數(shù)據(jù)模型：首先需要定義一個(gè)模型來表示連接線，這個(gè)模型應(yīng)該包含起點(diǎn)和終點(diǎn)的坐標(biāo)。

繪制連接線：使用GDI+繪圖功能，在控件的Paint事件中根據(jù)連接線的數(shù)據(jù)模型來繪制線條。

更新連接線的坐標(biāo)：當(dāng)控件移動(dòng)時(shí)，需要更新連接線的起點(diǎn)和終點(diǎn)坐標(biāo)，并觸發(fā)重繪。

以下是一個(gè)簡(jiǎn)化的示例代碼，展示了如何在Windows Forms應(yīng)用程序中實(shí)現(xiàn)這些步驟：

首先，定義一個(gè)連接線的類：

public class ConnectionLine
{
    public Point StartPoint { get; set; }
    public Point EndPoint { get; set; }

    public ConnectionLine(Point start, Point end)
    {
        StartPoint = start;
        EndPoint = end;
    }
}

然后，在Form中維護(hù)一個(gè)連接線的列表，并在Form的Paint事件中繪制它們：

public partial class MainForm : Form
{
    private List<ConnectionLine> lines = new List<ConnectionLine>();

    public MainForm()
    {
        InitializeComponent();
        // 示例：添加一個(gè)連接線
        lines.Add(new ConnectionLine(new Point(50, 50), new Point(200, 200)));
        // 訂閱Paint事件
        this.Paint += MainForm_Paint;
    }

    private void MainForm_Paint(object sender, PaintEventArgs e)
    {
        foreach (var line in lines)
        {
            // 使用黑色畫筆繪制線條
            e.Graphics.DrawLine(Pens.Black, line.StartPoint, line.EndPoint);
        }
    }

    // 在控件移動(dòng)或者需要更新線條時(shí)，更新線條的坐標(biāo)，并調(diào)用Invalidate()重繪
    public void UpdateLine(Point newStart, Point newEnd)
    {
        if (lines.Any())
        {
            lines[0].StartPoint = newStart;
            lines[0].EndPoint = newEnd;
            this.Invalidate(); // 通知窗體需要重繪
        }
    }
}

這個(gè)示例僅展示了如何在一個(gè)Form中繪制靜態(tài)的連接線。在實(shí)際應(yīng)用中，你可能需要根據(jù)具體的需求（例如，連接特定的控件）來動(dòng)態(tài)更新線條的起點(diǎn)和終點(diǎn)坐標(biāo)。你可以通過為這些控件添加事件處理器（比如處理MouseMove事件以便在拖動(dòng)時(shí)更新線條）來實(shí)現(xiàn)這一點(diǎn)。

請(qǐng)根據(jù)你的具體需求調(diào)整以上代碼。例如，如果你的控件可以被用戶拖動(dòng)，那么你需要在控件的拖動(dòng)事件中更新對(duì)應(yīng)的ConnectionLine對(duì)象的起點(diǎn)或終點(diǎn)坐標(biāo)，并調(diào)用Form的Invalidate方法來重繪連接線。

再加上在控件上的小方框連接功能

要在控件上添加小方框并實(shí)現(xiàn)連接功能，我們需要采取一些額外的步驟，包括：

定義連接點(diǎn)（小方框）：在每個(gè)控件的邊緣定義連接點(diǎn)，這些連接點(diǎn)可以是小方框，用于表示連接線的起點(diǎn)和終點(diǎn)。

繪制連接點(diǎn)：在每個(gè)控件上繪制表示連接點(diǎn)的小方框。

連接點(diǎn)與連接線的交互：允許用戶通過拖拽來創(chuàng)建從一個(gè)連接點(diǎn)到另一個(gè)連接點(diǎn)的連接線。

更新連接線和連接點(diǎn)：當(dāng)控件移動(dòng)時(shí)，更新連接線的坐標(biāo)以及連接點(diǎn)的位置，并重新繪制。

這里是一個(gè)簡(jiǎn)化的示例，展示了如何實(shí)現(xiàn)控件上的小方框連接點(diǎn)和連接線的基本功能：

首先，我們定義一個(gè)ConnectableControl類，它繼承自Control類，并添加連接點(diǎn)的繪制：

public class ConnectableControl : Control
{
    // 連接點(diǎn)的大小
    private const int ConnectorSize = 8;

    public Point ConnectionPoint => new Point(Left + Width / 2, Top + Height / 2);

    public ConnectableControl()
    {
        this.Width = 100;
        this.Height = 50;
        this.BackColor = Color.LightGray;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        // 繪制控件中心的連接點(diǎn)
        var connectorRect = new Rectangle(Width / 2 - ConnectorSize / 2, Height / 2 - ConnectorSize / 2, ConnectorSize, ConnectorSize);
        e.Graphics.FillRectangle(Brushes.Black, connectorRect);
    }
}

在MainForm類中，我們需要處理這些ConnectableControl對(duì)象的連接點(diǎn)，以及繪制和更新連接線：

public partial class MainForm : Form
{
    private List<ConnectionLine> lines = new List<ConnectionLine>();
    private ConnectableControl control1, control2;

    public MainForm()
    {
        InitializeComponent();

        control1 = new ConnectableControl();
        control1.Location = new Point(50, 50);
        this.Controls.Add(control1);

        control2 = new ConnectableControl();
        control2.Location = new Point(200, 200);
        this.Controls.Add(control2);

        // 添加連接線示例
        lines.Add(new ConnectionLine(control1.ConnectionPoint, control2.ConnectionPoint));

        this.Paint += MainForm_Paint;
    }

    private void MainForm_Paint(object sender, PaintEventArgs e)
    {
        // 繪制所有連接線
        foreach (var line in lines)
        {
            e.Graphics.DrawLine(Pens.Black, line.StartPoint, line.EndPoint);
        }
    }

    // 當(dāng)控件移動(dòng)時(shí)，調(diào)用此方法更新線條坐標(biāo)
    public void UpdateLines()
    {
        if (lines.Any())
        {
            lines[0].StartPoint = control1.ConnectionPoint;
            lines[0].EndPoint = control2.ConnectionPoint;
            this.Invalidate(); // 通知窗體重繪
        }
    }
}

在實(shí)際應(yīng)用中，你可能還需要實(shí)現(xiàn)拖拽創(chuàng)建連接線的功能，這會(huì)涉及到更復(fù)雜的鼠標(biāo)事件處理。例如，你可以在ConnectableControl上檢測(cè)鼠標(biāo)按下事件來開始繪制一條新的連接線，并在鼠標(biāo)釋放時(shí)確定連接線的終點(diǎn)。

請(qǐng)注意，以上代碼僅為概念驗(yàn)證，實(shí)現(xiàn)更完整的功能（如控件的拖拽、動(dòng)態(tài)創(chuàng)建連接線等）需要進(jìn)一步擴(kuò)展這些基礎(chǔ)代碼。

再加上鼠標(biāo)連接兩個(gè)控件小方框

要實(shí)現(xiàn)使用鼠標(biāo)連接兩個(gè)控件的小方框功能，我們需要在ConnectableControl類中處理鼠標(biāo)事件，并在主窗體MainForm中管理這些連接。以下步驟和代碼示例將指導(dǎo)你如何實(shí)現(xiàn)：

鼠標(biāo)事件處理：在ConnectableControl中處理鼠標(biāo)按下和鼠標(biāo)釋放事件，以便開始和結(jié)束連接線的繪制。

連接管理：在MainForm中管理控件之間的連接，包括添加和繪制連接線。

實(shí)時(shí)更新連接線：在拖動(dòng)鼠標(biāo)時(shí)實(shí)時(shí)更新連接線的繪制。

步驟 1: 更新ConnectableControl以處理鼠標(biāo)事件

首先，更新ConnectableControl類以發(fā)出事件，通知開始和結(jié)束連接：

public class ConnectableControl : Control
{
    // 連接點(diǎn)的大小
    private const int ConnectorSize = 8;
    public Point ConnectionPoint => new Point(Left + Width / 2, Top + Height / 2);

    // 事件，用于通知開始和結(jié)束連接
    public event EventHandler<Point> ConnectionStart;
    public event EventHandler<Point> ConnectionEnd;

    public ConnectableControl()
    {
        this.Width = 100;
        this.Height = 50;
        this.BackColor = Color.LightGray;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        var connectorRect = new Rectangle(Width / 2 - ConnectorSize / 2, Height / 2 - ConnectorSize / 2, ConnectorSize, ConnectorSize);
        e.Graphics.FillRectangle(Brushes.Black, connectorRect);
    }

    protected override void OnMouseDown(MouseEventArgs e)
    {
        base.OnMouseDown(e);
        // 檢查鼠標(biāo)點(diǎn)擊是否在連接點(diǎn)內(nèi)
        var connectorRect = new Rectangle(Width / 2 - ConnectorSize / 2, Height / 2 - ConnectorSize / 2, ConnectorSize, ConnectorSize);
        if (connectorRect.Contains(e.Location))
        {
            ConnectionStart?.Invoke(this, ConnectionPoint);
        }
    }

    protected override void OnMouseUp(MouseEventArgs e)
    {
        base.OnMouseUp(e);
        ConnectionEnd?.Invoke(this, ConnectionPoint);
    }
}

步驟 2: 在MainForm中添加和管理連接線

更新MainForm以處理這些連接事件并繪制連接線：

public partial class MainForm : Form
{
    private List<ConnectionLine> lines = new List<ConnectionLine>();
    private Point? temporaryStartPoint = null;

    public MainForm()
    {
        InitializeComponent();

        // 實(shí)例化兩個(gè)可連接控件
        ConnectableControl control1 = new ConnectableControl();
        control1.Location = new Point(50, 50);
        this.Controls.Add(control1);

        ConnectableControl control2 = new ConnectableControl();
        control2.Location = new Point(200, 200);
        this.Controls.Add(control2);

        // 為控件的連接事件訂閱事件處理器
        control1.ConnectionStart += (s, e) => { temporaryStartPoint = e; };
        control1.ConnectionEnd += (s, e) => { if (temporaryStartPoint.HasValue) AddLine(temporaryStartPoint.Value, e); };

        control2.ConnectionStart += (s, e) => { temporaryStartPoint = e; };
        control2.ConnectionEnd += (s, e) => { if (temporaryStartPoint.HasValue) AddLine(temporaryStartPoint.Value, e); };

        this.Paint += MainForm_Paint;
    }

    private void AddLine(Point start, Point end)
    {
        lines.Add(new ConnectionLine(start, end));
        temporaryStartPoint = null;
        this.Invalidate(); // 觸發(fā)重繪
    }

    private void MainForm_Paint(object sender, PaintEventArgs e)
    {
        foreach (var line in lines)
        {
            e.Graphics.DrawLine(Pens.Black, line.StartPoint, line.EndPoint);
        }
    }
}

這個(gè)示例演示了基礎(chǔ)的連接邏輯：當(dāng)用戶在一個(gè)控件的連接點(diǎn)上按下鼠標(biāo)并在另一個(gè)控件的連接點(diǎn)上釋放鼠標(biāo)時(shí)，會(huì)創(chuàng)建并繪制一條連接線。temporaryStartPoint用于暫時(shí)存儲(chǔ)連接的起始點(diǎn)，直到連接結(jié)束。

請(qǐng)注意，這個(gè)示例僅展示了如何在兩個(gè)控件之間創(chuàng)建靜態(tài)的連接線，并沒有實(shí)現(xiàn)動(dòng)態(tài)拖拽創(chuàng)建連接線的實(shí)時(shí)視覺反饋。要實(shí)現(xiàn)這個(gè)功能，你需要進(jìn)一步處理鼠標(biāo)拖拽事件，并在拖拽過程中動(dòng)態(tài)繪制連接線。下面的步驟和代碼將指導(dǎo)你如何完成這一功能：

步驟 3: 實(shí)現(xiàn)拖拽過程中的連接線實(shí)時(shí)繪制

為了在拖拽過程中實(shí)時(shí)更新連接線，你需要修改MainForm以處理鼠標(biāo)移動(dòng)事件，并在有一個(gè)連接起點(diǎn)時(shí)動(dòng)態(tài)繪制連接線。

修改MainForm以支持實(shí)時(shí)連接線繪制：

public partial class MainForm : Form
{
    private List<ConnectionLine> lines = new List<ConnectionLine>();
    private Point? temporaryStartPoint = null;
    private Point? currentDragPoint = null; // 當(dāng)前鼠標(biāo)拖拽點(diǎn)

    public MainForm()
    {
        InitializeComponent();

        // 創(chuàng)建和配置可連接控件（如前所述）

        // 處理鼠標(biāo)移動(dòng)事件以更新連接線
        this.MouseMove += MainForm_MouseMove;
        this.MouseUp += MainForm_MouseUp; // 確保在控件外釋放鼠標(biāo)也能完成連接
    }

    private void MainForm_MouseMove(object sender, MouseEventArgs e)
    {
        if (temporaryStartPoint.HasValue)
        {
            currentDragPoint = e.Location;
            this.Invalidate(); // 重繪以顯示實(shí)時(shí)連接線
        }
    }

    private void MainForm_MouseUp(object sender, MouseEventArgs e)
    {
        // 如果在控件外釋放鼠標(biāo)，取消當(dāng)前連接操作
        if (temporaryStartPoint.HasValue && currentDragPoint.HasValue)
        {
            // 這里可以添加邏輯以檢查鼠標(biāo)是否在另一個(gè)控件的連接點(diǎn)上釋放
            // 并相應(yīng)地創(chuàng)建或取消連接線
            temporaryStartPoint = null;
            currentDragPoint = null;
            this.Invalidate(); // 重新繪制以清除未完成的連接線
        }
    }

    private void MainForm_Paint(object sender, PaintEventArgs e)
    {
        // 繪制已完成的連接線
        foreach (var line in lines)
        {
            e.Graphics.DrawLine(Pens.Black, line.StartPoint, line.EndPoint);
        }

        // 繪制實(shí)時(shí)連接線
        if (temporaryStartPoint.HasValue && currentDragPoint.HasValue)
        {
            e.Graphics.DrawLine(Pens.Red, temporaryStartPoint.Value, currentDragPoint.Value);
        }
    }
}

這段代碼在用戶拖拽鼠標(biāo)時(shí)動(dòng)態(tài)繪制一條紅色的連接線，從起始控件的連接點(diǎn)到當(dāng)前鼠標(biāo)位置。當(dāng)用戶釋放鼠標(biāo)時(shí)，如果適用，可以在此處添加邏輯來完成連接操作或取消未完成的連接。