cocos2d-x 3.2 DrawNode 绘图API

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