一、概述

上一节我们实现了矩形到矩形的连线，但仅有矩形显得单调且功能有限。本节将添加圆形形状，并支持圆形与圆形、圆形与矩形以及矩形与矩形之间的连线。在这个过程中，我们会遇到一些新的问题，这些问题将在后续课程中逐步优化。

二、最终效果预览

本节将依次实现两个目标：

• 绘制不同颜色、可拖动的圆形
• 连线支持圆形与圆形、圆形与矩形、矩形与矩形之间的任意组合

三、实现目标一：添加可拖动的彩色圆形

与矩形类似，圆形在 GDI+ 中绘制时依赖于 Rectangle 结构，我们只需调整绘制方式即可。

1. 圆形类定义

public class CircleShape
{
    public string Id { get; set; }
    public Rectangle Bounds { get; set; }
}

2. 图形集合与绘制

维护一个圆形列表，并在绘图时依次渲染每个圆形：

List<CircleShape> circles = new List<CircleShape>();

void DrawCircle(Graphics g, CircleShape circle)
{
    int idx = circles.FindIndex(c => c.Id == circle.Id);
    Brush br = GetColorBrush(idx);
    g.FillEllipse(br, circle.Bounds);
    g.DrawString(circle.Id, Font, Brushes.White, circle.Bounds.X + 20, circle.Bounds.Y + 20);
}

3. 鼠标事件处理

鼠标按下时需要区分点击的是矩形还是圆形，并记录对应的形状对象。移动时根据类型分别更新位置。

private void panel1_MouseDown(object sender, MouseEventArgs e)
{
    var rect = rects.FindLast(r => r.Bounds.Contains(e.Location));
    var circle = circles.FindLast(c => c.Bounds.Contains(e.Location));
    
    if (rect != null)
    {
        isDragging = true;
        isRectSelected = true;
        selectedRect = rect;
        selectedCircle = null;
        lastMousePos = e.Location;
    }
    else if (circle != null)
    {
        isDragging = true;
        isRectSelected = false;
        selectedCircle = circle;
        selectedRect = null;
        lastMousePos = e.Location;
    }
}

private void panel1_MouseMove(object sender, MouseEventArgs e)
{
    if (!isDragging) return;
    int dx = e.X - lastMousePos.X;
    int dy = e.Y - lastMousePos.Y;
    
    if (isRectSelected)
        selectedRect.Bounds = new Rectangle(
            new Point(selectedRect.Bounds.X + dx, selectedRect.Bounds.Y + dy),
            selectedRect.Bounds.Size);
    else
        selectedCircle.Bounds = new Rectangle(
            new Point(selectedCircle.Bounds.X + dx, selectedCircle.Bounds.Y + dy),
            selectedCircle.Bounds.Size);
    
    lastMousePos.Offset(dx, dy);
    RefreshCanvas();
}

4. 添加圆形按钮

private void btnAddCircle_Click(object sender, EventArgs e)
{
    circles.Add(new CircleShape
    {
        Id = $"圆形{circles.Count + 1}",
        Bounds = new Rectangle(50, 50, 100, 100)
    });
    RefreshCanvas();
}

完整代码请参考项目源码。至此，支持拖动的多色圆形已实现。

四、实现目标二：任意图形间连线

1. 连线定义扩展

为支持矩形和圆形混合连线，在线段类中添加两个布尔标志：

public class ConnectorLine
{
    public string Id { get; set; }
    public bool StartIsRect { get; set; }
    public bool EndIsRect { get; set; }
    public string StartId { get; set; }
    public string EndId { get; set; }
}

2. 中心点计算

根据形状类型分别从对应集合中查找中心点：

Point GetCenterForRect(string id)
{
    var shape = rects.Find(r => r.Id == id);
    return shape == null ? Point.Empty :
        new Point(shape.Bounds.X + shape.Bounds.Width / 2, shape.Bounds.Y + shape.Bounds.Height / 2);
}

Point GetCenterForCircle(string id)
{
    var shape = circles.Find(c => c.Id == id);
    return shape == null ? Point.Empty :
        new Point(shape.Bounds.X + shape.Bounds.Width / 2, shape.Bounds.Y + shape.Bounds.Height / 2);
}

3. 绘制连线

void DrawConnector(Graphics g, ConnectorLine line)
{
    Point start = line.StartIsRect ? GetCenterForRect(line.StartId) : GetCenterForCircle(line.StartId);
    Point end = line.EndIsRect ? GetCenterForRect(line.EndId) : GetCenterForCircle(line.EndId);
    int idx = lines.FindIndex(l => l.Id == line.Id);
    using (Pen pen = new Pen(GetColorBrush(idx), 2))
    {
        g.DrawLine(pen, start, end);
    }
}

4. 连线交互逻辑

在鼠标按下事件中，当处于连线模式时，记录第一个选中的形状及其类型，然后等待点击第二个形状完成连线。同时需防止两个端点相同。

// 连线模式下的点击逻辑
if (isLinking)
{
    if (firstSelected == null)
    {
        // 记录第一个形状
    }
    else
    {
        // 检查是否与第一个相同，不同则创建连线
        ConnectorLine newLine = new ConnectorLine
        {
            Id = $"连线{lines.Count + 1}",
            StartIsRect = isFirstRect,
            EndIsRect = isSecondRect,
            StartId = firstSelected.Id,
            EndId = secondSelected.Id
        };
        lines.Add(newLine);
        isLinking = false;
        RefreshCanvas();
    }
}

完整实现代码较长，请参考随课Demo源码（FormDemo03V2）。

五、小结

本节我们成功为流程图编辑器添加了圆形图形，并实现了矩形与圆形之间的任意连线。虽然功能得以扩展，但代码开始变得复杂且冗余，这为后续引入抽象和优化提供了明确的动机。下一节将重点解决绘图质量优化以及拖动时的闪烁问题。