line

➖ Line Component - 线段渲染组件

状态：✅ 已完成
难度：⭐
代码行数：~260 行

---

📋 组件概述

Line 是一个线段渲染组件，展示了各种线段绘制技术、动画效果和复杂图案设计。

核心功能

• ✅ 多种宽度：从细线到粗线，展示不同线宽
• ✅ 任意角度：八方向放射线段演示
• ✅ 丰富颜色：多种预设颜色和动态彩虹色
• ✅ 旋转动画：线段旋转和时钟效果
• ✅ 网格绘制：规则网格布局
• ✅ 波形曲线：正弦波动画
• ✅ 复杂图案：星形旋转图案

---

🎨 视觉效果

演示内容

效果类型	说明	特点
Widths	5种不同宽度	1~8 像素
Angles	8方向线段	45°间隔放射
Colors	5种颜色线段	红、绿、蓝、黄、品红
Rotating	旋转线段	中心旋转动画
Clock	时钟效果	时、分、秒三针
Grid	网格布局	7x7 规则网格
Wave	正弦波	彩虹色波形
Star	星形图案	5角星旋转

组件布局

┌──────────────────────────────────────────┐
│ Line Rendering Demo                      │
│ [Space] Pause   [R] Reset   [ESC] Quit   │
├──────────────────────────────────────────┤
│ Widths:   ─ ─ ━ ━ ━                      │
│ Angles:   ✱ 8方向放射                     │
│ Colors:   🔴 🟢 🔵 🟡 🟣                  │
│ Rotating: 🔄 旋转动画                     │
│ Clock:    🕐 时钟                         │
│ Grid:     ⊞ 网格                          │
│ Wave:     〰️ 波形                         │
│ Star:     ⭐ 星形                          │
│ Time: 12.5s                              │
└──────────────────────────────────────────┘

---

🎮 交互说明

键盘控制

按键	功能
Space	暂停/继续动画
R	重置时间和动画
ESC	退出程序

---

🔧 技术实现

核心代码结构

class LineComponent : public BitHCI::IComponent {
private:
    float time = 0.0f;           // 动画时间
    bool isPaused = false;       // 暂停状态
    
    // 辅助方法
    void drawLineHelper(float x1, float y1, float x2, float y2, 
                       float width, float color[4]);
    
public:
    void onInit(...)    // 初始化
    void onUpdate(...)  // 更新逻辑
    void onRender(...)  // 渲染线段
    void onDestroy(...) // 清理资源
};

关键渲染技术

1. 基础线段绘制

renderer->drawLine(x1, y1, x2, y2, color, width);

2. 放射线段（极坐标）

for (int i = 0; i < 8; i++) {
    float angle = i * M_PI / 4.0f;
    float x2 = centerX + length * std::cos(angle);
    float y2 = centerY + length * std::sin(angle);
    drawLineHelper(centerX, centerY, x2, y2, 2, color);
}

3. 旋转动画

float rotAngle = time * 2.0f;
float x1 = centerX + radius * std::cos(rotAngle);
float y1 = centerY + radius * std::sin(rotAngle);
float x2 = centerX - radius * std::cos(rotAngle);
float y2 = centerY - radius * std::sin(rotAngle);
drawLineHelper(x1, y1, x2, y2, 4, color);

4. 时钟效果

// 秒针
float secondAngle = time * 2.0f - M_PI / 2.0f;
float secX = clockX + (clockRadius - 5) * std::cos(secondAngle);
float secY = clockY + (clockRadius - 5) * std::sin(secondAngle);
drawLineHelper(clockX, clockY, secX, secY, 1, colorRed);

// 分针
float minuteAngle = time * 0.2f - M_PI / 2.0f;
// ...

// 时针
float hourAngle = time * 0.05f - M_PI / 2.0f;
// ...

5. 网格绘制

for (int i = 0; i < gridLines; i++) {
    float offset = i * 10.0f;
    // 垂直线
    drawLineHelper(x + offset, y, x + offset, y + size, 1, color);
    // 水平线
    drawLineHelper(x, y + offset, x + size, y + offset, 1, color);
}

6. 波形曲线

