贝塞尔曲线的切线及其AABB问题

先聊点别的

2023 年抖音上居然还看到很多前端培训

各种直播前端教学（虽然是录播）但看起来还是有大批前往前端卷啊

说明了什么，很可能说明其它行业更难卷

这不是行业不景气业务下降了么..

互联网行业是肉眼可见的不景气

业务量也下降了，业务相关的工作也变的不再饱和

我这 80 后的工作积极性降低了，啊..开始摆烂了

我还好赶上了前端发展的草莽时期，否则估计也进不了这个行档

怎么形容我自己呢，对编程是又菜又爱

可以将时间花一部分在自己感兴趣的内容上了，想到哪里干到哪里

而最近在翻译文章时贝塞尔曲线又回顾了一下

这让我想起了 2020 年遇到过的一个技术问题：曲线的 AABB

（另外还想到了两个其它问题也需要攻克一下，怎么莫名的想到了鲁讯先生的朝花夕拾.. 果然是年纪大了..）

AABB 即图形界中常说的 AABB (axis-aligned bounding box) 包围盒, 严格来说是未能实现 BB

规则的图形很容易通过顶点距离就可以计算出 BB，但像贝塞尔曲线这样的曲线就不太好算

是时候解决一下了

要实现的效果

2020 年写微信小程序

在当年写了个简单绘图库

那是在 2020 年上一家公司，公司安排我负责微信小程序的开发

其中经常要用微信小程序生成海报，保存在图片用于在手机上的传播

单独手工去拼接生成海报还是比较麻烦的， Canvas 提供的 api 相对比较低级，

当时看到一些人开源出来的类似 json 配置形式生成海报图

这种配置类型的实现原理是大多是通过配置的坐标，大小，颜色，以及一些简单的 CSS 样式解析后在 canvas 上绘制

相对于纯手工去画，确实简单很多

但我更喜欢 Pixi.js、EaseJs 这类图形库的风格

当时就抽空写了一个简易的 Canvas 操作库 DuduCanvas

DuduCanvas 基本封装实现了图片，文本，形状等相关对象的绘制

调用的方式相比于配置要稍低级一点，拥有更大的自由度，例如添加一个圆形的头像图片：

const avatar = new Image({
      image: loader.get('avatar'),
      width: 100, 
      height: 100,
})

// 将头像变成圆形
avatar.borderRadius = '100%'

// 添加一个文本
const t1 = new Text()
t1.text = '你好世界Hello'
t1.color = 'red'
t1.x = 100
t1.y = 300
// 添加到舞台
stage.addChild(img, t1)

至少对于当时的项目来讲，DuduCanvas 运行的还不错，毕竟不是用它做动画或者游戏

还好，我代码存到了 github 上，在新公司临时做项目时还派上了用场用它画了个积分统计图

但它有几个缺点：

没有实现事件系统，当然它大部分时间只是用于生成海报，用不到事件交互
绘制曲线图形后的 BB 未能实现，需要自己手动指定
由于是 2020 年当时微信小程序的 Canvas 2D 版本还牌测试版，所以使用的旧版 Canvas API
graphics 实现过于简单好多重复命令未去除
未能实现曲线的宽高计算(BB)

没过多久离职了，工作重心也从小程序转到其它前端项目

之后就没再管它

https://github.com/willian12345/DuduCanvas

2023 年我尝试着用微信开发者工具打开看了一下，还能运行

三阶贝塞尔曲线的 BB

之前在翻译贝塞尔曲线文字路径一文中提到过三阶贝塞尔曲线

它是用 C# 伪代码来讲解的

定义 4 个控制点：

(x1, y1), (x2, y2), (x3, y3), (x4,y4)

定义 A..H 系数

A = x3 - 3 * x2 + 3 * x1 - x0
B = 3 * x2 - 6 * x1 + 3 * x0
C = 3 * x1 - 3 * x0
D = x0

E = y3 - 3 * y2 + 3 * y1 - y0
F = 3 * y2 - 6 * y1 + 3 * y0
G = 3 * y1 - 3 * y0
H = y0

得到多项式：

x = At3 + Bt2 + Ct + D 
y = Et3 + Ft2 + Gt + H

那么我们先用 Javascript 实现一下那篇文章中提到过的垂直于曲线的单位向量

假设我们要绘制的三阶贝塞尔曲线的四个控制点

[
      { x: 120, y: 320 },
      { x: 135, y: 440 },
      { x: 320, y: 280 },
      { x: 480, y: 340 },
];

下面是它三阶贝塞尔曲线采样点，t 取值 0-1 ：

// 用 t 获取"样条曲线" 采样点
let sx = A * Math.pow(t, 3) + B * Math.pow(t, 2) + C * t + D
let sy = E * Math.pow(t, 3) + F * Math.pow(t, 2) + G * t + H

