3.4 贝塞尔曲线

canvas供应了两个绘制贝塞尔曲线api:

• ctx.quadraticCurveTo(cpx, cpy, x, y);

二次贝塞尔曲线，(cpx, cpy)掌握点 (x, y)尽头

• ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

三次贝塞尔曲线，(cp1x, cp1y)掌握点一, (cp2x, cp2y)掌握点二， (x, y)尽头

题外话：

贝塞尔曲线的数学基本是早在 1912 年就广为人知的伯恩斯坦多项式。最早用来辅佐汽车车体的工业设计。

CSS3的transition-timing-function属性，取值就能够设置为一个三次贝塞尔曲线方程
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)。

canvas画图示例：

// 二次
ctx.moveTo(200, 100);
ctx.quadraticCurveTo(230, 250, 350, 200);
// 三次
ctx.moveTo(450, 250);
ctx.bezierCurveTo(530, 150, 650, 300, 700, 200);

蓝色是掌握点

题目一：
那canvas是怎样经由过程掌握点来绘制出曲线的，或许假如不必这个，本身绘制曲线该怎样操纵呢：

这个是n阶贝塞尔曲线的方程：

我们重点看二(三)阶方程：

B(t)是曲线上的点，t在0~1之间取值， P0起始点，P2尽头，P1掌握点

t从0~1之间取值不停增大，B(t)不停掏出曲线上的点，从P0移至P1

const bx = (1-t)*(1-t)*start.x + 2*t*(1-t)*control.x + t*t*end.x;
const by = (1-t)*(1-t)*start.y + 2*t*(1-t)*control.y + t*t*end.y;

题目二：
我咋晓得掌握点该怎样选，特别是起尽头动态数据时(也就是说，我们使用时，每每只晓得出发点P0尽头P1)：

这个依据曲线斜率，可视化需求能够拔取的体式格局不一致，不过大抵道理类似

能够在出发点和尽头的
垂直平分线上选一点作为
掌握点, 然后用一个参数来掌握曲线的
蜿蜒水平

// curveness 蜿蜒水平(0-1)
const cp = {
  x: ( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
  y: ( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness
};

题外话：

关于cp点的求解：

线段中点:

const mid = [ ( start.x + end.x) / 2, ( start.y + end.y ) / 2 ];

依据出发点和尽头也能够获得一个向量v:

const v = [ end.x – start.x, end.y- start.y ];

将这个向量顺时针扭转90度，获得一个垂直于它的向量v2:

const v2 = [ v.y, -v.x ];

那末中心掌握点的坐标为(向量v2乘curveness加上中心点坐标)

const cp = { x: mid.x + v2.x curveness, y: mid.y + v2.y curveness} =
{ x:( start.x + end.x ) / 2 – ( start.y – end.y ) * curveness,
y:( start.y + end.y ) / 2 – ( end.x – start.x ) * curveness}