Canvas画曲线

Canvas a'ゞ『完美』 3年前 (2016-08-05) 3801次浏览 已收录 3个评论 扫描二维码

写博客的心情有些不爽

所以还是先来张 gif 图放松一下心情!

Canvas 画曲线

一言不合就开车!

Canvas 画曲线

认识主角

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962 年,法国数学家 Pierre Bézier 第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。

二次贝塞尔曲线

这里我不说计算公式,只要知道贝塞尔曲线是一条由起始点、终止点和控制点所确定的曲线就行了。而 n 次贝塞尔曲线就有 n-1 个控制点。
画线之前要指定起点坐标,通过 moveTo(x,y)来制定,x 就是起点的 x 坐标,y 同理。
quadraticCurveTo(cpx,cpy,x,y)  cpx,cpy 表示控制点的坐标, x,y 表示终点坐标;
来一张炫酷的图表示一下:
Canvas 画曲线
它的这几个点计算比较麻烦,所以有一个界面转换器
点击这里瞬移过去
界面如下,这 3 个点可以拖动(左边是起始点,中间是控制点,右边是结束点),右侧就是生成的代码,我们可以直接复制过来使用!
Canvas 画曲线

三次贝塞尔曲线

这个方法可谓是绘制波浪线的神器。根据之前的结论,n 次贝塞尔曲线就有 n-1 个控制点,所以三次贝塞尔曲线有 1 个起始点、1 个终止点、2 个控制点。因此传入的 6 个参数分别为控制点 cp1 (cp1x, cp1y),控制点 cp2 (cp2x, cp2y),与终止点 (x, y)。
同样的需要起始点坐标,通过 moveTo(x,y)来制定,x 就是起点的 x 坐标,y 同理
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  //cp1x,cp1y 表示第一个控制点的坐标, cp2x,cp2y 表示第二个控制点的坐标, x,y 表示终点的坐标。
直接上图:
Canvas 画曲线
界面转换器
点击这里瞬移过去
界面如下,这 3 个点可以拖动(1 是起始点,2,3 是控制点,4 是结束点),右侧就是生成的代码,我们可以直接复制过来使用!
Canvas 画曲线

大概的概念就介绍完了!接下来才是重头戏!

如何画动态的曲线?

如果大家认真的读了上面的介绍,那应该画个曲线不难,就在那个界面转换器上拖拖拽拽弄好然后复制代码就 OK,然而我们实际需求不可能都是固定的值,就比如我最近遇到了一个需求,设计 MM 设计了一个曲线的样式。如图:(感觉前端好难啊)
Canvas 画曲线
看着图,比如起始点从柱子的顶部开始,往左边画,结束点在最下面的那条线上。
这种情况:起始点不确定,控制点不确定,结束点不确定,你说那个界面控制器有卵用。
然后我就开始百度看看有没有什么办法,结果并没有,有一个想法就是算比例。(然后由于一些问题没去实现)后来请教了下同事,同事给了个思路。
Canvas 画曲线
大概就是用三角函数算一下。这个如果看图理解不了的话,可以自己在本子上画一张图,或者自己用写一个demo。比较好理解。
最后设计 MM 说这个太丑 :arrow: ,不能。(感觉头大)。
最后还是用了那个算比例的方法:
没有角度了。
第一个控制点的 Y 坐标是和起始点的 Y 坐标一样,X 坐标呢就是结束点的 X 坐标和起始点 X 坐标总距离的 1/3。(一个是宽)
第二个控制点的 X 坐标和结束点的 X 坐标一样,Y 坐标就是结束点的 Y 坐标和起始点 Y 坐标总距离的 2/3。(一个是高)
用那个界面转换器,手动调试出来一个曲线,然后算一下比例。如图:
Canvas 画曲线
这个应该好理解多了。最后我加了一些效果。还有我不是用原生 Canvas 做的,使用一个库:CreateJS 做的,所以源代码可能会看不懂(大神无视),欣赏一下就好了,主要搞清楚这个画曲线的方法,这个方法实用性我也没测,如果你们有什么好的方法,欢迎交流!
曲线效果


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Canvas 画曲线
喜欢 (21)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 。。。
    1102016-08-10 00:41 回复 Windows 10 | Chrome 52.0.2743.82
  2. 不错,不过看这个轨迹跟半个抛物线也很像,有时间按抛物线的轨迹画个看看;
    花满楼2016-08-06 03:00 回复 Windows 7 | Chrome 47.0.2526.80
  3. 66666
    VK2016-08-06 01:26 回复 Windows 10 | Chrome 50.0.2661.102