关于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

cocos2d-x 3.2 DrawNode 绘图API的更多相关文章

  1. Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  2. Html5 学习系列(五)Canvas绘图API快速入门(1)

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  3. 引言:Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  4. AS3.0绘图API

    AS3.0绘图API: /** * * *-------------------* * | *** 绘图API *** | * *-------------------* * * 编辑修改收录:fen ...

  5. PyQt5绘图API

    PyQt5绘图API大全1.绘图API:绘制文本#1.文本 2.各种图形 3.图像#QPainter painter=QPainter() painter.begin() painter.end() ...

  6. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  7. Cocos2d-x 3.2学习笔记(三)学习绘图API

    关于cocos2d-x 3.2 版本的绘图方法有两种 1.使用DrawNode类绘制自定义图形. 2.继承Layer类重写draw()方法. 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适的 ...

  8. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  9. canvas 绘图api的位置问题

    很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 通常我们会习惯性地在js中通过c ...

随机推荐

  1. hibernate自动生成映射文件

    映射文件是O/R Mapping的关键,相当于控制中心.当数据库表较多时,手动配置该映射文件非常耗时.为了快速开发程序,使开发人员的注意力集中到业务逻辑上来,Hibernate官方提供的MiddleG ...

  2. 【转+分析】JAVA: 为什么要使用"抽象类"? 使用"抽象类"有什么好处?

    老是在想为什么要引用抽象类,一般类不就够用了吗.一般类里定义的方法,子类也可以覆盖,没必要定义成抽象的啊. 看了下面的文章,明白了一点. 其实不是说抽象类有什么用,一般类确实也能满足应用,但是现实中确 ...

  3. R语言将5位数字日期转为正常日期

    R语言中用double表示日期,即从1970-1-1距离给定日期的天数,将5位数字日期转为正常日期格式的方法 as.Date(16543,origin='1970-1-1')

  4. 【笨嘴拙舌WINDOWS】设备无关图(*.bmp)

    设备无关图在windows上面就是一个扩展名为.bmp的文件.我们知道每一种文件都是一个二进制流,只是这个二进制流的开头几个字节是规定了文件的格式..bmp的文件格式如下 “其中信息头是windows ...

  5. HDU 2147 (博弈) kiki's game

    无奈英语不好又被坑,看到棋子能左移下移左下移,想当然地以为是Wythoff博弈了,=u= 题的意思是说每次只能选一个方向移动一步,所以找找规律就是横纵坐标为奇数的时候是必败状态. 从http://ww ...

  6. mysql 存储过程 事务; mysql的事务中包含一个存储过程

    在asp.net结合mysql的开发中,我平时用到的事务处理是 使用 TransactionOptions  来进行处理 TransactionOptions transactionOption = ...

  7. (转载)目前最细致清晰的NSDictionary以及NSMutableDictionary用法总结

    文章转载自:http://www.cnblogs.com/wengzilin/archive/2012/03/15/2397712.html 做过Java语言 或者 C语言 开发的朋友应该很清楚 关键 ...

  8. BZOJ 3624 免费道路

    第一反应:这不先0后1做并查集就行了吗? 然后WA了... 哦....啊?哦...233 如果按顺序做并查集,有些0的边可能很重要(只能由它作为0连起两个联通块),但并没有被选. 于是先按1做并查集, ...

  9. HDU5463 Clarke and minecraft

    解题思路:此题刚开始,觉得好繁琐,好混乱,理清思路后,发现很简单.   具体见代码分析. #include<cstdio> #include<cstring> #include ...

  10. 【英语】Bingo口语笔记(5) - 英式和美式英语的发音区别