sx, sy 就是 t 从 0 - 1 时算出的曲线上的每个点

如果 t 取值足够小，那么在 canvas 上画出所有的点它就是一条贝塞尔曲线

t 间隔为 0.1 时:

t 间隔为 0.001 时:

画出垂直于曲线的向量关键, 在于对三阶贝塞尔曲线多项式的求导

如果你忘记了什么是求导（导函数）, 没关系, 直接用公式就完了

我这个学渣都会用，你肯定也可以，

当然最好是回去复习一下高中后期的导函数部分，有助于理解曲线切线的几何意义

求导后得到向量：

// 求导前
x = At3 + Bt2 + Ct + D 
y = Et3 + Ft2 + Gt + H 

// 求导后
Vx = 3At2 + 2Bt + C 
Vy = 3Et2 + 2Ft + G

用 Javascript 实现如下：

// (求导)用于计算曲线上采样点的切线向量
let tx = 3 * A * Math.pow(t, 2) + 2 * B * t + C
let ty = 3 * E * Math.pow(t, 2) + 2 * F * t + G

// 旋转 90 度或 270 度垂直于曲线采样点
let px = ty
let py = -tx

// 缩至单位向量
let magnitude = Math.sqrt(px * px + py * py)
px = px / magnitude
py = py / magnitude

// 为了向量可见，扩大 20 个单位
px *= 20;
py *= 20;

// 从采样点连接至切线向量偏移位置
console.log(sx + px, sy + py);

源码尽量平铺直叙：...

https://github.com/willian12345/blogpost/blob/main/curve/bezier/cubic-bezier-tangent-test.html

如果你对贝塞尔曲线感兴趣还可以看一下我翻译的《曲线编程艺术》的贝塞尔曲线这一章

把三阶贝塞尔曲线包起来

要实现三阶贝塞尔曲线的AABB(包围合)还是得从切线入手

比如像下面这个曲线

let points = [
      {x: 120, y: 160 }, 
      {x:  35, y: 200 }, 
      {x: 220, y: 260 }, 
      {x: 180, y:  40 }, 
];

四个点得出的结果：

先把它的四个点用直线连接画出来

ctx.beginPath();
ctx.lineWidth = 2;
ctx.setLineDash([1, 2]);
ctx.strokeStyle = '#076c75';
ctx.moveTo(points[0].x, points[0].y);
ctx.lineTo(points[1].x, points[1].y);
ctx.stroke()

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(points[1].x, points[1].y);
ctx.strokeStyle = 'black';
ctx.lineTo(points[2].x, points[2].y);
ctx.stroke()

ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#076c75';
ctx.moveTo(points[2].x, points[2].y);
ctx.lineTo(points[3].x, points[3].y);
ctx.stroke();

蓝色的线就像是控制手柄

点 points[1] 和 points[2] 分别就是控制手柄

控制手柄就是 PS 内的钢笔工具用过吧？就是这个，长短与位置调节就控制了曲线的形状

BB 包围盒就是找到曲线所有转折点中最小和最大的转折点

找转折点，可理解为找到曲线上的斜率

还是从公式入手

在上一节中贝塞尔公式系数直接把 x, y 都用 A..H 表示出来了

这次先简化到一维比如 x ，系数用 A..D 表示

x 坐标方程即（y 轴坐标方程其实是一样的，只是算了两遍）：

x = A (1-t)^3 +3 B t (1-t)^2 + 3 C t^2 (1-t) + D t^3

对其求导，关于 t 的微分，得到微分方程

dx/dt =  3 (B - A) (1-t)^2 + 6 (C - B) (1-t) t + 3 (D - C) t^2
      =  [3 (D - C) - 6 (C - B) + 3 (B - A)] t^2
      + [ -6 (B - A) - 6 (C - B)] t
      + 3 (B - A) 
      =  (3 D - 9 C + 9 B - 3 A) t^2 + (6 A - 12 B + 6 C) t + 3 (B - A)

合并整理后是一个二次函数：

dx/dt = (3 D - 9 C + 9 B - 3 A) t^2 + (6 A - 12 B + 6 C) t + 3 (B - A)

用其 a, b, c 简化系数代替后：

dx/dt = a t^2 + b t + c

我们要解决的是 dx/dt = 0

"斜率为 0 可能意味着曲线在该点处有一个极小值或极大值，或者曲线在该点处是一个水平切线"

反正我这个学渣是这么理解的

那么就是对二交方程求解

a t^2 + b t + c = 0

可用求根公式

- b +/- sqrt(b^2-4 a c)
-----------------------
      2 a

解方程可得两个解（根） t0, t1, 无解，或 1 个解

这就有了四个点的极值，起点，终点，和两个解

系数 a, b, c 就是根据公式代入, 比如 x 的坐标代入后：

