POE2Builds

我运营着一个免费的《流放之路 2》构筑站（poe2builds.ai），玩家使用最多的功能是交互式天赋树查看器。下面揭秘其底层实现——没有 three.js，没有 pixi，只有 Canvas 2D。

## 数据难题

GGG（ Grinding Gear Games ）发布过官方的技能树导出：节点位置、连接关系，以及——最有趣的部分——精灵图集。frame.webp（约 88KB）存放着已分配和未分配状态下的核心/Notable/小型天赋的边框；skills.webp（约 436KB）则打包了 4,500+ 个独立的节点图标。一个构建期的脚本会把 data.json 与 skills.json 合并成一个紧凑的精灵映射表（id → [x, y, w, h]），这样客户端就无需再去解析 GGG 的原始导出数据。

## 以 60fps 绘制 1,000+ 节点

查看器是一个应用了平移/缩放变换的单个 。每帧流程如下：

1. 剔除视口外的节点。

2. drawImage() 绘制边框精灵（已分配 = 金色光晕，未分配 = 通过滤镜通道转为灰度）。

3. 将技能图标裁剪到边框圆圈内。

4. 先绘制连线，再绘制节点——已分配的路径带有柔和光晕。

标签仅在缩放超过阈值时才渲染，这让悬停路径的代价保持在极低水平。

## 让我熬了无数个夜晚的坑

• 资源 URL 带哈希值：精灵图集必须通过动态 import 加载，否则 CDN 一次改名就会悄无声息地毁掉所有图标（这是我亲身经历的教训）。

• 滚轮缩放需要非 passive 监听器，否则页面会跟着一起滚动。

• SEO 快照：爬虫不会运行你的 canvas——我们服务端输出天赋树数据，并在降级版本中渲染真实的文本和链接。

## 为什么要折腾这些

站点上每个构筑指南都会展示按阶段划分的天赋树（开荒期 → 异界图 → 终局），因此查看器需要为每个构筑加载三套数据集。Canvas 2D 完全扛得住——瓶颈从来不在渲染，而在数据卫生。

站点（免费、无需登录）：https://poe2builds.ai ——欢迎在评论区交流关于整套流水线的任何问题。