终端模拟器字形缩放异常求助：如何计算正确比例？

我用C++20开发了一款终端模拟器，目标是精确模拟DOS VGA文本模式（80x25字符布局），同时支持用户自定义窗口分辨率。测试环境为1280x720窗口，采用等宽位图字体ModernDOS8x16.ttf，渲染基于SDL2和自定义OpenGL 3.3实现。

现有代码基础 #

网格布局计算 #

这部分代码负责计算终端单元格尺寸，当前1280x720窗口下计算出的单元格为16x28.8像素，运行正常：

class Grid
{
    public:
        // ... 省略其他代码
        
    private:
        // 窗口总像素尺寸
        int m_envWidth, m_envHeight;

        // 单元格数量
        int m_numCellsX, m_numCellsY;

        // 单个单元格像素尺寸
        float m_cellWidth, m_cellHeight;
};

void Grid::initFromNumberOfCells(int numCellsX, int numCellsY)
{
    m_numCellsX = numCellsX;
    m_numCellsY = numCellsY;
    // 浮点精度计算单元格尺寸
    m_cellWidth  = static_cast<float>(m_envWidth)  / static_cast<float>(m_numCellsX);
    m_cellHeight = static_cast<float>(m_envHeight) / static_cast<float>(m_numCellsY);

    this->makeCellRectangles();
}

void Grid::makeCellRectangles()
{
    for (int y = 0; y < m_numCellsY; y++)
    {
        const float posY = static_cast<float>(y) * m_cellHeight;

        for (int x = 0; x < m_numCellsX; x++)
        {
            const float posX = static_cast<float>(x) * m_cellWidth;

            m_cellRects.push_back({ posX, posY, m_cellWidth, m_cellHeight });
        }
    }
}

帧缓冲区实现 #

帧缓冲区管理字符数据，运行正常：

// 帧缓冲区中的单个字符结构
struct alignas(4) Character
{
    // UTF-32编码点
    std::uint32_t codepoint{ 32U };
    // 前景/背景色索引
    std::uint16_t fg{ 15U }, bg{};
};

// 主帧缓冲区类
class Framebuffer
{
    public:
        // ... 省略其他代码
    
    private:
        // 模拟终端的行列尺寸，默认80x25（VGA文本模式标准）
        Size<int> m_terminalSize;

        // 字符数据数组
        std::vector<Character> m_framebuffer;
};

// 在指定位置写入单个字符
void Framebuffer::putCharacterAt(std::uint32_t codepoint, std::uint16_t fg, std::uint16_t bg, int x, int y)
{
    // 计算对应光标位置的索引
    auto index = static_cast<std::size_t>((m_terminalSize.width * y) + x);

    // 写入字符数据
    m_framebuffer[index] = Character{ .codepoint = codepoint, .fg = fg, .bg = bg };
}

问题描述 #

字符渲染部分存在异常：希望每个字符在单元格内居中且比例正确，但当前采用单个字形与单元格宽高比的最大值进行缩放，导致部分窄字符（如'i'、';'）显示异常（过度拉伸或位置偏移）。原有渲染代码如下：

void Framebuffer::renderSingleCharAtCell(const BitmapFont& font, Character character,
                                         const Texture2D& textureSprites,
                                         const Rect<float>& cellSize, const ColorPalette<16>& palette,
                                         PrimitiveProcessor<Quad>& processor,
                                         VertexBatch& batchText, VertexBatch& batchSprites) const
{
    // 未找到字形时替换为问号
    if (!hasGlyph(font, character.codepoint))
        character.codepoint = 63U;

    // 获取字形数据
    const auto& glyph = getGlyphData(font, character.codepoint);

    // 简化变量名
    const auto& glyphSize = glyph.uvCoords;

    // 计算字形与单元格的尺寸比例
    const Vec2 glyphRatio
    {
        glyphSize.width  / cellSize.width,
        glyphSize.height / cellSize.height
    };

    // 取最大比例作为缩放因子
    float picked = std::max(glyphRatio.x, glyphRatio.y);

    // 计算字形渲染区域
    Rect<float> glyphRect
    {
        cellSize.x,
        cellSize.y + cellSize.height - (static_cast<float>(glyph.bearingY) / picked),
        glyphSize.width  / picked,
        glyphSize.height / picked
    };

    // 获取字体纹理
    auto& fontTexture = *font.getTexturePtr();

    // 获取颜色索引
    auto fgColorIndex = static_cast<std::size_t>(character.fg);
    auto bgColorIndex = static_cast<std::size_t>(character.bg);

    // 渲染单元格背景
    processor.addPrimitive(batchSprites, { cellSize, opengl::calcNormalizedUV(textureSprites, WHITE_BOX_RECT), palette.getColorAt(bgColorIndex) });

    // 渲染字形
    processor.addPrimitive(batchText, { glyphRect, opengl::calcNormalizedUV(fontTexture, glyph.uvCoords), palette.getColorAt(fgColorIndex) });
}

