低帧率下非均匀像素绘制问题咨询（基于IMGUI与OpenGL）

问题背景 #

开发图像编辑程序时，使用ImGui+OpenGL实现的画笔工具在帧率极低时，仅绘制当前帧鼠标所在位置的单个像素，导致绘制线条出现断点（对比图如下）：

核心问题原因 #

当前实现仅在每一帧绘制鼠标当前位置的单个像素，当帧率过低时，鼠标移动的连续路径会因为帧间隔过大出现断点，导致线条不连续。

具体修复方案 #

1. 记录鼠标历史位置，补全路径像素

新增变量保存上一帧的鼠标位置，每次触发画笔绘制时，用直线插值算法（比如Bresenham算法）填充当前鼠标位置与上一位置之间的所有像素，确保路径连续。

2. 优化纹理更新性能

当前UpdateImage每次都用glTexImage2D更新整个纹理，这会导致大量不必要的性能开销，进一步拉低帧率。改用glTexSubImage2D仅更新被修改的区域，减少GPU负载。

修改后的代码示例 #

第一步：添加历史位置变量

在你的图像编辑类中新增成员变量：

int prevMouseX = -1;
int prevMouseY = -1;

第二步：实现直线填充算法

新增画线函数（以Bresenham算法为例，适合整数坐标的像素绘制）：

void drawLine(int x0, int y0, int x1, int y1) {
    int dx = abs(x1 - x0);
    int dy = abs(y1 - y0);
    int sx = (x0 < x1) ? 1 : -1;
    int sy = (y0 < y1) ? 1 : -1;
    int err = dx - dy;

    while (true) {
        // 绘制单个像素（复用原有画笔逻辑）
        int index = ((y0 - 1) * CurrentImage.width * CurrentImage.channels) + ((x0 - 1) * CurrentImage.channels);
        CurrentImage.data[index] = 0;
        CurrentImage.data[index + 1] = 0;
        CurrentImage.data[index + 2] = 0;
        if (CurrentImage.channels == 4) {
            CurrentImage.data[index + 3] = 255;
        }

        if (x0 == x1 && y0 == y1) break;
        int e2 = 2 * err;
        if (e2 > -dy) { 
            err -= dy; 
            x0 += sx; 
        }
        if (e2 < dx) { 
            err += dx; 
            y0 += sy; 
        }
    }
}

第三步：修改画笔工具函数

void toolPencil(int _MouseImagePositionX, int _MouseImagePositionY) {
    // 首次点击时，仅绘制初始点并记录位置
    if (prevMouseX == -1 || prevMouseY == -1) {
        prevMouseX = _MouseImagePositionX;
        prevMouseY = _MouseImagePositionY;
        // 绘制初始像素
        int index = ((_MouseImagePositionY - 1) * CurrentImage.width * CurrentImage.channels) + ((_MouseImagePositionX - 1) * CurrentImage.channels);
        CurrentImage.data[index] = 0;
        CurrentImage.data[index + 1] = 0;
        CurrentImage.data[index + 2] = 0;
        if (CurrentImage.channels == 4) {
            CurrentImage.data[index + 3] = 255;
        }
        return;
    }

    // 绘制上一位置到当前位置的完整连线
    drawLine(prevMouseX, prevMouseY, _MouseImagePositionX, _MouseImagePositionY);

    // 更新历史位置为当前位置
    prevMouseX = _MouseImagePositionX;
    prevMouseY = _MouseImagePositionY;
}

第四步：优化纹理更新函数

void UpdateImage(int x, int y, int updateWidth, int updateHeight) {
    glBindTexture(GL_TEXTURE_2D, this->CurrentImage->texture);
    GLenum format = (this->CurrentImage->channels == 4) ? GL_RGBA : GL_RGB;
    // 仅更新修改区域的纹理，减少GPU开销
    glTexSubImage2D(GL_TEXTURE_2D, 0, x, y, updateWidth, updateHeight, format, GL_UNSIGNED_BYTE, 
                    this->CurrentImage->data + (y * this->CurrentImage->width + x) * this->CurrentImage->channels);
}

注：调用UpdateImage时需要传入实际修改的区域范围（比如计算画线的 bounding box），如果暂时无法确定修改区域，也可以保留原glTexImage2D逻辑，但优先推荐局部更新以提升帧率。

额外注意事项 #

• 鼠标释放时，需重置prevMouseX和prevMouseY为-1，避免下次绘制时错误连接到上次的终点。
• 若需要支持不同粗细的画笔，可以在drawLine基础上扩展，比如围绕中心线绘制多个平行像素线。

内容的提问来源于stack exchange，提问作者Carlos López Martínez