贝塞尔曲线解析-Cocos2dx 01

数学数值分析领域中,贝塞尔曲线英语:Bézier curve)是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例。

贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。

线性贝塞尔曲线[编辑]

给定点P0P1,线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出:

且其等同于线性插值

线性贝塞尔曲线函数中的t会经过由P0P1Bt)所描述的曲线。例如当t=0.25时,Bt)即一条由点P0P1路径的四分之一处。就像由0至1的连续tBt)描述一条由P0P1的直线。

二次方贝塞尔曲线[编辑]

二次方贝塞尔曲线的路径由给定点P0P1P2的函数Bt)追踪:

TrueType字型就运用了以贝塞尔样条组成的二次贝塞尔曲线。

为建构二次贝塞尔曲线,可以中介点Q0Q1作为由0至1的t

  • P0P1的连续点Q0,描述一条线性贝塞尔曲线。
  • P1P2的连续点Q1,描述一条线性贝塞尔曲线。
  • Q0Q1的连续点Bt),描述一条二次贝塞尔曲线。
  •           

三次方贝塞尔曲线[编辑]

       P0P1P2P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1P2;这两个点只是在那里提供方向资讯。P0P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。

曲线的参数形式为:

现代的成象系统,如PostScriptAsymptoteMetafont,运用了以贝塞尔样条组成的三次贝塞尔曲线,用来描绘曲线轮廓。

       

对于四次曲线,可由线性贝塞尔曲线描述的中介点Q0Q1Q2Q3,由二次贝塞尔曲线描述的点R0R1R2,和由三次贝塞尔曲线描述的点S0S1所建构:

    

程式范例

曲线的计算可在曲线阵列上将相连点画上直线——点越多,曲线越平滑。

在部分架构中,下以程式码也可由动态规划进行最优化。举例来说,dt是一个常数,cx * t则等同于每次反复就修改一次常数。经反复应用这种最优化后,循环可被重写为没有任何乘法(虽然这个过程不是稳定数值的)。

/*
 产生贝塞尔曲线的算法
*/
 typedef struct{
    float x;
    float y;}Point2D;
 /*
  cp 在此是四个元素的数组: 
  cp[0] 为起点,或上图中的 P0 
  cp[1] 为第一控制点,或上图中的 P1 
  cp[2] 为第二控制点,或上图中的 P2 
  cp[3] 为结束点,或上图中的 P3 
  t 为参数值,0 <= t <= 1
*/
 Point2D PointOnCubicBezier( Point2D* cp, float t ){
    float   ax, bx, cx;
    float   ay, by, cy;
    float   tSquared, tCubed;
    Point2D result;
 
    /*计算多项式系数 */
 
    cx = 3.0 * (cp[1].x - cp[0].x);
    bx = 3.0 * (cp[2].x - cp[1].x) - cx;
    ax = cp[3].x - cp[0].x - cx - bx;
 
    cy = 3.0 * (cp[1].y - cp[0].y);
    by = 3.0 * (cp[2].y - cp[1].y) - cy;
    ay = cp[3].y - cp[0].y - cy - by;
 
    /*计算t位置的点值*/
 
    tSquared = t * t;
    tCubed = tSquared * t;
 
    result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
    result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
 
    return result;}
 /* ComputeBezier 以控制点 cp 所产生的曲线点,填入 Point2D 结构数组。 
    调用方必须分配足够的空间以供输出,<sizeof(Point2D) numberOfPoints>>
*/
 void ComputeBezier( Point2D* cp, int numberOfPoints, Point2D* curve ){
    float   dt;
    int    i;
 
    dt = 1.0 / ( numberOfPoints - 1 );
 
    for( i = 0; i < numberOfPoints; i++)
        curve[i] = PointOnCubicBezier( cp, i*dt );}

在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。

