背景与目标

在开发图形化应用程序时，将绘图逻辑封装为可复用的自定义控件是提升代码维护性和扩展性的关键步骤。本文将演示如何将一个流程图绘制功能从窗体中剥离出来，封装成独立的画布控件（Canvas Control），从而实现在多个项目中的灵活调用。

创建自定义控件类库

首先新建一个类库项目，用于存放所有与流程图相关的可视化组件。接着添加一个继承自 System.Windows.Forms.Control 的类，命名为 FlowChartCanvas，作为我们的核心画布控件。这种"自定义控件"不同于用户控件（UserControl），它不依赖设计器，更适合完全由代码控制渲染逻辑的场景。

启用双缓冲防止闪烁

图形界面频繁重绘容易导致画面闪烁。为此，在构造函数中设置控件样式以开启双缓冲：

public FlowChartCanvas()
{
    SetStyle(
        ControlStyles.AllPaintingInWmPaint |
        ControlStyles.UserPaint |
        ControlStyles.OptimizedDoubleBuffer, true);
}

重写绘制逻辑

通过重写 OnPaint 方法实现自定义绘制。使用内存位图进行离屏渲染，避免直接操作屏幕造成抖动，并提升图像质量：

protected override void OnPaint(PaintEventArgs e)
{
    using (var buffer = new Bitmap(Width, Height))
    using (var g = Graphics.FromImage(buffer))
    {
        // 设置高质量渲染模式
        g.SmoothingMode = SmoothingMode.HighQuality;
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.Clear(BackColor);

        // 绘制形状和连线
        foreach (var shape in _shapes) shape.Draw(g);
        foreach (var link in _links) link.Draw(g);

        e.Graphics.DrawImage(buffer, Point.Empty);
    }
    base.OnPaint(e);
}

处理鼠标交互事件

为了支持拖拽形状和创建连接线，需重写以下鼠标事件：

鼠标按下（OnMouseDown）

检测点击位置是否落在某个图形上。若处于连线模式，则依次选择起点和终点形状；否则标记当前选中图形用于拖动。

protected override void OnMouseDown(MouseEventArgs e)
{
    var hitShape = _shapes.LastOrDefault(s => s.Bounds.Contains(e.Location));
    
    if (!_isLinking)
    {
        if (hitShape != null)
        {
            _isDragging = true;
            _dragStartPoint = e.Location;
            _selectedShape = hitShape;
        }
    }
    else
    {
        HandleLinkingClick(hitShape);
    }

    Invalidate(); // 触发重绘
    base.OnMouseDown(e);
}

鼠标移动（OnMouseMove）

当处于拖动状态时，根据鼠标偏移量更新图形位置并刷新显示。

protected override void OnMouseMove(MouseEventArgs e)
{
    if (_isDragging && _selectedShape != null)
    {
        var delta = new Size(e.X - _dragStartPoint.X, e.Y - _dragStartPoint.Y);
        _selectedShape.MoveBy(delta);
        _dragStartPoint = e.Location;
        Invalidate();
    }
    base.OnMouseMove(e);
}

鼠标释放（OnMouseUp）

结束拖动或完成连线操作，重置相关状态。

protected override void OnMouseUp(MouseEventArgs e)
{
    if (_isDragging)
    {
        _isDragging = false;
        _selectedShape = null;
    }
    base.OnMouseUp(e);
}

暴露公共接口供外部调用

为了让宿主窗体能够控制画布行为，提供如下方法：

• AddShapes(IEnumerable<ShapeBase>)：批量添加图形元素
• ClearAll()：清空所有图形与连线
• BeginLinkMode() 和 EndLinkMode()：进入/退出连线模式
• RefreshView()：强制刷新视图

同时定义两个事件用于反向通信：

• StatusUpdated：通知当前操作状态（如"请选择目标节点"）
• QueryLinkColor：请求获取新连线的颜色，允许外部决定样式

在窗体中使用画布控件

在WinForm项目中引用该类库后，可通过代码动态添加控件：

var canvas = new FlowChartCanvas();
canvas.StatusUpdated += msg => statusLabel.Text = msg;
canvas.QueryLinkColor += () => GetNextLineColor();
canvas.Dock = DockStyle.Fill;
panelContainer.Controls.Add(canvas);

按钮事件可直接调用其公开方法：

private void btnAddRect_Click(object sender, EventArgs e)
{
    var rect = new RectangleNode { ... };
    canvas.AddShapes(new[] { rect });
}

private void btnStartLink_Click(object sender, EventArgs e)
{
    canvas.BeginLinkMode();
}

总结

通过将绘图逻辑封装为独立控件，实现了关注点分离和高内聚低耦合的设计原则。后续可在此基础上扩展更多图形类型、支持序列化、添加缩放平移等功能，构建完整的流程图编辑器框架。