Skip to content

README.md

Latest commit

 

History

History
243 lines (182 loc) · 5.79 KB

README.md

File metadata and controls

243 lines (182 loc) · 5.79 KB

⭕ Circle Component - 圆形渲染组件

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

📋 组件概述

Circle 是一个基础图形渲染组件，全面展示了圆形绘制、动画效果和图案设计。

核心功能

  • ✅ 多种尺寸：从小圆点到大圆，展示不同半径
  • ✅ 丰富颜色：多种预设颜色和动态颜色变化
  • ✅ 动画效果：脉冲、透明度、彩虹色变化
  • ✅ 圆周运动：轨道上的行星式运动
  • ✅ 同心圆：多层嵌套圆形结构
  • ✅ 波纹效果：扩散式动画波纹
  • ✅ 图案设计：花瓣形组合图案

🎨 视觉效果

演示内容

效果类型 说明 参数
Sizes 5个不同大小的圆 半径: 5~25
Colors 5种不同颜色的圆 红、绿、蓝、黄、品红
Animated 3个动画圆 脉冲、淡入淡出、彩虹
Orbit 行星轨道运动 6个卫星绕中心旋转
Concentric 同心圆 5层嵌套，渐变蓝色
Ripple 波纹扩散 3个同心波纹循环
Pattern 花瓣图案 8瓣旋转花朵

组件布局

┌─────────────────────────────────────────┐
│ Circle Rendering Demo                   │
│ [Space] Pause   [R] Reset   [ESC] Quit  │
├─────────────────────────────────────────┤
│ Sizes:   ○ ○ ○ ○ ○                      │
│ Colors:  🔴 🟢 🔵 🟡 🟣                  │
│ Animated: 💛 💙 🌈                       │
│ Orbit:   ⭕ 卫星轨道                      │
│ Concentric: 🎯 同心圆                    │
│ Ripple:  〰️ 波纹扩散                      │
│ Pattern: 🌸 花瓣图案                      │
└─────────────────────────────────────────┘

🎮 交互说明

键盘控制

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

🔧 技术实现

核心代码结构

class CircleComponent : public BitHCI::IComponent {
private:
    float time = 0.0f;           // 动画时间
    bool isPaused = false;       // 暂停状态
    
public:
    void onInit(...)    // 初始化
    void onUpdate(...)  // 更新逻辑
    void onRender(...)  // 渲染圆形
    void onDestroy(...) // 清理资源
};

关键渲染技术

1. 基础圆形绘制

renderer->drawCircle(x, y, radius, color);

2. 脉冲动画

float pulseRadius = 15.0f + 5.0f * std::sin(time * 3.0f);
renderer->drawCircle(x, y, pulseRadius, color);

3. 圆周运动

float angle = time + i * M_PI / 3.0f;
float x = centerX + radius * std::cos(angle);
float y = centerY + radius * std::sin(angle);
renderer->drawCircle(x, y, size, color);

4. 波纹效果

float rippleRadius = fmod(time * 40.0f + i * 20.0f, 60.0f);
float alpha = 1.0f - (rippleRadius / 60.0f);
float rippleColor[4] = {r, g, b, alpha};
renderer->drawCircle(x, y, rippleRadius, rippleColor);

📚 学习要点

1. 图形绘制

  • 使用 drawCircle() API
  • 颜色和透明度控制
  • 多层圆形叠加

2. 动画技术

  • 正弦波动画（脉冲、淡入淡出）
  • 时间驱动的运动
  • 相位偏移实现序列动画

3. 数学应用

  • 三角函数（圆周运动）
  • 模运算（波纹循环）
  • 极坐标变换

4. 视觉设计

  • 同心圆结构
  • 对称图案设计
  • 颜色渐变和透明度

🚀 构建与运行

1. 配置构建

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

2. 编译项目

cmake --build build --config Release

3. 复制 DLL

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

4. 运行组件

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

📁 文件结构

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

💡 扩展建议

简单扩展（⭐）

  • 添加更多预设颜色
  • 调整动画速度参数
  • 增加圆形数量

中级扩展（⭐⭐）

  • 实现椭圆绘制（拉伸圆形）
  • 添加鼠标交互（点击生成圆）
  • 弹性碰撞模拟

高级扩展（⭐⭐⭐）

  • 实现圆形粒子系统
  • 添加物理引擎（重力、碰撞）
  • 流体模拟效果

🔗 相关资源

  • API 文档: native/include/runtime_api.h
  • 示例教程: docs/guides/
  • 三角函数: 标准数学库 <cmath>

📝 注意事项

  1. ✅ 确保着色器已编译到 assets/shaders/spv/
  2. ✅ 从 native/ 目录运行以正确加载着色器
  3. ✅ 颜色数组必须是 float[4] (RGBA)
  4. ✅ 半径值影响性能，避免过大的圆
  5. ✅ 透明度叠加可能影响渲染顺序

📊 性能指标

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

🎓 适合人群

  • ✅ 图形编程初学者 - 理解基础图形绘制
  • ✅ 动画爱好者 - 学习动画和过渡效果
  • ✅ 数学应用者 - 实践三角函数和极坐标
  • ✅ UI 设计师 - 了解圆形在界面中的应用

Last Updated: 2025-10-12