Skip to content

triangle

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

triangle

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
assets/shaders
assets/shaders
 
 
CMakeLists.txt
CMakeLists.txt
 
 
README.md
README.md
 
 
triangle.cpp
triangle.cpp
 
 

README.md

🔺 Triangle Component

最小化的三角形渲染示例
状态：✅ 已实现（框架层）
学习难度：⭐ 入门级

📸 效果预览

    /\
   /  \
  /____\

一个彩色旋转的三角形，顶点颜色为红、绿、蓝，支持交互控制。

🎯 功能特性

核心功能

  • ✅ 绘制彩色三角形
  • ✅ 自动旋转动画（45度/秒）
  • ✅ 平滑的顶点颜色插值

交互功能

  • ✅ 空格键：暂停/继续旋转
  • ✅ 上/下箭头：放大/缩小三角形
  • ✅ R 键：重置状态

📚 技术要点

1. 顶点数据定义

float vertices[9] = {
     0.0f,  0.5f, 0.0f,  // 顶部
    -0.5f, -0.5f, 0.0f,  // 左下
     0.5f, -0.5f, 0.0f   // 右下
};

float colors[9] = {
    1.0f, 0.0f, 0.0f,  // 红色
    0.0f, 1.0f, 0.0f,  // 绿色
    0.0f, 0.0f, 1.0f   // 蓝色
};

2. 旋转变换

float angle = rotation * 3.14159f / 180.0f;
float cosA = std::cos(angle);
float sinA = std::sin(angle);

// 旋转矩阵应用
transformedVertices[i * 3 + 0] = x * cosA - y * sinA;
transformedVertices[i * 3 + 1] = x * sinA + y * cosA;

3. 渲染调用

renderer->drawTriangle(transformedVertices, colors);

🚀 构建和运行

前提条件

  • CMake 3.24+
  • C++20 编译器
  • Native 运行容器已构建

构建步骤

# 1. 进入组件目录
cd examples/cpp/triangle

# 2. 创建构建目录
mkdir build
cd build

# 3. 配置 CMake
cmake ..

# 4. 构建
cmake --build .

运行

# 使用 Native 容器运行
cd ../../../../native/build
./bitui_native.exe --component ../../examples/cpp/triangle/build/triangle.dll

🎓 学习目标

通过本示例你将学会

  1. 组件结构

    • IComponent 接口实现
    • 生命周期管理（Init → Update → Render → Destroy）
    • 组件导出宏使用

  2. 渲染基础

    • 顶点数据组织
    • 颜色数据定义
    • 基础图形绘制

  3. 输入处理

    • 键盘输入查询
    • 按键状态检测（按下/刚按下）
    • 交互式控制

  4. 数学变换

    • 2D 旋转矩阵
    • 缩放变换
    • 角度和弧度转换

📝 代码结构

class TriangleComponent : public BitHCI::IComponent {
private:
    // 运行时接口
    BitHCI::IRenderer* renderer;
    BitHCI::IInput* input;
    BitHCI::IWindow* window;
    
    // 组件状态
    float rotation;
    float scale;
    bool isPaused;
    
    // 几何数据
    float vertices[9];
    float colors[9];
    
public:
    void onInit(...) override;      // 初始化
    void onUpdate(float dt) override; // 更新
    void onRender() override;       // 渲染
    void onDestroy() override;      // 清理
};

🔧 自定义扩展

修改颜色

float colors[9] = {
    1.0f, 1.0f, 0.0f,  // 黄色
    0.0f, 1.0f, 1.0f,  // 青色
    1.0f, 0.0f, 1.0f   // 品红
};

修改旋转速度

rotation += deltaTime * 90.0f; // 90度/秒（更快）

添加脉冲效果

float pulse = 1.0f + 0.2f * std::sin(rotation * 0.1f);
scale = scale * pulse;

🐛 常见问题

Q: 编译时找不到 runtime_api.h？

A: 确保 include_directories 路径正确：

include_directories(${CMAKE_SOURCE_DIR}/../../../native/include)

Q: 运行时提示找不到符号？

A: 检查是否正确使用了 BITHCI_COMPONENT 宏。

Q: 三角形不旋转？

A: 确认 deltaTime 参数是否正确传递，检查 isPaused 状态。

🔗 相关资源

📊 性能指标

指标 数值
顶点数 3
三角形数 1
绘制调用 1
内存占用 < 1KB
CPU 占用 极低

作者：Bit Project 团队
创建日期：2025-10-11
组件版本：v0.0.1
难度等级：⭐ 入门级