关于Cocos2d-x 3.x 版本的绘图方法有两种:
1、使用DrawNode类绘制自定义图形。
2、继承Layer类重写draw()方法。
以上两种方法都可以绘制自定义图形，根据自己的需要选择合适的方法，这里我们只讨论第一种方法，第二种方法涉及到opengl的知识，暂不讨论。
我们先来简单的看看DrawNode提供的API接口：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
class CC_DLL DrawNode : public Node{ public: //初始化一个DrawNode对象，然后被addChild添加进去就ok了 static DrawNode* create(); //画实心圆，参数分别是圆心位置、圆半径、圆填充颜色，如果要画空心圆，就把圆当多边形画(这个多边形点数很多而已) void drawDot(const Vec2 &pos, float radius, const Color4F &color); //画线段，从from到to，2*radius是线段的宽度和radius是线段两头半圆形的半径 void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color); //画多边形，verts为点集，count为点数，fillColor为填充颜色，borderWidth为边缘线宽，borderColor为边缘线颜色 void drawPolygon(Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor); //画三角形，三人顶点及其填充色 void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color); //画三次贝塞尔曲线 void drawCubicBezier(const Vec2& from, const Vec2& control1, const Vec2& control2, const Vec2& to, unsigned int segments, const Color4F &color); //画二次贝塞尔曲线 void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color); /** Clear the geometry in the node's buffer. */ void clear(); /** * @js NA * @lua NA */ const BlendFunc& getBlendFunc() const; /** * @code * When this function bound into js or lua,the parameter will be changed * In js: var setBlendFunc(var src, var dst) * @endcode * @lua NA */ void setBlendFunc(const BlendFunc &blendFunc); void onDraw(const Mat4 &transform, uint32_t flags); // 新的绘图渲染函数 virtual void draw(Renderer *renderer, const Mat4 &transform, uint32_t flags) override; CC_CONSTRUCTOR_ACCESS: DrawNode(); virtual ~DrawNode(); virtual bool init(); protected: void ensureCapacity(int count); GLuint _vao; GLuint _vbo; int _bufferCapacity; GLsizei _bufferCount; V2F_C4B_T2F *_buffer; BlendFunc _blendFunc; CustomCommand _customCommand; bool _dirty; private: CC_DISALLOW_COPY_AND_ASSIGN(DrawNode);}; |
看完上面的API接口后，下面使用起来实在是太方便了。使用DrawNode 类绘制图形是最简单的方法，create一个DrawNode类，然后添加进场景。然后就可以愉快的绘图了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
//创建DrawNode对象DrawNode *drawNode = DrawNode::create();//加入场景就OKthis->addChild(drawNode, 20);//画实心圆drawNode->drawDot(Vec2(100, 100), 50, Color4F(0.5,0.6,0,1));//画线段drawNode->drawSegment(Vec2(100,100), Vec2(100,220), 0.5, Color4F(0,1,0,1));// 画多边形Vec2 points[] = { Vec2(s.height/4, 10), Vec2(s.width - 10, s.height/5), Vec2(s.width/3*2,s.height) };drawNode->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(1,0,0,0.5), 2, Color4F(0,0,1,1));// 画三角形drawNode->drawTriangle(Vec2(10, 10), Vec2(70, 30), Vec2(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));// 画二次贝塞尔曲线drawNode->drawQuadraticBezier(Vec2(s.width - 150, s.height - 150), Vec2(s.width - 70, s.height - 10), Vec2(s.width - 10, s.height - 10), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));// 画三次贝塞尔曲线 draw->drawCubicBezier(Vec2(s.width - 250, 40), Vec2(s.width - 70, 100), Vec2(s.width - 30, 250), Vec2(s.width - 10, s.height - 50), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5)); |
基本用法就是这么简单，如果需要别的形状，自己组合DIY。