计算贝塞尔曲线

使用JavaScript计算贝塞尔曲线,将计算过程发布为npm包,在canvas中画出曲线。

为什么做这个事

今天去面试,工作是开发一个3D内容的编辑器,面试官问了我一个问题

做一个动画使一个元素从一个位置移动到另一个位置,移动的过程的速度是可配置的。怎么实现这种配置

我的回答是用一个曲线模拟速度,曲线有JS代码计算。曲线上有拐点,可以控制各个段落的斜率。

回到家后,我想到chrome在调试css的transition时,chrome会提供跟我们一个界面来调贝塞尔曲线,它就跟面试官问的问题中的那个东西。所以我就想着做一个这东西出来,进行开源。也是作为练习。而且我还打算做一个开源编辑器,没准以后也会用到。

开始做

贝塞尔曲线应该有一个计算公式,我将公式转换成JS代码就可以了。于是查了维基百科

知道了多项式公式: 多项式公式◎ 贝塞尔曲线多项式公式

其中有个括号n,i,不知道是什么,查了一下,它是「组合」: 组合◎ 组合

有了这两个公式,代码就不困难了。

写好代码后把计算这部分做成了一个npm包,发布到了npm仓库,代码放在了github[1]

npm install @wangshushuo/bezierjs

绘制canvas

canvas的api我不熟,多亏了MDN的canvas文档,需要用到画圆、写字、画线条、填充颜色等API。

下面是做出来的效果,代码在Github[2]

总结

做出来以后决定很有成就感,收获了这些:

  • 了解到了如何计算贝塞尔曲线和组合
  • 熟悉了一波canvas的api
  • 第一次发布了npm包
  • 第一次在代码中使用了TypeScript的枚举

  1. 地址:https://github.com/wangshushuo/bezierjs

  2. 绘制canvas的仓库地址:https://github.com/wangshushuo/react-bezier

updatedupdated2020-10-122020-10-12