canvas学习笔记-贝塞尔曲线

Sourcelink 发布于2019-08-26 13:29 / 3021人阅读

摘要：贝塞尔曲线提供了两个绘制贝塞尔曲线二次贝塞尔曲线，控制点终点三次贝塞尔曲线，控制点一控制点二，终点题外话贝塞尔曲线的数学基础是早在年就广为人知的伯恩斯坦多项式。的属性，取值就可以设置为一个三次贝塞尔曲线方程。

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}

GPU云服务器云服务器贝塞尔曲线贝塞尔曲线详解贝塞尔曲线整理学习曲线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108901.html

canvas学习笔记-绘制矩形及路径(一)

摘要：矩形只支持一种原生的图形绘制矩形。所有其他的图形的绘制都至少需要生成一条路径。绘制矩形三种方法绘制一个填充的矩形绘制一个矩形的边框清除指定矩形区域，让清除部分完全透明。矩形示例路径图形的基本元素是路径。 2. 矩形 canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。绘制矩形三种方法： // 绘制一个填充的矩形 fillRect(x, y, ...

Achilles 2019-08-26 13:29 评论0 收藏0
学习HTML5 Canvas这一篇文章就够了

摘要：本文作者利用一些简单的对进行了系统的总结，受益匪浅，毫不夸张的说，学习这一篇文章就够了一简介是新增的，一个可以使用脚本通常为在其中绘制图像的元素。本文作者利用一些简单的 demo 对 Canvas 进行了系统的总结，受益匪浅，毫不夸张的说，学习 Canvas 这一篇文章就够了！一、canvas简介是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘...

Eidesen 2019-08-26 12:12 评论0 收藏0