Skip to content

switch

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

switch

Folders and files

NameName
Last commit message
Last commit date

parent directory

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

README.md

Switch Component - 开关组件

组件类型: UI 控件示例
版本: v0.0.1
作者: Bit HCI Team

📋 概述

Switch 是一个可交互的开关组件,展示了如何实现具有状态管理、鼠标交互和平滑动画的 UI 控件。

特性

  • ✅ 鼠标交互: 点击切换开关状态
  • ✅ 键盘控制: 空格键切换,ESC 退出
  • ✅ 平滑动画: 旋钮位置平滑过渡
  • ✅ 状态反馈: 颜色和文本显示当前状态
  • ✅ 圆角设计: 使用圆形和矩形组合实现圆角效果

📦 文件结构

switch/
├── switch.cpp                     # 组件实现
├── CMakeLists.txt                 # 构建配置
├── README.md                      # 本文档
└── assets/                        # 组件资源
    └── shaders/                   # 着色器源码
        ├── triangle.vert          # 顶点着色器（GLSL）
        ├── triangle.frag          # 片段着色器（GLSL）
        ├── compile_shaders.bat    # 着色器编译脚本
        └── spv/                   # 编译后的SPIR-V
            ├── triangle_vert.spv
            └── triangle_frag.spv

着色器说明:

  • Switch 组件有自己的独立着色器
  • 使用与 Triangle 相同的基础渲染管线（顶点位置 + 顶点颜色）
  • Native 运行时自动根据组件名称从 assets/shaders/spv/ 加载
  • 圆形和矩形都是由三角形组成，使用相同的着色器渲染

🎨 视觉设计

   OFF 状态                    ON 状态
┌──────────────┐          ┌──────────────┐
│  ⚪          │          │          ⚪  │
│              │   →      │              │
└──────────────┘          └──────────────┘
    灰色                      绿色

颜色方案

  • 关闭状态: 灰色背景 (RGB: 0.3, 0.3, 0.3)
  • 打开状态: 绿色背景 (RGB: 0.2, 0.8, 0.3)
  • 旋钮: 白色 (RGB: 0.95, 0.95, 0.95)
  • 背景: 深蓝灰 (RGB: 0.15, 0.15, 0.2)

🎮 交互方式

鼠标操作

  • 左键点击开关: 切换开/关状态
  • 鼠标悬停: 显示 "Click!" 提示

键盘操作

  • 空格键: 切换开关状态
  • ESC 键: 退出程序

🛠️ 技术实现

核心逻辑

class SwitchComponent : public BitHCI::IComponent {
private:
    bool isOn = false;              // 开关状态
    float knobPosition = 0.0f;      // 旋钮位置 (0.0~1.0)
    float animationSpeed = 8.0f;    // 动画速度
    
public:
    void onUpdate(float deltaTime) {
        // 鼠标点击检测
        if (isMouseClickedOnSwitch()) {
            isOn = !isOn;
        }
        
        // 平滑动画
        float target = isOn ? 1.0f : 0.0f;
        knobPosition = lerp(knobPosition, target, animationSpeed * deltaTime);
    }
    
    void onRender() {
        // 绘制背景(圆角矩形)
        drawRoundedRectangle(...);
        
        // 绘制旋钮
        renderer->drawCircle(knobX, knobY, radius, color);
        
        // 绘制状态文本
        renderer->drawText(isOn ? "ON" : "OFF", ...);
    }
};

使用的 Runtime API

  1. IRenderer::drawRectangle() - 绘制矩形背景
  2. IRenderer::drawCircle() - 绘制圆角和旋钮
  3. IRenderer::drawText() - 绘制状态文本
  4. IInput::isMouseButtonPressed() - 检测鼠标按键
  5. IInput::getMousePosition() - 获取鼠标位置
  6. IInput::isKeyJustPressed() - 检测键盘按键
  7. IWindow::close() - 关闭窗口

圆角矩形实现

void drawRoundedRectangle(float x, float y, float w, float h, float radius) {
    // 中心矩形
    renderer->drawRectangle(x + radius, y, w - 2*radius, h, color);
    
    // 左右两个圆角
    renderer->drawCircle(x + radius, y + h/2, radius, color);
    renderer->drawCircle(x + w - radius, y + h/2, radius, color);
    
    // 上下填充
    renderer->drawRectangle(x, y + radius, radius, h - 2*radius, color);
    renderer->drawRectangle(x + w - radius, y + radius, radius, h - 2*radius, color);
}

📦 构建和运行

编译组件

cd examples/cpp/switch
mkdir build
cd build
cmake -G "Visual Studio 17 2022" -A x64 ..
cmake --build . --config Release

运行组件

cd native
.\build\Release\bitui_native.exe ..\examples\cpp\switch\build\Release\switch.dll

或者从项目根目录:

cd "d:\_Bit_OS\Bit HCI\native"
.\build\Release\bitui_native.exe "..\examples\cpp\switch\build\Release\switch.dll"

🎯 学习要点

1. 状态管理

  • 使用 bool isOn 管理开关状态
  • 使用 float knobPosition 实现平滑动画
  • 通过插值实现状态过渡

2. 鼠标交互

  • 检测鼠标点击事件
  • 计算鼠标位置是否在控件区域内
  • 实现点击反馈

3. 动画实现

  • 使用线性插值(Lerp)实现平滑过渡
  • 基于 deltaTime 的帧率独立动画
  • 目标值和当前值的平滑追踪

4. 组合图形

  • 使用基础图形(矩形、圆形)组合出复杂形状
  • 圆角矩形的实现技巧
  • 分层绘制(背景、前景、文本)

🔧 扩展建议

简单扩展

  1. 添加音效: 切换时播放音效
  2. 震动反馈: 点击时添加视觉震动效果
  3. 不同主题: 实现多种颜色方案

中级扩展

  1. 尺寸自适应: 根据窗口大小调整开关尺寸
  2. 多个开关: 支持同时显示多个开关
  3. 禁用状态: 实现禁用状态和样式

高级扩展

  1. 事件回调: 实现状态变化回调机制
  2. 数据绑定: 与外部数据模型双向绑定
  3. 自定义样式: 支持自定义颜色、尺寸、动画

📊 性能指标

  • 渲染图元: ~10 个(矩形 + 圆形 + 文本)
  • 内存占用: < 1KB
  • CPU 占用: 极低(仅在动画时有计算)
  • 响应延迟: < 16ms (60 FPS)

🐛 已知限制

  1. drawRectangle 未实现: 需要在 Runtime API 中实现
  2. drawCircle 未实现: 需要在 Runtime API 中实现
  3. drawText 未实现: 需要在 Runtime API 中实现
  4. 圆角渲染: 当前为简化实现,可能有缝隙

📚 相关文档

🎉 下一步

学习完 Switch 组件后,您可以:

  1. 实现 Slider 组件: 滑动条控件
  2. 实现 Button 组件: 按钮控件
  3. 实现 Checkbox 组件: 复选框控件
  4. 组合控件: 创建包含多个开关的设置面板

组件状态: ⚠️ 需要先实现 drawRectangle 和 drawCircle API
最后更新: 2025-10-11
维护者: Bit HCI Team