当前位置：首页 → 问答吧 → 给定三个点，如何用贝塞尔曲线连接起来

给定三个点，如何用贝塞尔曲线连接起来

时间：2011-07-19

来源：互联网

问题是这样，目前正在学习HTML5，想用其写一个简单折线图。
如果用直线连接这些点的话，会比较生硬，很难看。想用平滑
曲线将其连接起来。看了下，好像HTML5的API中有两个函数可以
用：quadraticCurveTo（cpx, cpy, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

想问下，在已知3个点的情况下，如何求出控制点的坐标呢，
使曲线能够经过中间点？请大家给个思路，或给介绍下相关
资料。

作者: xingqiliudehuanghun 发布时间: 2011-07-19

要经过这三个点有点难度。
一般是作为控制点绘制bezier

作者: dizuo 发布时间: 2011-07-19

引用 1 楼 dizuo 的回复:

要经过这三个点有点难度。
一般是作为控制点绘制bezier

起点和终点是已知的，只需要求控制点就可以了，使其能够经过起点和终点之外
的另一点。这个应该是可以实现的，有不少图表控件都提供了spline图。

作者: xingqiliudehuanghun 发布时间: 2011-07-19

引用 2 楼 xingqiliudehuanghun 的回复:

引用 1 楼 dizuo 的回复:

要经过这三个点有点难度。
一般是作为控制点绘制bezier

起点和终点是已知的，只需要求控制点就可以了，使其能够经过起点和终点之外
的另一点。这个应该是可以实现的，有不少图表控件都提供了spline图。

恩 bezier 过起点，终点。
三次bezier控制点有四个：p0, p1, p2, p3。
现在已知起点：p0, 终点：p3,
可以这么求p1, p2:
p1 = p0;
p2 = p3;
p1.x = (p3.x + p0.x) * 0.5f;
p2.x = (p3.x + p0.x) * 0.5f;
这样构造出的bezier 恰好落在以p0, p3为两个对角点的矩形中。

作者: dizuo 发布时间: 2011-07-19

就是这种bezier效果：
http://www.blender.org/typo3temp/pics/6f8b4e1a47.jpg

作者: dizuo 发布时间: 2011-07-19

谢谢楼上的高手的耐心解答，但好像不是我要的效果，我要的其实是这个篇文章中
提到的效果：http://scaledinnovation.com/analytics/splines/aboutSplines.html
但那篇文章中控制点的计算部分不是很明白，所以想另外找点资料。

作者: xingqiliudehuanghun 发布时间: 2011-07-19

恩。这个是bezier曲线多段拼接，QT中也有。
我原来用opengl实现过，交互方式类似photoshop中的钢笔路径工具。
一段绘制：http://blog.csdn.net/dizuo/article/details/4575913
多段拼接：http://blog.csdn.net/dizuo/article/details/4728785

作者: dizuo 发布时间: 2011-07-19

给定三个点，如何用贝塞尔曲线连接起来

热门阅读

热门下载