cocos2dx 曲线轨道

在Cocos2d-x引擎开发中，通过其提供的类可以很方便的利用贝塞尔曲线动画，例如调用CCBezierBy和CCBezierTo。不过，通常有个比较麻烦的地方，即开发者难以直观预想贝塞尔曲线的最终样子，只能通过改变程序中的4个坐标点来控制显示并观察效果。因此，本文实现了一个简单的可视化小工具，用于观察具体的贝塞尔曲线效果。

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

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

贝塞尔曲线是应用于二维图形应用程序的数学曲线。该曲线的定义涉及四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。当滑动这两个中间点时，贝塞尔曲线的形状会发生变化。在Cocos2d-x中，默认起始点就是当前精灵的位置，所以通常只需在贝塞尔动画的配置中设定其他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. 代码实现

在实现过程中，主要分为两部分：一部分是描绘曲线，另一部分是拖拽控制曲线。

描绘曲线

通过重写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的触摸事件来进行控制，使用了以下方法：

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就实现了。