文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

canvas如何实现高阶贝塞尔曲线

2023-06-09 15:28

关注

这篇文章主要介绍canvas如何实现高阶贝塞尔曲线,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

为什么需要一个试验场?

在绘制复杂的高阶贝塞尔曲线时无法知道自己需要的曲线的控制点的精确位置。在试验场中进行模拟,可以实时得到控制点的坐标值,将得到的点坐标变为对象数组传递进BezierMaker类就可以生成目标曲线

效果图

canvas如何实现高阶贝塞尔曲线 
 

canvas如何实现高阶贝塞尔曲线

功能

  1. [x] 试验场可添加任意数量控制点

  2. [x] 试验场支持展示曲线绘制的形成动画

  3. [x] 控制点可自由拖拽

  4. [x] 支持显示贝塞尔曲线形成过程的切线

  5. [x] 3阶及以下贝塞尔曲线的绘制采用原生API

引入

<script src="./bezierMaker.js"></script>

绘制

上面的效果图为试验场的使用,当你通过试验场获得控制点的准确坐标之后,就可以调用bezierMaker.js进行曲线的直接绘制。

var canvas = document.getElementById('canvas')//3阶之前采用原生方法实现var arr0 = [{x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70,y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239}]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551},{x:170,y:279}]var bezier0 = new BezierMaker(canvas, arr0, 'black')var bezier1 = new BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, 'green')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

绘制结果

canvas如何实现高阶贝塞尔曲线

当控制点少于3个时,会适配使用原生的API接口。当控制点多于2个后,由我们自己实现的函数进行描点绘制。

核心原理

绘制贝塞尔曲线

绘制贝塞尔曲线的核心点在于贝塞尔公式的运用:
 

canvas如何实现高阶贝塞尔曲线 
 

这个公式中的P0-Pn代表了从起点到各个控制点再到终点的各点与占比t的各种幂运算。

BezierMaker.prototype.bezier = function(t) { //贝塞尔公式调用    var x = 0,        y = 0,        bezierCtrlNodesArr = this.bezierCtrlNodesArr,        //控制点数组        n = bezierCtrlNodesArr.length - 1,        self = this    bezierCtrlNodesArr.forEach(function(item, index) {        if(!index) {            x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)             y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)         } else {        //factorial为阶乘函数            x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)             y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index)         }    })    return {        x: x,        y: y    }}

对所有点进行遍历同时根据当前占比t的值(0<=t<=1),计算出当前在贝塞尔曲线上的点坐标x,y。t的取值作者分成了1000份,即每次运算t+=0.01。此时算出的x,y即所求的贝塞尔曲线分成了1000份之后的某一点。当t值从0~1遍历1000次后生成1000个x,y对应坐标,依次描点画线即可模拟出高阶贝塞尔曲线。

对于贝塞尔公式的推导作者会在之后的文章中专门说明,现在你只需要知道我们通过贝塞尔公式计算出实际贝塞尔曲线被等分成了1000份的各点,用直线连接各点后即可模拟出类曲线。

对于模拟场贝塞尔曲线生成动画的实现

这个部分相关代码可以参考这里

整体思路是用递归的方式来将每个一层控制点当做1阶贝塞尔函数来计算下一层控制点并对应连线。具体逻辑作者会留到深入讲解贝塞尔曲线公式原理的时候一起梳理一下试验场的动画生成原理~

以上是“canvas如何实现高阶贝塞尔曲线”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