cocos2dx 绘图

在 Cocos2d-x 中，绘图功能是如何实现的呢？今天我们就来深入学习一下，希望大家在学完之后能够掌握相关技巧。

绘图基础操作及函数

1. 设置绘制颜色

ccDrawColor4B("红", "绿", "蓝", "透明");

此函数用于设置绘制颜色，其中红、绿、蓝、透明度的满值均为 255。

2. 设置绘制线宽

glLineWidth(线条宽度);

该函数可设置绘制线条的宽度。

3. 绘制一条直线

ccDrawLine("起点坐标", "终点坐标");

用于绘制从起点坐标到终点坐标的一条直线。

4. 设置点的大小

ccPointSize("半径");

此函数可设置点的大小，参数为点的半径。

5. 绘制一个点

// 绘制单个点
ccDrawPoint("点的坐标");
// 绘制多个点
ccDrawPoints("点的坐标数组", "数量");

6. 绘制一个圆形

// 完整参数版本
ccDrawCircle("中心点坐标", "半径f", "角度f", "分段数", "显示半径", "X轴放大倍数f", "Y轴放大倍数f");
// 简化参数版本
ccDrawCircle("中心点坐标", "半径f", "角度f", "分段数", "显示半径");

7. 绘制空心多边形

ccDrawPoly("顶点数组", "点数量", "是否自动封闭");

该函数根据顶点数组和点的数量绘制空心多边形，“是否自动封闭”参数决定多边形是否首尾相连。

8. 绘制实心多边形

ccDrawSolidPoly("顶点数组", "点数量", "颜色4F");

用于绘制实心多边形，需要指定顶点数组、点的数量和颜色。

9. 绘制填充矩形

ccDrawSolidRect("对角顶点1", "对角顶点2", "颜色4F");

根据两个对角顶点和颜色绘制填充矩形。

10. 绘制空心矩形

ccDrawRect("对角顶点1", "对角顶点2");

根据两个对角顶点绘制空心矩形。

11. 绘制平面贝赛尔曲线

ccDrawQuadBezier("起始点", "控制点", "结束点", "分段数");

用于绘制平面贝赛尔曲线，需要指定起始点、控制点、结束点和分段数。

12. 绘制立体贝赛尔曲线

ccDrawCubicBezier("起始点", "控制点1", "控制点2", "结束点", "分段数");

用于绘制立体贝赛尔曲线，需要指定起始点、两个控制点、结束点和分段数。

颜色设置函数

// 以字节为单位设置颜色，红、绿、蓝、透明满值均为 255
ccDrawColor4B("红f", "绿f", "蓝f", "透明f");
// 以浮点数为单位设置颜色，红、绿、蓝满值为 255，透明满值为 1
ccDrawColor4F("红f", "绿f", "蓝f", "透明f");

示例代码

以下是一个完整的 HelloWorld::draw() 函数示例，展示了如何使用上述绘图函数：

void HelloWorld::draw()
{
// 获取窗口大小
CCSize size = CCDirector::sharedDirector()->getWinSize();

// 设置颜色
ccDrawColor4B(255, 0, 255, 0);
// 设置宽度
glLineWidth(3);
// 绘制一条直线 起点到终点的位置
ccDrawLine(ccp(0, 0), ccp(size.width * 0.5, size.height * 0.5));

ccDrawColor4B(225, 255, 0, 0);
// 设置像素尺寸
ccPointSize(20);
// 绘制一个点
ccDrawPoint(ccp(size.width * 0.5, size.height * 0.5));

ccDrawColor4B(0, 25, 255, 0);
// 绘制圆形
ccDrawCircle(ccp(size.width * 0.5, size.height * 0.5), 50, CC_DEGREES_TO_RADIANS(90), 50, false);
ccDrawCircle(ccp(size.width * 0.5, size.height * 0.5), 50, CC_DEGREES_TO_RADIANS(45), 6, false);

ccDrawColor4B(225, 0, 0, 0);
glLineWidth(5);
// 绘制多边形
CCPoint ve[] = {
ccp(70, 150), ccp(150, 150), ccp(100, 200)
};
ccDrawPoly(ve, 3, true);

ccDrawColor4B(0, 0, 0, 255);
// 绘制填充的多边形
CCPoint vi[] = {
ccp(0, 120), ccp(50, 120), ccp(50, 170), ccp(25, 200)
};
ccDrawSolidPoly(vi, 4, ccc4f(0.5f, 0.5f, 1, 1));

ccDrawColor4B(0, 0, 255, 100);
// 绘制贝塞尔曲线
ccDrawQuadBezier(ccp(0, size.height), ccp(size.width * 0.5, size.height * 0.5), ccp(size.width, size.height), 50);
// 绘制立体的贝塞尔曲线
ccDrawCubicBezier(ccp(size.height * 0.5, size.height * 0.5), ccp(size.width + 20, size.height), ccp(size.width + 20, size.height + 60), ccp(size.width, size.height), 50);

// 绘制填充矩形
ccDrawSolidRect(ccp(240, 50), ccp(300, 10), ccc4f(0, 177, 177, 255));
// 绘制空心矩形
ccDrawRect(ccp(30, 130), ccp(20, 20));
}

通过以上内容，我们详细介绍了 Cocos2d-x 中的绘图功能，包括各种绘图函数的使用方法和示例代码。希望大家能够通过实践进一步掌握这些技巧。