概念
- ArcTo（端点弧）：SVG 风格，指定半径 + 轴旋转 + 大弧/扫描标志 + 终点。从当前点画弧到终点。
- AppendArc（中心弧）：指定圆心 + 半径 + 起始/终止角度。独立子路径。
- AppendPie / AppendChord：扇形/弓形快捷方式（第 27 章的路径版本）。
API 速查
| 函数 | 说明 |
|---|---|
int xgeShapeExArcTo(xge_shape_ex pShape, float fRX, float fRY, float fAxisDegrees, int bLargeArc, int bSweep, float fX, float fY) | SVG 端点弧 |
int xgeShapeExAppendArc(xge_shape_ex pShape, float fCX, float fCY, float fRX, float fRY, float fStartRadians, float fEndRadians) | 中心弧 |
int xgeShapeExAppendPie(xge_shape_ex pShape, float fCX, float fCY, float fRX, float fRY, float fStartRadians, float fEndRadians) | 扇形路径 |
int xgeShapeExAppendChord(xge_shape_ex pShape, float fCX, float fCY, float fRX, float fRY, float fStartRadians, float fEndRadians) | 弓形路径 |
编译本章示例
gcc -O2 -I. -o ch38.exe ch38_main.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch38.exe示例 1：ArcTo 端点弧
xge_shape_ex arc = NULL;
xgeShapeExCreate(&arc);
xgeShapeExMoveTo(arc, 100, 300);
// 半径 150×100，无轴旋转，大弧，顺时针，终点 (500,300)
xgeShapeExArcTo(arc, 150, 100, 0, 1, 1, 500, 300);
xgeShapeExStrokeColor(arc, 0x4FD8C2FF);
xgeShapeExStrokeWidth(arc, 3.0f);
xgeShapeExDraw(arc, 0.25f);示例 2：AppendArc 中心弧
xge_shape_ex ring = NULL;
xgeShapeExCreate(&ring);
// 270° 弧线（从 0 到 3π/2）
xgeShapeExAppendArc(ring, 400, 300, 120, 120,
0, 1.5f * 3.14159265f);
xgeShapeExStrokeColor(ring, 0xFFB454FF);
xgeShapeExStrokeWidth(ring, 8.0f);
xgeShapeExStrokeCap(ring, XGE_SHAPE_EX_CAP_ROUND);
xgeShapeExDraw(ring, 0.25f);示例 3：AppendPie 扇形路径
xge_shape_ex pie = NULL;
xgeShapeExCreate(&pie);
// 90° 扇形
xgeShapeExAppendPie(pie, 400, 300, 100, 100,
-3.14159265f/2, 0);
xgeShapeExFillColor(pie, 0xFF6B5E80);
xgeShapeExStrokeColor(pie, 0xFF6B5EFF);
xgeShapeExStrokeWidth(pie, 2.0f);
xgeShapeExDraw(pie, 0.25f);完整代码
将以下代码保存为 ch38_main.c，编译后运行即可看到端点弧、中心弧与扇形路径效果：
#include "xge.h"
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x081114FF);
// ArcTo 端点弧
xge_shape_ex arc = NULL;
xgeShapeExCreate(&arc);
xgeShapeExMoveTo(arc, 100, 200);
xgeShapeExArcTo(arc, 150, 100, 0, 1, 1, 500, 200);
xgeShapeExStrokeColor(arc, 0x4FD8C2FF);
xgeShapeExStrokeWidth(arc, 3.0f);
xgeShapeExDraw(arc, 0.25f);
xgeShapeExDestroy(arc);
// 270° 中心弧（圆环进度）
xge_shape_ex ring = NULL;
xgeShapeExCreate(&ring);
xgeShapeExAppendArc(ring, 250, 420, 100, 100, 0, 1.5f*3.14159265f);
xgeShapeExStrokeColor(ring, 0xFFB454FF);
xgeShapeExStrokeWidth(ring, 8.0f);
xgeShapeExStrokeCap(ring, XGE_SHAPE_EX_CAP_ROUND);
xgeShapeExDraw(ring, 0.25f);
xgeShapeExDestroy(ring);
// 90° 扇形
xge_shape_ex pie = NULL;
xgeShapeExCreate(&pie);
xgeShapeExAppendPie(pie, 580, 420, 90, 90, -3.14159265f/2, 0);
xgeShapeExFillColor(pie, 0xFF6B5E80);
xgeShapeExStrokeColor(pie, 0xFF6B5EFF);
xgeShapeExStrokeWidth(pie, 2.0f);
xgeShapeExDraw(pie, 0.25f);
xgeShapeExDestroy(pie);
return XGE_OK;
}
int main(void) {
xge_desc_t d = {0};
d.iWidth = 800;
d.iHeight = 600;
d.sTitle = "ch38 - Arc Path";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
xgeRun(onFrame, NULL);
xgeUnit();
return 0;
}代码讲解
- ArcTo：SVG 风格端点弧，指定半径+终点，bLargeArc/bSweep 控制弧的方向和大小。
- AppendArc：中心弧，指定圆心+半径+起始/终止角，适合进度环。
- AppendPie：扇形 = 弧 + 圆心连线闭合，可直接填充。
- StrokeCap：设置 ROUND 端帽使弧线端点圆润。
要点与陷阱
- ArcTo 参数：bLargeArc=1 取大弧（>180°），bSweep=1 顺时针。
- 半径不足：若半径太小无法连接两点，引擎自动放大半径。
- AppendArc 角度：起始/终止角为弧度，0 = 右方，顺时针增长。
- Pie vs Chord：Pie 包含圆心（闭合扇形），Chord 只含弦（不含圆心）。
- 椭圆弧：fRX ≠ fRY 时生成椭圆弧。fAxisDegrees 可旋转椭圆轴。
进阶练习
- 用 ArcTo 绘制一个圆角三角形的三个圆弧角。
- 实现一个圆弧进度条：AppendArc + StrokeCap(Round) + 动态角度。
- 对比 ArcTo 和 AppendArc 绘制相同弧线的参数差异。
