说一说cocos2dx 曲线轨道之贝赛而曲线演示

通过Cocos2dx引擎提供的Class可以很方便的利用贝塞尔曲线动画(通过调用CCBezierBy CCBeZierTo)。 

不过通常有个比较麻烦的地方就是自己预想的贝塞尔曲线到底是什么样子的,只能通过改变程序中的4个坐标点来控制显示并观察效果。 
所以本片小结做了一个简单可视化的小工具来观察具体的贝塞尔曲线效果。

0.贝塞尔曲线相关的准备

a)贝塞尔曲线的简单介绍 

贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。在cocos2dx中默认起始点就是当前精灵的位置,所以通常只需要在贝塞尔动画的配置中设定其他3个点即可。 

b)贝塞尔曲线动画基本实现的简单说明 

ccBezierConfig config;
config.endPosition=ccp(280, 240);
config.controlPoint_1=ccp(40, 400);
config.controlPoint_2=ccp(280, 80);
CCActionInterval* bezierForward = CCBezierBy::create(1.f, config);

1. 贝塞尔曲线demo的实现效果

让我们先看来一下在本demo中实现的基本效果图。可以通过拖动贝塞尔曲线的4个点,来实现动态调整贝塞尔曲线功能。 

2. 代码实现

在实现过程中主要是2部分,一部分是描绘曲线,一部分是拖拽控制曲线 
描绘曲线 
用的是重写CCLayer::draw方法,来实现绘制具体的曲线和控制点。 

//设定线宽
glLineWidth(4.0f);
//设定点的大小
ccPointSize(4);
//描画一个红色的贝塞尔曲线
ccDrawColor4B(255, 0, 0, 255);
ccDrawCubicBezier( ccp(100,100), ccp(300,150), ccp(250,50), ccp(350,100), 12);

实际代码示例 

控制曲线 
实际代码中增加了4个点的坐标,控制曲线部分就是通过拖动改变某个点的坐标,实现动态重绘该曲线的功能。 
主要还是CCLayer的touch事件来进行控制,用到了如下的方法。 

bool ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
void ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);
void ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);

ccTouchBegan用来判定是否选中了某个控制点。如果是选中了某个点,返回true,其他返回false。 
ccTouchMoved在选中某个控制点的情况下,通过手指滑动的位置动态调整对应动态点的位置坐标。 
ccTouchEnded拖动完毕后,恢复选取点的信息到为点选状态。 


实现代码如下图 

经过上述操作后,一个简单的可控制并动态显示的贝塞尔曲线demo实现了。