如何在OpenGL中绘制带圆角的矩形？

嘿，我来帮你搞定OpenGL里的圆角矩形！你当前的代码是绘制普通直角矩形，要实现类似CSS的圆角效果，核心思路是用多个短线段近似四个1/4圆弧，再把圆弧和矩形的直边部分拼接起来。下面是具体的实现步骤和代码：

核心思路 #

圆角矩形由两部分组成：

• 上下左右四条直边
• 四个角落的1/4圆弧（每个圆弧对应90度的扇形，用大量小线段模拟平滑曲线）

我们通过循环生成圆弧上的顶点，再按顺序连接直边和圆弧的顶点，最终用GL_POLYGON绘制闭合图形即可。

修改后的绘制回调函数 #

#include <cmath> // 记得包含数学库，否则三角函数和M_PI会报错

// 如果你的环境没定义M_PI，手动添加这行
#define M_PI 3.14159265358979323846

void display() {
    glClear(GL_COLOR_BUFFER_BIT);
    glColor3f(1.0, 1.0, 1.0); // 设置绘制颜色为白色

    int x = 50;      // 矩形左上角x坐标
    int y = 50;      // 矩形左上角y坐标
    int width = 100; // 矩形宽度
    int height = 50; // 矩形高度
    int radius = 10; // 圆角半径（对应CSS的border-radius）
    int segments = 16; // 每个圆弧的分段数，数值越大圆弧越平滑

    glBegin(GL_POLYGON);
    // 顶部直边：从左上角圆弧结束点到右上角圆弧开始点
    glVertex2d(x + radius, y);
    glVertex2d(x + width - radius, y);

    // 右上角圆弧（0到90度）
    for (int i = 0; i <= segments; i++) {
        double angle = M_PI / 2 * i / segments;
        double dx = radius * cos(angle);
        double dy = radius * sin(angle);
        glVertex2d(x + width - radius + dx, y + radius - dy);
    }

    // 右侧直边：从右上角圆弧结束点到右下角圆弧开始点
    glVertex2d(x + width, y + height - radius);
    glVertex2d(x + width, y + radius);

    // 右下角圆弧（90到180度）
    for (int i = 0; i <= segments; i++) {
        double angle = M_PI / 2 * i / segments;
        double dx = radius * cos(M_PI - angle);
        double dy = radius * sin(M_PI - angle);
        glVertex2d(x + width - radius + dx, y + height - radius + dy);
    }

    // 底部直边：从右下角圆弧结束点到左下角圆弧开始点
    glVertex2d(x + width - radius, y + height);
    glVertex2d(x + radius, y + height);

    // 左下角圆弧（180到270度）
    for (int i = 0; i <= segments; i++) {
        double angle = M_PI / 2 * i / segments;
        double dx = radius * cos(M_PI + angle);
        double dy = radius * sin(M_PI + angle);
        glVertex2d(x + radius + dx, y + height - radius + dy);
    }

    // 左侧直边：从左下角圆弧结束点到左上角圆弧开始点
    glVertex2d(x, y + height - radius);
    glVertex2d(x, y + radius);

    // 左上角圆弧（270到360度）
    for (int i = 0; i <= segments; i++) {
        double angle = M_PI / 2 * i / segments;
        double dx = radius * cos(2*M_PI - angle);
        double dy = radius * sin(2*M_PI - angle);
        glVertex2d(x + radius + dx, y + radius - dy);
    }
    glEnd();

    glFlush();
}

关键细节解释 #

1. 参数调整：
   • radius：直接控制圆角大小，和CSS的border-radius逻辑完全一致，注意不要超过矩形宽/高的一半，否则图形会变形
   • segments：每个圆弧的分段数，16-32是平衡平滑度和性能的理想数值，数值越大圆弧越细腻
2. 圆弧生成逻辑：
   • 每个角落的圆弧对应90度（π/2弧度）的范围，通过三角函数计算每个分段点相对于圆弧圆心的偏移量
   • 四个圆弧的圆心分别是矩形角落向内偏移radius的点（比如右上角圆心是(x+width-radius, y+radius)）
3. 顶点顺序：
   • 全程按顺时针顺序添加顶点，确保GL_POLYGON能正确识别闭合区域，避免图形出现空洞或扭曲

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