for (int i = 0; i < segments - 1; i++) {
    float t1 = i / (segments - 1.0f);
    float t2 = (i + 1) / (segments - 1.0f);
    
    float x1 = startX + t1 * width;
    float y1 = centerY + amplitude * std::sin(t1 * frequency + time);
    
    float x2 = startX + t2 * width;
    float y2 = centerY + amplitude * std::sin(t2 * frequency + time);
    
    drawLineHelper(x1, y1, x2, y2, 2, rainbowColor);
}

7. 星形图案

for (int i = 0; i < 5; i++) {
    // 外点
    float angle1 = i * 2.0f * M_PI / 5 - M_PI / 2 + time * 0.5f;
    float x1 = centerX + outerRadius * std::cos(angle1);
    float y1 = centerY + outerRadius * std::sin(angle1);
    
    // 内点
    float innerAngle = (i + 0.5f) * 2.0f * M_PI / 5 - M_PI / 2 + time * 0.5f;
    float innerX = centerX + innerRadius * std::cos(innerAngle);
    float innerY = centerY + innerRadius * std::sin(innerAngle);
    
    drawLineHelper(x1, y1, innerX, innerY, 2, color);
}

---

📚 学习要点

1. 线段绘制

• 使用 drawLine() API
• 线宽和颜色控制
• 端点坐标计算

2. 几何数学

• 极坐标变换: x = r * cos(θ), y = r * sin(θ)
• 向量旋转: 线段旋转动画
• 参数方程: 波形曲线生成

3. 动画技术

• 时间驱动的连续动画
• 相位控制（多针时钟）
• 循环波形效果

4. 图案设计

• 对称图案（放射、星形）
• 规则布局（网格）
• 曲线近似（分段线段）

---

🚀 构建与运行

1. 配置构建

cd examples/cpp/line
cmake -S . -B build -G "Visual Studio 17 2022" -A x64

2. 编译项目

cmake --build build --config Release

3. 复制 DLL

Copy-Item build\Release\line.dll -Destination ..\..\..\native\build\Release\

4. 运行组件

cd ..\..\..\native
.\build\Release\bitui_native.exe .\build\Release\line.dll

---

📁 文件结构

line/
├── line.cpp                # 主实现文件 (~260 行)
├── CMakeLists.txt          # 构建配置
├── README.md               # 本文档
└── assets/
    └── shaders/
        ├── triangle.vert   # 顶点着色器
        ├── triangle.frag   # 片段着色器
        └── spv/
            ├── triangle_vert.spv
            └── triangle_frag.spv

---

💡 扩展建议

简单扩展（⭐）

• 添加更多预设图案
• 调整动画速度和频率
• 修改线段颜色方案

中级扩展（⭐⭐）

• 实现贝塞尔曲线
• 添加鼠标绘制功能
• 线段相交检测和高亮

高级扩展（⭐⭐⭐）

• 实现粒子轨迹系统
• 物理模拟（弹簧、绳索）
• 矢量图形编辑器

---

🔗 相关资源

• API 文档: native/include/runtime_api.h
• 数学库: <cmath> 标准库
• 三角函数: sin, cos, atan2

---

📝 注意事项

1. ✅ 确保着色器已编译到 assets/shaders/spv/
2. ✅ 从 native/ 目录运行以正确加载着色器
3. ✅ 颜色数组必须是 float[4] (RGBA)
4. ✅ 线宽为 0 时不会绘制
5. ✅ 大量线段可能影响性能

文本渲染说明

本组件使用简单的位图字体系统：

• 支持数字 0-9
• 支持常用字母 A-Z（自动转大写）
• 支持特殊字符（. : - / [ ] ( ) ~ 等）
• 字符使用矩形组合绘制

---

📊 性能指标

• 帧率: ~240 FPS
• 绘制调用: ~70 次/帧
• 内存占用: <1 MB
• CPU 使用: <5%

---

🎓 适合人群

• ✅ 图形编程初学者 - 理解线段绘制基础
• ✅ 数学爱好者 - 实践几何和三角函数
• ✅ 动画设计师 - 学习动画和运动效果
• ✅ 游戏开发者 - 了解轨迹和路径渲染

---

🎯 核心知识点

极坐标系

x = centerX + radius * cos(angle)
y = centerY + radius * sin(angle)

直角坐标到极坐标

radius = sqrt(dx² + dy²)
angle = atan2(dy, dx)

参数方程（波形）

y = A * sin(ωt + φ)
其中: A=振幅, ω=角频率, φ=相位

---

Last Updated: 2025-10-12