技术咨询：运行时用光标移动选中字符串及图像编辑器绘图相关问题

嘿，我刚好做过类似的图像编辑器功能，给你分享下我踩过坑后总结的解决方案：

要实现这些交互，核心是给每个绘制的文本维护独立的状态信息，并通过鼠标事件来更新这些状态，最后重绘控件。

步骤1：定义文本元素类 #

首先创建一个类来存储每个文本的关键属性，这样我们能跟踪每个文本的位置、大小、选中状态等：

public class TextElement
{
    public string Content { get; set; }
    public Font TextFont { get; set; }
    public Color TextColor { get; set; }
    public RectangleF Bounds { get; set; } // 文本的边界矩形，用于判断选中和调整大小
    public bool IsSelected { get; set; }
}

步骤2：绘制文本及选中状态 #

在控件的OnPaint方法中，遍历所有文本元素绘制，选中的文本要额外绘制边框和调整控制点：

private List<TextElement> _textElements = new List<TextElement>();

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    // 先绘制其他图形元素（如果有的话），最后绘制文本
    foreach (var textElem in _textElements)
    {
        // 绘制文本
        e.Graphics.DrawString(textElem.Content, textElem.TextFont, 
                              new SolidBrush(textElem.TextColor), textElem.Bounds.Location);
        
        // 如果是选中状态，绘制边框和控制点
        if (textElem.IsSelected)
        {
            e.Graphics.DrawRectangle(Pens.DodgerBlue, Rectangle.Round(textElem.Bounds));
            // 绘制8个调整控制点（四个角+四条边中点）
            var controlPoints = GetControlPoints(textElem.Bounds);
            foreach (var point in controlPoints)
            {
                e.Graphics.FillEllipse(Brushes.White, point.X - 3, point.Y - 3, 6, 6);
                e.Graphics.DrawEllipse(Pens.DodgerBlue, point.X - 3, point.Y - 3, 6, 6);
            }
        }
    }
}

// 生成文本边界的8个控制点
private List<PointF> GetControlPoints(RectangleF bounds)
{
    return new List<PointF>
    {
        new(bounds.Left, bounds.Top), new(bounds.Right, bounds.Top),
        new(bounds.Right, bounds.Bottom), new(bounds.Left, bounds.Bottom),
        new(bounds.Left + bounds.Width/2, bounds.Top), new(bounds.Right, bounds.Top + bounds.Height/2),
        new(bounds.Left + bounds.Width/2, bounds.Bottom), new(bounds.Left, bounds.Top + bounds.Height/2)
    };
}

步骤3：处理鼠标交互 #

通过鼠标的按下、移动、抬起事件来实现选中、移动和调整大小：

private TextElement _selectedText;
private PointF _lastMousePos;
private int _resizeHandleIndex = -1; // 标记当前拖动的是哪个控制点

protected override void OnMouseDown(MouseEventArgs e)
{
    base.OnMouseDown(e);
    _lastMousePos = e.Location;
    
    // 从后往前遍历，优先选中最上层的文本
    for (int i = _textElements.Count - 1; i >= 0; i--)
    {
        var elem = _textElements[i];
        if (elem.Bounds.Contains(e.Location))
        {
            // 检查是否点击了控制点
            var controlPoints = GetControlPoints(elem.Bounds);
            for (int j = 0; j < controlPoints.Count; j++)
            {
                if (new RectangleF(controlPoints[j].X - 3, controlPoints[j].Y - 3, 6, 6).Contains(e.Location))
                {
                    _resizeHandleIndex = j;
                    SelectTextElement(elem);
                    return;
                }
            }
            // 点击文本区域，准备移动
            _resizeHandleIndex = -1;
            SelectTextElement(elem);
            return;
        }
    }
    
    // 未点击任何文本，取消所有选中
    DeselectAllText();
}

// 选中指定文本，并移到列表最后（保证绘制在最上层，关联问题2）
private void SelectTextElement(TextElement elem)
{
    DeselectAllText();
    elem.IsSelected = true;
    _selectedText = elem;
    // 移到列表末尾，后续绘制时会最后渲染，自然在最上层
    _textElements.Remove(elem);
    _textElements.Add(elem);
    Invalidate();
}

private void DeselectAllText()
{
    foreach (var elem in _textElements) elem.IsSelected = false;
    _selectedText = null;
    Invalidate();
}

protected override void OnMouseMove(MouseEventArgs e)
{
    base.OnMouseMove(e);
    if (_selectedText == null) return;

    float dx = e.Location.X - _lastMousePos.X;
    float dy = e.Location.Y - _lastMousePos.Y;

    if (_resizeHandleIndex == -1)
    {
        // 移动文本：更新边界矩形的位置
        _selectedText.Bounds = new RectangleF(
            _selectedText.Bounds.X + dx,
            _selectedText.Bounds.Y + dy,
            _selectedText.Bounds.Width,
            _selectedText.Bounds.Height);
    }
    else
    {
        // 调整大小：根据不同控制点更新边界
        var newBounds = _selectedText.Bounds;
        switch (_resizeHandleIndex)
        {
            case 0: // 左上角：左移+上移，缩小宽高
                newBounds.X += dx; newBounds.Y += dy;
                newBounds.Width -= dx; newBounds.Height -= dy;
                break;
            case 1: // 右上角：上移，增大宽度+缩小高度
                newBounds.Y += dy;
                newBounds.Width += dx; newBounds.Height -= dy;
                break;
            case 2: // 右下角：增大宽高
                newBounds.Width += dx; newBounds.Height += dy;
                break;
            case 3: // 左下角：左移，缩小宽度+增大高度
                newBounds.X += dx;
                newBounds.Width -= dx; newBounds.Height += dy;
                break;
            case 4: // 上中：上移，缩小高度
                newBounds.Y += dy; newBounds.Height -= dy;
                break;
            case 5: // 右中：增大宽度
                newBounds.Width += dx;
                break;
            case 6: // 下中：增大高度
                newBounds.Height += dy;
                break;
            case 7: // 左中：左移，缩小宽度
                newBounds.X += dx; newBounds.Width -= dx;
                break;
        }
        // 防止宽高过小
        if (newBounds.Width > 10 && newBounds.Height > 10)
        {
            _selectedText.Bounds = newBounds;
            // 如果要保持字体比例，可以在这里计算新的字体大小
            // float scale = Math.Min(newBounds.Width / originalWidth, newBounds.Height / originalHeight);
            // _selectedText.TextFont = new Font(_selectedText.TextFont.FontFamily, _selectedText.TextFont.Size * scale);
        }
    }

    _lastMousePos = e.Location;
    Invalidate();
}

protected override void OnMouseUp(MouseEventArgs e)
{
    base.OnMouseUp(e);
    _resizeHandleIndex = -1;
}

这个问题的本质是绘制顺序：Graphics的渲染是按代码执行顺序叠加的，后绘制的内容会覆盖先绘制的内容。

我的解决方案是：

1. 维护一个List<TextElement>来管理所有文本，当选中某个文本时，把它移到列表的最后一位，这样每次重绘时它会被最后绘制，自然覆盖在其他元素上方。
2. 如果你的编辑器还有其他图形元素（比如形状、图片），要确保文本的绘制代码放在所有其他元素绘制之后，比如在OnPaint中先画背景、形状、图片，最后遍历绘制文本。

另外，如果是在WinForms的容器控件（比如Panel）中，要确保没有其他子控件遮挡文本，或者把文本绘制在最顶层的自定义控件中。

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