API 速查
| 函数 | 说明 |
|---|---|
int xgeShapeExSceneEffectGaussianBlur(xge_shape_ex_scene pScene, float fSigma, int iDirection, int iBorder, int iQuality) | 高斯模糊 |
int xgeShapeExSceneEffectClear(xge_shape_ex_scene pScene) | 清除所有特效 |
int xgeShapeExSceneEffectGetCount(xge_shape_ex_scene pScene, int* pCount) | 特效数量 |
int xgeShapeExSceneEffectGetAt(xge_shape_ex_scene pScene, int iIndex, xge_shape_ex_scene_effect_t* pEffect) | 按索引查询特效 |
编译本章示例
gcc -O2 -I. -o ch70.exe ch70_main.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch70.exe参数说明
- fSigma：模糊半径（标准差），越大越模糊，典型值 2~20。
- iDirection：0=双向，1=仅水平，2=仅垂直。
- iBorder：边界处理，0=透明扩展，1=边缘像素重复。
- iQuality：品质等级，0=快速（低），1=平衡，2=高品质。
示例：毛玻璃背景
// 背景内容组
xge_shape_ex_scene bgScene = NULL;
xgeShapeExSceneCreate(&bgScene);
// ... 添加背景元素 ...
// 应用高斯模糊（sigma=8, 双向, 透明边界, 平衡品质）
xgeShapeExSceneEffectGaussianBlur(bgScene,
8.0f, // sigma
0, // 双向
0, // 透明边界
1); // 平衡品质
// 绘制模糊背景
xgeShapeExSceneDraw(bgScene, 0.25f);
// 在模糊背景上叠加半透明面板
xge_shape_ex panel = NULL;
xgeShapeExCreate(&panel);
xgeShapeExAppendRect(panel,
200,150, 400,300, 12,12, 1)
xgeShapeExFillColor(panel, 0xFFFFFF80);
xgeShapeExDraw(panel, 0.25f);
xgeShapeExDestroy(panel);
// 取消模糊
xgeShapeExSceneEffectClear(bgScene);完整代码
将以下代码保存为 ch70_main.c，编译后运行即可看到毛玻璃背景 + 渐进模糊动画效果：
#include "xge.h"
static xge_shape_ex_scene g_bg = NULL;
static float g_fSigma = 0.0f;
static int g_iGrow = 1;
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x081114FF);
// 动画 sigma：0 → 12 → 0
g_fSigma += g_iGrow ? 0.1f : -0.1f;
if (g_fSigma > 12.0f) g_iGrow = 0;
if (g_fSigma < 0.0f) g_iGrow = 1;
// 应用高斯模糊
xgeShapeExSceneEffectGaussianBlur(g_bg,
g_fSigma, 0, 0, 1);
xgeShapeExSceneDraw(g_bg, 0.25f);
// 叠加半透明面板
xge_shape_ex panel = NULL;
xgeShapeExCreate(&panel);
xgeShapeExAppendRect(panel,
200,180, 400,240, 12,12, 1)
xgeShapeExFillColor(panel, 0xFFFFFF40);
xgeShapeExDraw(panel, 0.25f);
xgeShapeExDestroy(panel);
return XGE_OK;
}
int main(void) {
xge_desc_t d = {0};
d.iWidth = 800;
d.iHeight = 600;
d.sTitle = "ch70 - Gaussian Blur";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
// 构建背景内容组
xgeShapeExSceneCreate(&g_bg);
for (int i = 0; i < 12; i++) {
xge_shape_ex s = NULL;
xgeShapeExCreate(&s);
xgeShapeExAppendCircle(s,
100+(i%4)*200, 120+(i/4)*180, 60, 1);
unsigned int cols[] = {
0xFF6B5EFF,0xFFB454FF,0x4FD8C2FF,0x7C6BFFFF};
xgeShapeExFillColor(s, cols[i%4]);
xgeShapeExSceneAdd(g_bg, s);
xgeShapeExDestroy(s);
}
xgeRun(onFrame, NULL);
xgeShapeExSceneEffectClear(g_bg);
xgeShapeExSceneDestroy(g_bg);
xgeUnit();
return 0;
}代码讲解
- 动画 sigma：每帧递增/递减模糊半径，实现“对焦”动画效果（0→12→0 循环）。
- GaussianBlur 参数：sigma=动态, direction=0(双向), border=0(透明扩展), quality=1(平衡)。
- 半透明面板：在模糊背景上叠加白色半透明圆角矩形，模拟毛玻璃弹窗效果。
- EffectClear：退出前清除特效，避免残留状态。
要点与陷阱
- 性能：高斯模糊触发离屏渲染 + 多 pass 卷积，sigma 越大越慢。
- 动画模糊：每帧修改 sigma 实现"对焦"动画，注意品质与帧率平衡。
- 方向分离：仅水平/垂直模糊可做运动模糊效果。
- EffectClear：清除所有已设置的特效（包括后续章节的投影、色调等）。
进阶练习
- 实现弹窗打开时背景渐进模糊（sigma 从 0 动画到 10）。
- 用方向模糊模拟速度线效果。
