曼德勃罗集web可视化应用
曼德勃罗集可视化应用
一个基于 Next.js 构建的沉浸式曼德勃罗集（Mandelbrot Set）探索工具，提供丰富的交互功能和精美的视觉效果。
源代码：https://gitee.com/yanjianzhong007/mandelbrotset
在线演示：https://z2p9jz49tp.coze.site/
git clone https://gitee.com/yanjianzhong007/mandelbrotset.git 功能特性
核心功能
- 全屏显示：沉浸式全屏浏览体验
- 高性能渲染：基于 Canvas 的像素级渲染，支持流畅的实时交互
- 拉框选择：
Shift + 拖拽：放大选定区域Ctrl + 拖拽：缩小选定区域
- 一键全图：快速返回完整视图
- 缩放滑块：快速定位缩放级别（2x - 1000x）
预设位置（上帝的指纹）
内置 10 个经典的分形区域：
- 完整视图
- 象鼻 (Elephant Valley)
- 海马谷 (Seahorse Valley)
- 双螺旋 (Double Spiral)
- 轻盈之羽 (Light Feather)
- 螺旋星系 (Spiral Galaxy)
- 迷你曼德勃罗 (Mini Mandelbrot)
- 海马群岛 (Seahorse Islands)
- 闪电峡谷 (Lightning Canyon)
- 螺旋花 (Spiral Flower)
颜色主题
7 种精心设计的颜色方案：
- 彩虹
- 火焰
- 海洋
- 灰度
- 霓虹
- 日落
- 森林
交互工具
- 撤销功能：支持多步撤销，快捷键
Ctrl+Z - 书签管理：保存、分类、命名并快速跳转到感兴趣的视图
- 移动端支持：单指拖拽平移，双指缩放
界面特性
- 悬浮控制面板：可折叠，支持深色/浅色主题切换
- 渲染进度指示器：实时显示渲染状态
- 水印显示：多行填充水印，跟随图案移动，字体小巧淡雅
技术栈
- 框架: Next.js 16.0.10 (App Router)
- 语言: TypeScript 5
- UI: React 19 + Tailwind CSS 4
- 渲染: HTML5 Canvas
- 组件库: shadcn/ui
快速开始
环境要求
- Node.js 18+
- npm
操作指南
基本操作
- 拖拽：按住鼠标左键拖动视图
- 放大：按住
Shift键并拖拽选择区域 - 缩小：按住
Ctrl键并拖拽选择区域 - 缩放滑块：在控制面板中拖动滑块快速缩放
- 撤销：按
Ctrl+Z或点击撤销按钮
预设位置
在控制面板的"上帝的指纹"下拉菜单中选择预设位置，快速跳转到经典分形区域。
颜色主题
在控制面板的"颜色主题"下拉菜单中选择不同的配色方案，探索不同的视觉风格。
书签管理
- 点击控制面板中的书签图标（黄色书签按钮）
- 点击"添加书签"保存当前视图
- 为书签命名并选择分类
- 点击书签条目快速跳转
移动端操作
- 单指拖拽：平移视图
- 双指捏合：缩放视图
主题切换
点击控制面板右上角的太阳/月亮图标切换深色/浅色主题。
项目结构
mandelbrot-set/ ├── src/ │ ├── app/ │ │ └── page.tsx # 主页面组件 │ ├── components/ │ │ ├── ControlPanel.tsx # 控制面板 │ │ ├── MandelbrotCanvas.tsx # Canvas 渲染组件 │ │ ├── BookmarksPanel.tsx # 书签管理面板 │ │ ├── ProgressBar.tsx # 进度指示器 │ │ └── ui/ # shadcn/ui 组件 │ └── lib/ │ └── mandelbrot.ts # 核心算法和工具函数 ├── public/ # 静态资源 └── package.json 核心算法
本项目使用经典的曼德勃罗集迭代算法：
z_{n+1} = z_n^2 + c 其中 c 是复平面上的点，z 从 0 开始迭代。如果 |z| 始终保持在 2 以内，则点 c 属于曼德勃罗集。
性能优化
- 使用 Canvas 直接操作像素，避免 DOM 操作
- 画质模式切换：预览模式降低分辨率提升性能
- 分块渲染：大画布分块处理，避免界面卡顿
- Web Worker 支持：后台计算，保持界面响应
浏览器支持
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- 支持桌面和移动端
开发说明
代码规范
- 使用 TypeScript 进行类型检查
- 遵循 ESLint 规则
- 使用 Prettier 格式化代码
构建检查
pnpm build 许可证
MIT
致谢
本应用受到曼德勃罗集的数学美学的启发，旨在为用户提供探索分形世界的沉浸式体验。