let a = 3 * points[3].x - 9 * points[2].x + 9 * points[1].x - 3 * points[0].x;
let b = 6 * points[0].x - 12 * points[1].x + 6 * points[2].x;
let c = 3 * points[1].x - 3 * points[0].x;

还记得初中数学如何判断二次函数有几个根吧？

delta 即 b^2-4ac 判断大于等于 0 即为有解

let delta = b * b - 4 * a * c;

判断有解后找到局部极限值 (local extreme)

代入求根公式:

t1 = (-b + Math.sqrt(delta)) / (2 * a);
t2 = (-b - Math.sqrt(delta)) / (2 * a);

我们只关心 0 <= t <= 1 的情况

将得到和 t1, t2 分别代入贝塞尔曲线公式

x = A (1-t)^3 +3 B t (1-t)^2 + 3 C t^2 (1-t) + D t^3

得到的就是真实的 x 坐标值，

所以需 x 要判断

if (x < xl) xl = x;
if (x > xh) xh = x;

记住是求出的二个根 t1, t2 分别代入判断

它有可能是最大值，也有可能是最小值记作： xl, xh

对 y 同样进行一模一样的计算，t3, t4 也可以得到一最大值与最小值记作：yl, yh

将它们从起点左下，左上，右上，右下，左下终点的顺序连接起来就是我们要的 BB 包围盒

ctx.moveTo(xl, yl); // 起点，左下
ctx.lineTo(xl, yh); // 左上
ctx.lineTo(xh, yh); // 右上
ctx.lineTo(xh, yl); // 右下
ctx.lineTo(xl, yl); // 终点，左下

如上图，包围盒围起来了，解决了计算贝塞尔曲线宽高计算的问题

画出切线验证

再把曲线的切线画出来，这回我们不画垂直向量，直接画切线

切线向量这道菜已经吃过了..

将 t 步长设为 0.1, 进行曲线采样, 画出绿色的切线

for( let t=0; t <=1; t += 0.1){
      // 绘制起点移动到对应的曲线点上
      const sx = calcBezierByT(pointXArray, t);
      const sy = calcBezierByT(pointYArray, t);
      ctx.moveTo(sx, sy)

      // a t^2 + b t + c 
      // 切线向量
      let vx = a1 * Math.pow(t,2) + b1 * t + c1
      let vy = a2 * Math.pow(t,2) + b2 * t + c2
      // 缩至单位向量
      let magnitude = Math.sqrt(vx * vx + vy * vy)
      // vx = -vx / magnitude;
      // vy = -vy / magnitude;
      vx = vx / magnitude;
      vy = vy / magnitude;
      // 向量长度变长 30 个单位
      vx *= 30
      vy *= 30
      ctx.strokeStyle = 'green';  
      ctx.lineTo(sx + vx,  sy + vy);
      }
      ctx.stroke();
}

(绿色颜色有点儿淡了感觉...)

代入上一节算出的 t1, t2, t3, t4 用红色画出局部极限值 (local extreme) 验证

注意曲线不同，t1， t2, t3, t4 的值有可能有，有可能没有，且我们需要的是 t1 >= 0

需要这样处理

// 过滤
const tArray = [t1, t2, t3, t4].filter((t)=> t >= 0);

for( let i=0; i <= tArray.length; i++){
      ...与上面生成切线一样，只是 t 值是从 tArray 获取，而不是 0.1 步长
}

可以看到，红色标出的果然很 "极限"

代入不同的坐标值看看

const points = [
      { x: 20, y: 340 },
      { x: 50, y: 400 },
      { x: 320, y: 180 },
      { x: 480, y: 340 },
    ];

const points = [
{x:  13, y: 224 }, 
{x: 150, y: 100 },
{x: 251, y:  93 }, 
{x: 341, y: 224 }, 
];

(绿色颜色快看不出来了，PC上的微信截图工具会模糊截图...)

可以看到，有些曲线极限值就不一定有四个

https://github.com/willian12345/blogpost/blob/main/curve/bezier/aabb.html

后续

贝塞尔曲线虽然原理很简单，但深入后就会特别复杂，你们好好深入，反正以我的能力是深入不了的

作为一个打工人，就要有打工人的觉悟，主打一个随意，没必要在一个问题上死磕

东看看，西看看，说不定回头再来看问题，已具备足够的知识与资料后就解决了

创业公司麻，就是这么的不稳定，何况是在这样一个环境下

最近公司要让我重新再接触 unity ，这又绕回来了， c# 其实挺好的

参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo

https://floris.briolas.nl/floris/2009/10/bounding-box-of-cubic-bezier/

https://stackoverflow.com/questions/24809978/calculating-the-bounding-box-of-cubic-bezier-curve

https://pomax.github.io/bezierinfo/#boundingbox

博客园: http://cnblogs.com/willian/

github: https://github.com/willian12345/