如果已知一条曲线的参数方程,系数都已知,并且两个方程里都含有一个参数t,它的值介于0、1之间,表现形式如下所示:
x(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0
y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0

由于这条曲线的起点(x0,y0)是已知的,我们可以用以下的公式来求得剩余三个点的坐标:
x1 = x0 + cx / 3
x2 = x1 + ( cx + bx ) / 3
x3 = x0 + cx + bx + ax

y1 = y0 + cy / 3
y2 = y1 + ( cy + by ) / 3
y3 = y0 + cy + by + ay

仔细观察一下就知道了,无论方程的已知和所求是什么,总是有六个未知数,并且我们总能找到六个等式(记住(x0,y0)总是已知的),也就是说,上面的方法是完全可逆的,因此我们可以根据四个已知点坐标来反求曲线参数公式的系数。稍微一变换就得到了下面这组公式:
cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx

cy = 3 * ( y1 - y0 )
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by

所以说,对于坐标任意的四个已知点,你总能创建一条贝塞尔曲线,?这样在逻辑判断及使用中就可以创建自己所需的贝塞尔曲线效果。

参考:

http://zh.wikipedia.org/wiki/貝茲曲線

http://blog.chinaunix.net/uid-20622737-id-3161025.html

时间: 2024-10-02 21:08:43

贝塞尔曲线解析-Cocos2dx 01的相关文章

【Cocos2d-x】使用贝塞尔曲线(Bezier)实现精灵抛物线运动

Cocos2d-x中的贝塞尔曲线 在Cocos2d-x中贝塞尔曲线运动的封装类为CCBezierTo和CCBezierBy. 这两个Action都需要传入一个参数ccBezierConfig,这是一个结构体,这个结构体有三个字段 1.CCPoint endPosition:结束点 2.CCPoint controlPoint_1:控制点1 3.CCPoint controlPoint_2:控制点2 两个控制点的会影响曲线的变化趋势. Cocos2d-x中贝塞尔曲线运动的实现是二次曲线. 曲线的每

【开源项目解析】QQ“一键下班”功能实现解析——学习Path及贝塞尔曲线的基本使用

早在很久很久以前,QQ就实现了"一键下班"功能.何为"一键下班"?当你QQ有信息时,下部会有信息数量提示红点,点击拖动之后,就会出现"一键下班"效果.本文将结合github上关于此功能的一个简单实现,介绍这个功能的基本实现思路. 项目地址 https://github.com/chenupt/BezierDemo 最终实现效果 实现原理解析 我个人感觉,这个效果实现的很漂亮啊!那么咱们就来看看实现原理是什么~ 注:下面内容请参照项目源码观看. 其

cocos2d-x 贝塞尔曲线的简单运用(CCBezierTo,CCBezierBy)

原文链接:http://blog.csdn.net/we000636/article/details/8616355 一.贝赛尔曲线简单介绍 贝塞尔曲线是应用于二维图形应用程序的数学曲线.曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点.滑动两个中间点,贝塞尔曲线的形状会发生变化 图1 p0起点,p3是终点,p1,p2是控制点 http://en.wikipedia.org/wiki/B%C3%A9zier_curve 贝兹曲线的描写叙述结构体例如以下: /** @type

贝塞尔曲线代码

调用类 using UnityEngine; [System.Serializable] public class Bezier : System.Object { public Vector3 p0; public Vector3 p1; public Vector3 p2; public Vector3 p3; public float ti = 0f; private Vector3 b0 = Vector3.zero; private Vector3 b1 = Vector3.zero;

沿着贝塞尔曲线做动画

效果图如下: 源码: // // RootViewController.m // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end @impleme

在Unity中使用贝塞尔曲线(转)

鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是起点,一个是终点.在这条曲线之上还会有两个可以任意移动的点来控制贝塞尔曲线的角度.如下图所示,点1 和点4 就是起点和终点,点2 和点3 就是控制曲线角度的两个动态点. 如下图所示.使用拖动条来让曲线发生旋转,大家会看的更加清晰.目前我们看到的被塞尔曲线是在平面中完成的,其实贝塞尔曲线是完全 支持3

贝塞尔曲线的使用

什么是贝塞尔曲线 它主要用在Andorid中某些自定义VIew的时候需要绘制某些曲线.它只要有些名词介绍: 数据点:通常指一条路径的起始点和终止点 控制点:控制点决定可一条路径的弯曲轨迹,根据控制的点的个数,贝塞尔曲线被分为一阶贝塞尔曲线(0个控制点).二阶贝塞尔曲线(1个控制点).三阶贝塞尔曲线(2个控制点) 在平时开发中主要掌握二阶和三阶贝塞尔曲线 二阶贝塞尔曲线 由上图看,P0是起点,P2是终点.P1是控制点,t是一个系数,表示从0-1的变化过程,红色的线就是最终画出的曲线.其中主要是用到

【转】三次贝塞尔曲线绘制算法

原文:http://www.cnblogs.com/flash3d/archive/2012/01/30/2332176.html 源码:http://files.cnblogs.com/flash3d/bezier.rar ==================================================== 这学期学图形学,就把自己的一些粗浅的理解发上去让大家拍砖.前些天做三次贝塞尔曲线绘制的上机练习,正好将从直线扫描算法中启发得来的n次多项式批量计算用上了,自认为优化得还

Android 利用二次贝塞尔曲线模仿购物车添加物品抛物线动画

0.首先,先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式参考:http://www.jianshu.com/p/c0d7ad796cee 作者:许方镇. 2.原理:计算被点击 view.购物车view 以及他们所在父容器相对于屏幕的坐标. 3.在呗点击View坐标位置 父容器通过addView 增加需要完成动画的imgview. 4.自定义估值器 通过二次贝塞尔曲线公式(2个数据点,一个控制点)完成抛物线路径上的点xy坐标计算. 5.利用属性动画 +自定义估值器 完成imgview在父容