cocos2d-x-3.0学习笔记之贝塞尔曲线

原创 2016年08月30日 22:26:25

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
在cocos中,要实现贝塞尔曲线十分简单,因为引擎已经帮我门封装好了。下面就用贝塞尔曲线来做出精灵在固定范围类来回曲线运动的效果

void raise()
{
    if (m_status == FLY_RIGHT)
        m_status = FLY_LEFT;
    else
        m_status = FLY_RIGHT;
    updateItem();
    //运动曲线
    //定义贝塞尔曲线
    //给贝塞尔曲线所需要的峰值设立随机坐标值
    cfg.controlPoint_1 = ccp(CCRANDOM_0_1() * m_offsetH,
        CCRANDOM_0_1() * m_offsetV);
    cfg.controlPoint_2 = ccp(CCRANDOM_0_1() * m_offsetH,
        CCRANDOM_0_1() * m_offsetV);
    cfg.endPosition = ccp(m_offsetH, m_offsetV);
    //创建贝塞尔曲线运动
    BezierBy *raise = BezierBy::create(m_duration, cfg);
      //创建回掉函数,可以看作一个运动,当贝塞尔曲线运动执行完毕之后调用
    auto callBackFunc = [&]()
    {
         //调用贝塞尔曲线返回的的函数
        fall();
    };
    auto action2 = CallFunc::create(callBackFunc);
    runAction(Sequence::createWithTwoActions(raise, action2));
}

void fall()
{
    if (m_status == FLY_RIGHT)
        m_status = FLY_LEFT;
    else
        m_status = FLY_RIGHT;
    updateItem();
    //运动曲线
    ccBezierConfig cfg;
    cfg.controlPoint_1 = ccp(-CCRANDOM_0_1() * m_offsetH,
        -CCRANDOM_0_1() * m_offsetV);
    cfg.controlPoint_2 = ccp(-CCRANDOM_0_1() * m_offsetH,
        -CCRANDOM_0_1() * m_offsetV);
    cfg.endPosition = ccp(-m_offsetH, -m_offsetV);
    BezierBy *fall = BezierBy::create(m_duration, cfg);
    auto callBackFunc = [&]()
    {
        //调用贝塞尔曲线运动的函数
        raise();
    };
    auto action2 = CallFunc::create(callBackFunc);
    runAction(Sequence::createWithTwoActions(fall, action2));

}

这样就简单实现了一个精灵在一个固定的范围内做贝塞尔曲线运动了

SVG 贝塞尔曲线学习一

用一个简单的三次贝塞尔曲线来做例子: 指令C如下图 简易三次贝塞尔曲线 ...
  • aniaocool
  • aniaocool
  • 2017年05月16日 15:15
  • 297

两张图教你使用二三阶贝塞尔曲线

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生化。 1962年,法国数学家Pierre...
  • DylanZhuang
  • DylanZhuang
  • 2016年07月13日 11:32
  • 6401

贝塞尔曲线的计算方式与js计算

这篇文章可能偏一点,用到了一些线性代数的知识,但是在网上发现有人在问这方面的问题用js如何实现,于是这里就顺带讨论一下贝塞尔曲线以及我的一个实现方式.我的实现只提供数据接口,只有用什么方式来展现这些数...
  • cdnight
  • cdnight
  • 2015年09月15日 15:58
  • 4736

三次贝塞尔曲线画圆的方法。

上一篇说的仿58同城loadingview的项目,中有一个利用贝塞尔曲线进行绘制圆的步骤,这个贝塞尔曲线理论挺复杂,特此单独说一下所知的和能用到的。 比如上一个loadingView的项目中,要用到...
  • serapme
  • serapme
  • 2015年07月20日 10:26
  • 9002

html5-canvas3-二次贝塞尔曲线和三次贝塞尔曲线以及canvas的渐变

以前不知道二次贝塞尔曲线和三次贝塞尔曲线,学习canvas时,canvas提供了两个方法来绘制这两条陌生的线。偶也是初次了解,不知道什么地方将来会用到,先分享了再说: 和以前一样,先建个canvas标...
  • wo1aijava
  • wo1aijava
  • 2014年01月14日 17:59
  • 1656

WPF将点列连接成光滑曲线——贝塞尔曲线

背景     最近在写一个游戏场景编辑器,虽然很水,但是还是遇到了不少问题。连接离散个点列成为光滑曲线就是一个问题。主要是为了通过关键点产生2D的赛道场景。总之马路不可能是直线相连的,当然需要曲线光...
  • huyu107
  • huyu107
  • 2015年04月14日 16:38
  • 3446

Android进阶之自定义View实战(三)贝塞尔曲线应用

Android进阶之自定义View实战(三)贝塞尔曲线应用一、引言在自定义View中,常常看到这样一些非常规的UI效果,如水滴、心型、水波、仿真书页翻动、弹射床等效果,这里面都包含一个重要的要素:贝塞...
  • u012723976
  • u012723976
  • 2016年06月29日 18:16
  • 2133

Qt绘制贝塞尔曲线例程

main.cpp [cpp] view plain copy #include    #include "mywidget.h"      i...
  • yansmile1
  • yansmile1
  • 2016年08月29日 10:31
  • 828

史上最全的贝塞尔曲线(Bezier)全解(一):初识贝塞尔曲线

作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了; 最近一段时...
  • sangxiaonian
  • sangxiaonian
  • 2016年07月21日 16:20
  • 2319

三阶贝塞尔曲线一分为二的一般公式

三阶贝塞尔曲线被广泛用于各种需要平滑曲线的设计领域,一般通过多段三阶贝塞尔曲线顺次连接,构成复杂贝塞尔曲线。 每一段三阶贝塞尔曲线由均由两个端点和两个句柄点,一共四个控制点进行控制,其中每个控制点的改...
  • nibiewuxuanze
  • nibiewuxuanze
  • 2015年09月06日 01:59
  • 7101
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x-3.0学习笔记之贝塞尔曲线
举报原因:
原因补充:

(最多只允许输入30个字)