当前位置:Gxlcms > mysql > cocos2d-x3.2DrawNode绘图API

cocos2d-x3.2DrawNode绘图API

时间:2021-07-01 10:21:17 帮助过:24人阅读

关于Cocos2d-x 3.x 版本的绘图方法有两种: 1、使用DrawNode类绘制自定义图形。 2、继承Layer类重写draw()方法。 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适的方法,这里我们只讨论第一种方法,第二种方法涉及到opengl的知识,暂不讨论。 我

关于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();

//加入场景就OK

this->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。


来源网址:http://blog.csdn.net/ac_huang/article/details/39522473

人气教程排行