在庞加莱圆盘上构建无限画布：双曲几何的前端投影与交互实践

传统笔记应用采用欧几里得平面的无限画布模型，用户通过二维平移和缩放来组织内容。然而，当笔记数量增长时，这种线性空间很快变得拥挤不堪。庞加莱圆盘模型（Poincaré Disk Model）提供了一种截然不同的空间认知方式 —— 它将无限的双曲平面压缩到一个有限圆盘内，越靠近边界的区域代表距离中心越远，从而在视觉上创造出 "无限延伸" 的效果。

双曲几何的视觉隐喻

庞加莱圆盘模型的核心在于距离度量方式的转变。在双曲空间中，从圆心到边缘的欧几里得距离为 1，但双曲距离却是无限的。这意味着画布中心区域拥有 "正常" 的空间尺度，而边缘区域则被极度压缩。对于笔记应用而言，这种特性天然地支持层次化组织：重要内容置于中心，关联内容向边缘辐射，形成树状或放射状的视觉结构。

从数学角度看，双曲坐标 (r, θ) 到欧几里得屏幕坐标的投影遵循特定的变换公式。给定双曲半径 ρ 和角度 θ，对应的欧几里得半径 r 为 tanh(ρ/2)。这个双曲正切函数确保了当双曲距离趋向无穷时，欧几里得距离趋近于 1（圆盘边界）。反向变换则使用反双曲正切函数 atanh(r) * 2 将屏幕坐标映射回双曲空间。

前端实现的工程要点

在浏览器环境中实现双曲画布，需要处理坐标系统的双向转换。以 hyperbolic-canvas 库为例，它提供了 Point.givenHyperbolicPolarCoordinates(r, θ) 方法来创建双曲坐标点，以及相应的屏幕坐标转换 API。关键的数据结构设计如下：

// 笔记数据结构
const note = {
  id: 'note-001',
  content: '项目构想',
  // 双曲极坐标 (ρ: 双曲半径, θ: 角度)
  hyperbolicPosition: { rho: 1.5, theta: 0.8 },
  color: '#4CAF50',
  timestamp: 1712345678
};

// 坐标转换
const point = Point.givenHyperbolicPolarCoordinates(
  note.hyperbolicPosition.rho, 
  note.hyperbolicPosition.theta
);
const screenPos = point.getCanvasCoordinates();

渲染管线需要处理双曲几何的特殊性质。在双曲空间中，"直线" 表现为与圆盘边界正交的圆弧，这要求绘制函数使用 arc 而非 lineTo。对于笔记卡片这类矩形元素，需要计算其在双曲空间中的四个顶点投影，然后绘制为四边形而非标准矩形。

交互映射与边界处理

双曲空间的交互设计面临独特的挑战。拖拽平移在欧几里得画布中是简单的坐标偏移，但在双曲空间中对应的是莫比乌斯变换（Möbius Transformation）。这种变换保持双曲距离不变，但会旋转和缩放整个空间。实现时，需要将鼠标位移转换为双曲平移向量，然后应用到所有可见笔记的坐标上。

缩放操作在双曲空间中表现为改变观察点的双曲半径。与欧几里得缩放不同，双曲缩放会非线性地改变不同区域的内容密度：中心区域变化缓慢，边缘区域变化剧烈。这要求交互设计采用对数尺度的缩放系数，通常设置缩放范围在 0.5 到 5.0 之间，对应双曲半径从 0.5 到 3.0 的变化。

边界渲染策略需要特别处理。当笔记靠近圆盘边界（欧几里得半径 > 0.95）时，由于投影压缩，其视觉尺寸会急剧缩小。建议设置渲染阈值：当笔记的屏幕投影尺寸小于 4 像素时，切换为图标或点状表示；当小于 1 像素时，完全隐藏并仅在缩略图或导航视图中显示。

性能优化与精度控制

双曲三角函数的计算成本高于标准三角函数，且存在浮点精度问题。hyperbolic-canvas 库通过定义 HyperbolicCanvas.INFINITY 和 HyperbolicCanvas.ZERO 常量来替代原生 Infinity 和 0，在内部比较中提供可控的精度阈值。开发者可以根据设备性能调整这些阈值：高精度模式下设置为 1e-10，性能优先模式下放宽到 1e-6。

虚拟化渲染是处理大规模笔记的关键。由于双曲空间的压缩特性，远离中心的笔记在屏幕上可能仅占据几个像素。采用视锥剔除（Frustum Culling）策略，只渲染当前视口内且投影尺寸大于最小阈值的笔记，可以将渲染负载控制在 O (可见笔记数) 而非 O (总笔记数)。

可落地的参数清单

基于上述分析，以下是构建双曲笔记画布的核心参数配置：

坐标系统参数：

• 圆盘半径：600px（画布尺寸建议 1:1 比例）
• 双曲半径范围：0.0 - 3.0（对应欧几里得半径 0.0 - 0.95）
• 默认观察位置：双曲半径 0.0（圆盘中心）

渲染阈值：

• 最小渲染尺寸：4px（低于此值显示为圆点）
• 隐藏阈值：1px（低于此值不渲染）
• 边界警告：欧几里得半径 > 0.9 时提示用户接近空间极限

交互参数：

• 平移灵敏度：0.1（双曲距离单位 / 像素位移）
• 缩放范围：0.5x - 5.0x
• 缩放步长：1.2（每次滚动的缩放倍数）

性能参数：

• 精度阈值：1e-6（标准模式）/ 1e-10（高精度模式）
• 最大可见笔记数：500（超出时启用聚合显示）
• 渲染帧率目标：60fps（通过 requestAnimationFrame 节流）

双曲画布为笔记应用提供了一种全新的空间组织范式。它打破了欧几里得平面的线性限制，利用非欧几何的无限延展性，让用户能够在有限屏幕内管理理论上无限的内容层级。这种空间认知的转变，不仅是技术实现上的创新，更是对人类信息组织直觉的重新校准。

资料来源：

• ItsNickBarry/hyperbolic-canvas - 庞加莱圆盘模型的 JavaScript 实现
• Poincaré Disk Model - Wikipedia - 双曲几何理论基础

web