解决方案 #

问题核心：等宽字体的每个字符逻辑宽度一致（ModernDOS8x16的原始尺寸为8x16像素），但单个字形的视觉宽度不同。应该基于字体的统一原始尺寸计算缩放因子，而非单个字形的尺寸，同时修正水平居中逻辑：

修正后的渲染代码 #

void Framebuffer::renderSingleCharAtCell(const BitmapFont& font, Character character,
                                         const Texture2D& textureSprites,
                                         const Rect<float>& cellSize, const ColorPalette<16>& palette,
                                         PrimitiveProcessor<Quad>& processor,
                                         VertexBatch& batchText, VertexBatch& batchSprites) const
{
    // 未找到字形时替换为问号
    if (!hasGlyph(font, character.codepoint))
        character.codepoint = 63U;

    // 获取字形数据
    const auto& glyph = getGlyphData(font, character.codepoint);

    // 等宽字体的原始统一尺寸（ModernDOS8x16为8x16）
    const float fontOrigWidth = 8.0f;
    const float fontOrigHeight = 16.0f;

    // 计算缩放因子：取单元格与原始字体尺寸比例中的较小值，保证字体完整放入单元格
    const float scaleX = cellSize.width / fontOrigWidth;
    const float scaleY = cellSize.height / fontOrigHeight;
    const float scale = std::min(scaleX, scaleY);

    // 计算缩放后的字形尺寸
    const float scaledGlyphWidth = glyph.uvCoords.width * scale;
    const float scaledGlyphHeight = glyph.uvCoords.height * scale;

    // 计算水平偏移：实现字形在单元格内水平居中
    const float offsetX = cellSize.x + (cellSize.width - (fontOrigWidth * scale)) / 2;
    // 计算垂直偏移：保持字形基线对齐（bearingY是字形基线到顶部的距离）
    const float offsetY = cellSize.y + cellSize.height - (glyph.bearingY * scale);

    // 构建字形渲染区域
    Rect<float> glyphRect
    {
        offsetX,
        offsetY,
        scaledGlyphWidth,
        scaledGlyphHeight
    };

    // 获取字体纹理
    auto& fontTexture = *font.getTexturePtr();

    // 获取颜色索引
    auto fgColorIndex = static_cast<std::size_t>(character.fg);
    auto bgColorIndex = static_cast<std::size_t>(character.bg);

    // 渲染单元格背景
    processor.addPrimitive(batchSprites, { cellSize, opengl::calcNormalizedUV(textureSprites, WHITE_BOX_RECT), palette.getColorAt(bgColorIndex) });

    // 渲染字形
    processor.addPrimitive(batchText, { glyphRect, opengl::calcNormalizedUV(fontTexture, glyph.uvCoords), palette.getColorAt(fgColorIndex) });
}

关键修正点 #

1. 统一缩放因子：基于等宽字体的原始尺寸（8x16）计算缩放比例，确保所有字符的缩放比例一致，避免窄字符被过度拉伸。
2. 水平居中逻辑：用单元格宽度减去缩放后的字体总宽度（而非单个字形宽度），再取一半作为偏移，保证所有字符在单元格内水平居中。
3. 基线对齐修正：保持bearingY乘以缩放因子的垂直偏移逻辑，确保字符基线统一对齐，避免上下偏移。

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