这篇文章主要介绍帆布如何实现高阶贝塞尔曲线,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>为什么需要一个试验场?
在绘制复杂的高阶贝塞尔曲线时无法知道自己需要的曲线的控制点的精确位置。在试验场中进行模拟,可以实时得到控制点的坐标值,将得到的点坐标变为对象数组传递进BezierMaker类就可以生成目标曲线
效果图
<强>功能
[x]试验场可添加任意数量控制点
<李>[x]试验场支持展示曲线绘制的形成动画
<李>[x]控制点可自由拖拽
<李>[x]支持显示贝塞尔曲线形成过程的切线
<李>[x] 3阶及以下贝塞尔曲线的绘制采用原生API
<强>引入
<强>绘制
上面的效果图为试验场的使用,当你通过试验场获得控制点的准确坐标之后,就可以调用bezierMaker.js进行曲线的直接绘制。
绘制结果
当控制点少于3个时,会适配使用原生的API接口。当控制点多于2个后,由我们自己实现的函数进行描点绘制。
<强>核心原理
绘制贝塞尔曲线
绘制贝塞尔曲线的核心点在于贝塞尔公式的运用:
,
BezierMaker.prototype.bezier =,函数(t),{,//贝塞尔公式调用
,,,var x =, 0,
,,,,,,,y =, 0,
,,,,,,,bezierCtrlNodesArr =, this.bezierCtrlNodesArr,
,,,,,,,//控制点数组
,,,,,,,n =, bezierCtrlNodesArr.length 作用;1,
,,,,,,,self =,
,,,bezierCtrlNodesArr.forEach(函数(项目,,指数),{
,,,,,,,如果索引(!),{
,,,,,,,,,,,x +=, item.x *, Math.pow((, 1个女人;t ),, n 作用;指数),*,Math.pow (t),指数),
,,,,,,,,,,,y +=, item.y *, Math.pow((, 1个女人;t ),, n 作用;指数),*,Math.pow (t),指数),
,,,,,,,},{else
,,,,,,,//的阶乘为阶乘函数
,,,,,,,,,,,x +=, self.factorial (n),/, self.factorial(索引),/,self.factorial (n 安康;指数),*,item.x *, Math.pow((, 1个女人;t ),, n 作用;指数),*,Math.pow (t),指数),
,,,,,,,,,,,y +=, self.factorial (n),/, self.factorial(索引),/,self.factorial (n 安康;指数),*,item.y *, Math.pow((, 1个女人;t ),, n 作用;指数),*,Math.pow (t),指数),
,,,,,,,}
,,,})
,,,return {
,,,,,,,x, x,:
,,,,,,,y, y
,,,}
null
