API 速查
| 函数 | 说明 |
|---|---|
void xgeShapeCircleFill(float fX, float fY, float fRadius, uint32_t iColor) | 填充圆 |
void xgeShapeCircleFillPx(float fX, float fY, float fRadius, uint32_t iColor) | 填充圆（像素坐标） |
void xgeShapeCircleStroke(float fX, float fY, float fRadius, float fWidth, uint32_t iColor) | 描边圆 |
void xgeShapeCircleStrokePx(float fX, float fY, float fRadius, float fWidth, uint32_t iColor) | 描边圆（像素坐标） |
编译本章示例
gcc -O2 -I. -o ch23.exe ch23_main.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch23.exe示例 1：基本圆形
// 实心圆：中心 (400,300)，半径 80
xgeShapeCircleFill(400, 300, 80.0f, 0x4FD8C2FF);
// 空心圆环：半径 120，线宽 4
xgeShapeCircleStroke(400, 300, 120.0f, 4.0f, 0xFFB454FF);
// 同心圆靶心
for (int i = 5; i >= 1; i--) {
uint32_t c = (i % 2) ? 0xFF6B5EFF : 0xFFFFFFFF;
xgeShapeCircleFill(400, 300, i * 25.0f, c);
}示例 2：动态半径（呼吸动画）
double t = xgeTimer();
float r = 60.0f + 20.0f * (float)sin(t * 2.0);
xgeShapeCircleFill(400, 300, r, 0x6DB3F2FF);示例 3：圆形碰撞可视化
// 绘制所有碰撞体（调试用）
for (int i = 0; i < g_iEntityCount; i++) {
float x = g_tEntities[i].fX;
float y = g_tEntities[i].fY;
float r = g_tEntities[i].fRadius;
xgeShapeCircleStroke(x, y, r, 1.0f, 0x00FF0060);
}完整代码
将以下代码保存为 ch23_main.c，编译后运行即可看到圆形的填充与描边效果：
#include "xge.h"
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x081114FF);
// 填充圆形
xgeShapeCircleFill(200, 200, 80, 0x4FD8C2FF);
// 描边圆形
xgeShapeCircleFill(500, 200, 80, 3.0f, 0xFFB454FF);
// 多个大小递减的同心圆
for (int i = 5; i >= 1; i--) {
uint32_t c = (i % 2) ? 0xFF6B5E60 : 0x6DB3F260;
xgeShapeCircleFill(400, 430, i * 25.0f, c);
}
return XGE_OK;
}
int main(void) {
xge_desc_t d = {0};
d.iWidth = 800;
d.iHeight = 600;
d.sTitle = "ch23 - Circles";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
xgeRun(onFrame, NULL);
xgeUnit();
return 0;
}代码讲解
xgeShapeCircleFill(cx, cy, r, color)绘制实心圆，(cx,cy) 为圆心。xgeShapeCircleFill(cx, cy, r, width, color)绘制圆形描边。- 同心圆从大到小绘制，后绘制的覆盖先绘制的中心区域。
- 低 Alpha 颜色（
60= 约 37%）使重叠区域可见。
要点与陷阱
- 抗锯齿圆：XGE 使用 SDF 或 AA-Mesh 渲染圆形，边缘始终平滑，无需手动细分。
- 半径为 0：不绘制任何内容（不同于 Point）。
- 描边居中：线宽以圆周为中心，外半径 = fRadius + fWidth/2。
- 性能：单个圆形非常轻量。数千个圆形仍可在 60FPS 内完成。
进阶练习
- 实现弹球动画：圆形在窗口内反弹，碰壁变色。
- 绘制太阳系：多个不同半径的圆围绕中心旋转。
- 实现"涟漪"效果：点击处生成扩散圆环，逐渐变大并淡出。
