如何在Microsoft Automatic Graph Layout中为边标签绘制框（C#）

嘿，刚好我之前在C#项目里用MSAGL的时候也遇到过这个需求，给你分享两个靠谱的实现方式，直接就能用！

方法一：用MSAGL内置属性快速加矩形框 #

这是最简单的方式，利用Label类自带的Shape、Fill和BorderPen属性就能搞定，不需要额外的自定义绘制。

代码示例： #

// 先假设你已经创建了Graph实例，以及对应的源节点和目标节点
var graph = new Graph("MyGraph");
var sourceNode = graph.AddNode("Source");
var targetNode = graph.AddNode("Target");

// 添加边并设置标签文本
var edge = graph.AddEdge(sourceNode, targetNode);
edge.LabelText = "示例边标签";

// 给标签添加矩形框
edge.Label.Shape = Shape.Rectangle;
edge.Label.Fill = new Fill(Brushes.White); // 设置背景色，避免和边线条重叠
edge.Label.BorderPen = new Pen(Brushes.Black, 1); // 边框颜色和宽度
edge.Label.Padding = new Padding(5, 2, 5, 2); // 调整文字和边框的内边距，让显示更美观
edge.Label.Visible = true; // 确保标签可见（默认是true，但保险起见可以手动设置）

关键属性说明： #

• Shape.Rectangle：指定标签的形状为矩形框
• Fill：设置框内的背景色，推荐用白色，防止标签文字和边的线条混在一起
• BorderPen：控制边框的颜色和粗细
• Padding：调整文字与边框之间的距离，避免文字紧贴边框

方法二：自定义绘制实现特殊样式（比如圆角框） #

如果你需要更个性化的框（比如圆角、渐变背景），可以通过GraphViewer的Draw事件来手动绘制标签框。

代码示例： #

首先，我们需要给Graphics扩展两个绘制圆角矩形的方法（因为System.Drawing没有内置这个功能）：

public static class GraphicsExtensions
{
    public static void FillRoundedRectangle(this Graphics g, Brush brush, RectangleF rect, float radius)
    {
        using (var path = new GraphicsPath())
        {
            // 依次添加四个圆角的弧段
            path.AddArc(rect.X, rect.Y, radius * 2, radius * 2, 180, 90);
            path.AddArc(rect.X + rect.Width - radius * 2, rect.Y, radius * 2, radius * 2, 270, 90);
            path.AddArc(rect.X + rect.Width - radius * 2, rect.Y + rect.Height - radius * 2, radius * 2, radius * 2, 0, 90);
            path.AddArc(rect.X, rect.Y + rect.Height - radius * 2, radius * 2, radius * 2, 90, 90);
            path.CloseAllFigures();
            g.FillPath(brush, path);
        }
    }

    public static void DrawRoundedRectangle(this Graphics g, Pen pen, RectangleF rect, float radius)
    {
        using (var path = new GraphicsPath())
        {
            path.AddArc(rect.X, rect.Y, radius * 2, radius * 2, 180, 90);
            path.AddArc(rect.X + rect.Width - radius * 2, rect.Y, radius * 2, radius * 2, 270, 90);
            path.AddArc(rect.X + rect.Width - radius * 2, rect.Y + rect.Height - radius * 2, radius * 2, radius * 2, 0, 90);
            path.AddArc(rect.X, rect.Y + rect.Height - radius * 2, radius * 2, radius * 2, 90, 90);
            path.CloseAllFigures();
            g.DrawPath(pen, path);
        }
    }
}

然后在GraphViewer的Draw事件中实现自定义绘制：

// 初始化GraphViewer并绑定Graph
var viewer = new GraphViewer();
viewer.Graph = graph;

// 绑定Draw事件，手动绘制标签框
viewer.Draw += (sender, e) =>
{
    foreach (var edge in graph.Edges)
    {
        if (edge.Label != null && !string.IsNullOrEmpty(edge.Label.Text))
        {
            // 获取标签的布局边界
            var labelBounds = edge.Label.BoundingBox;
            // 调整框的大小，给标签留一点额外的边距
            var boxRect = new RectangleF(
                labelBounds.Left - 3,
                labelBounds.Top - 2,
                labelBounds.Width + 6,
                labelBounds.Height + 4);

            // 绘制圆角背景框
            e.Graphics.FillRoundedRectangle(Brushes.LightBlue, boxRect, 5);
            // 绘制边框
            e.Graphics.DrawRoundedRectangle(Pens.DarkBlue, boxRect, 5);

            // 重新绘制标签文字（因为自定义绘制会覆盖默认的文字，所以需要手动画一遍）
            e.Graphics.DrawString(
                edge.Label.Text,
                edge.Label.Font,
                Brushes.Black,
                labelBounds.Left,
                labelBounds.Top);
        }
    }
};

注意事项： #

• 自定义绘制时，一定要先画框再画文字，不然文字会被框覆盖
• 如果使用WPF版本的MSAGL控件，逻辑类似，但需要用DrawingContext来绘制，而不是Graphics

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