读计算机学位那会儿，我应付微积分和代数的方式就是每个波兰学生都懂的“三字诀”——Zakuć, Zdać, Zapomnieć，突击、通过、忘光。把公式塞进脑子顶过考试，之后不再关心还能记住什么。后来做了几年开发，有一天要给一个 SVG 元素绑鼠标移动事件，结果鼠标一动，元素位置直接飞出可视区域。最后用变换矩阵才把乱跑的位置拽回来。

后来跟 SVG 和图表打交道越多，我越发现：当初拼命突击又心安理得忘掉的数学，其实活在我写的每一行前端代码里。坐标计算藏着它，图布局里藏着它，拖拽逻辑里藏着它，动画缓动里也藏着它——只是我们从来不管这叫“数学”。

打开网易新闻 查看精彩图片

最近我在跑团时又撞上了这件事。我的长团《斯特拉德诅咒》里，队伍内部和关键 NPC 的关系网很复杂，我们用 Excel 记录从“爱”到“恨”再到“说来话长”的各种状态。我想做个交互式关系图，让每个角色的头像和名字都可见，两两连线，线色表示关系。悬停在头像上时，还得能显示这个角色对其他人的看法以及别人对他的看法。角色数量不固定，我决定用 React Flow 做图，选择圆形布局——每个角色放在圆周上。问题是：怎么动态把元素排成圆圈？这时候，被突击过又忘掉的正弦和余弦找上门来了。

以下是我从这个需求里拆出的几条“数学追杀现场”，也是这系列文章想要摊开来讲的东西：

1. 位置=半径×角度，而角度必须转化为坐标。直角三角形里，一个锐角 α 的正弦就是 对边/斜边，余弦是 邻边/斜边。把圆心当原点，已知半径 R 和第 i 个角色对应的角度 θ，用 (R·cosθ, R·sinθ) 就能算出它在圆周上的坐标。这就是当初拼命记下又迅速丢掉的 sin 和 cos——现在帮我定住了所有头像。

2. 圆形布局只是冰山一角。同样的三角函数还会反复出现在拖拽时计算偏移量、多节点避让时判断碰撞、绘制贝塞尔曲线连线时确定控制点。这些几乎每天都要写的逻辑，本质上都是三角运算。

3. 我们总以为“数学没用”，只是因为我们从不把坐标、布局、变形这些东西叫做数学。当你需要把元素精确放到对的位置，解决重叠冲突，或者从一个点向另一个点画线，三年前突击过的那堆三角学就直接从记忆废墟里弹出来向你收债。

这系列文章不献证明、不堆公式，每篇只挑一个当年硬塞进脑子的概念，用我实际项目或 side project 里跑过的代码告诉你它到底活在哪。欢迎来到“认领你的 Web 开发数学”——第一篇，就从三角学帮你摆平动态定位开始。