线段树可视化

一个基于 FTXUI 的交互式线段树可视化程序，支持线段树建树、区间求和与区间加值的逐步演示。

功能特性

• ✨ 可视化：以树形结构直观展示线段树的每个节点
• 📊 逐步演示：记录并回放每一步操作，便于学习理解
• ⌨️ 键盘导航：支持方向键、Home/End 键快速浏览操作步骤
• 📖 详细说明：每个操作步骤都配有中文说明文字

提示：按 F11 全屏以获得最佳显示效果

系统要求

• 操作系统：Windows / Linux / macOS
• 编译器：支持 C++20 标准的编译器（如 GCC 10+、Clang 11+、MSVC 2019+）
• CMake：3.14 或更高版本
• Git（用于 CMake 下载依赖库）
• 依赖库：FTXUI

构建说明

1. 克隆或下载项目

   git clone https://github.com/2005czq/SegmentTree.git
   cd SegmentTree

2. 创建构建目录

   mkdir build
   cd build

3. 使用 CMake 配置项目

   cmake ..

4. 编译程序

   cmake --build .  # Windows
   make             # Linux / macOS

5. 运行程序

   .\app.exe        # Windows
   ./app            # Linux / macOS

使用说明

启动时会显示欢迎弹窗，介绍程序的功能和使用方法。点击按钮或按 Enter/Esc 键关闭弹窗进入主界面

顶部控制区

• 数组输入框：输入用空格分隔的整数，例如 1 5 4 2 3 9 7
• 处理区间：设置查询或更新的左右端点（闭区间 [L, R]）
• 加值输入框：区间更新时每个元素增加的值
• 操作按钮：
  • 🟢 构建树：根据输入数组构建线段树
  • 🔵 区间查询：查询指定区间的和
  • 🟡 区间更新：对指定区间的每个元素加上指定值
  • 🔴 清空树：清除当前线段树
• 步骤导航按钮：
  • 🟣 开头：跳转到第一步
  • ⚪ 上一步：回退一步
  • ⚪ 下一步：前进一步
  • 🟣 结尾：跳转到最后一步

底部演示区

• 说明图例（左上角）：颜色和符号的含义
• 步骤信息（顶部中央）：当前操作类型、步骤数和详细说明
• 树形展示（中央）：线段树的可视化结构

操作流程

• 构建线段树
  1. 在 数组 输入框中输入数组，例如：1 5 4 2 3 9 7
  2. 点击 构建树 按钮
  3. 使用步骤导航按钮逐步查看建树过程
• 区间查询
  1. 确保已经构建树
  2. 在 处理区间 中输入左右端点，例如：左 2，右 4
  3. 点击 区间查询 按钮
  4. 逐步浏览查询过程，最终会显示查询结果
• 区间更新
  1. 确保已经构建树
  2. 在 处理区间 中输入左右端点，例如：左 2，右 4
  3. 在 加值 输入框中输入要增加的值，例如：2
  4. 点击 区间更新 按钮
  5. 逐步浏览更新过程
• 键盘快捷键
  • 左方向键 ← ：上一步
  • 右方向键 → ：下一步
  • Home 键：跳到开头
  • End 键：跳到结尾

项目结构与技术细节

SegmentTree/
├── main.cpp              # 主程序入口
├── images/
│   └── demo.gif          # 演示动画
├── src/
│   ├── segtree.hpp       # 线段树核心实现
│   ├── state.hpp         # 可视化状态管理
│   ├── renderer.hpp      # 树形渲染模块
│   ├── ui.hpp            # 用户界面组件
│   └── utils.hpp         # 工具函数
├── CMakeLists.txt        # 项目构建配置文件
├── README.md
└── LICENSE

• segtree.hpp：线段树类，包含 build、query、update 三个核心方法
• state.hpp：记录每步操作的详细信息，支持前进、后退、跳转
• renderer.hpp：递归渲染树形结构，高亮当前节点和访问路径
• ui.hpp：封装 FTXUI 组件，提供交互界面

使用 FTXUI 库进行可视化构建

开源协议

本项目遵循 MIT 开源协议