cocos2dx[3.2](17)——简单绘图DrawNode

【唠叨】

    绘图的方式有两种：

    > 使用OpenGL的绘图原语DrawPrimitives。

    > 使用DrawNode。

    曾经在使用2.x版本的时候，学习过使用DrawPrimitives进行简单图形的绘制。

    OpenGL绘图原语DrawPrimitives，详见：http://shahdza.blog.51cto.com/2410787/1545462

    在本节中将学习使用DrawNode来进行图形的绘制。

【致谢】

    http://blog.csdn.net/ac_huang/article/details/39522473

    http://blog.csdn.net/conmajia/article/details/8543834 （贝塞尔曲线的原理）

【小知识】

    分段数         ：即绘制曲线一般都是通过绘制“样条曲线”来实现，而分段数即样条段数。

    二次贝塞尔曲线 ：起点终点之间的一条抛物线，利用一个控制点来控制抛物线的形状。

    三次贝塞尔曲线 ：起点终点之间，利用两个控制点来控制曲线的形状。

【v3.3】

    DrawNode ：添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。

    DrawPrimitives用法，参见：http://shahdza.blog.51cto.com/2410787/1545462

    对于v3.3新增的函数，参见本文最后的《附录》。函数用法将不做赘述，参见DrawPrimitives用法即可。

---

【DrawNode】

    DrawNode由于在一个单独的批处理中绘制了所以元素，因此它绘制点、线段、多边形都要比“drawing primitives”快。

    > 使用DrawPrimitives绘图原语绘制的图形，可以是实心的，也可以是空心的。

    > 使用DrawNode绘制的图形都是实心的。

1、使用方法

    创建一个DrawNode，然后加入到Layer布景层中，即可绘制各种形状的图形。

    使用方法如下：

1 2 3 4 5 6 7

//      //创建DrawNode，然后后加入到Layer层中      DrawNode* drawNode = DrawNode::create();      this ->addChild(drawNode);            //...基本图形绘制... //

2、基本图形绘制

    使用DrawNode来绘制图形，可以绘制如下几个图形。

    > 圆点           ：drawDot

    > 线段           ：drawSegment

    > 三角形         ：drawTriangle

    > 多边形         ：drawPolygon

    > 二次贝塞尔图形 ：drawQuadraticBezier

    > 三次内塞尔图形 ：drawCubicBezier

    注：绘制的图形都是实心的。

    使用方法如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//      //圆点      ('位置' , '圆点半径' , '填充颜色')      void  drawDot( const  Vec2 &pos,  float  radius,  const  Color4F &color);        //线段          ('起点' , '终点' , '半线宽' , '填充颜色')      void  drawSegment( const  Vec2 &from,  const  Vec2 &to,  float  radius,  const  Color4F &color);        //三角形         ('顶点1' , '顶点2' , '顶点3' , '填充颜色')      void  drawTriangle( const  Vec2 &p1,  const  Vec2 &p2,  const  Vec2 &p3,  const  Color4F &color);        //多边形        ('顶点数组' , '顶点个数' , '填充颜色' , '轮廓粗细' , '轮廓颜色')      void  drawPolygon(Vec2 *verts,  int  count,  const  Color4F &fillColor,  float  borderWidth,  const  Color4F &borderColor);        //二次贝塞尔图形        ('起点' , '控制点' , '终点' , '分段数' , '填充颜色')      void  drawQuadraticBezier( const  Vec2& from,  const  Vec2& control,  const  Vec2& to, unsigned  int  segments,  const  Color4F &color);            //三次贝塞尔图形    ('起点' , '控制点1' , '控制点2' , '终点' , '分段数' , '填充颜色')      void  drawCubicBezier( const  Vec2& from,  const  Vec2& control1,  const  Vec2& control2,  const  Vec2& to, unsigned  int  segments,  const  Color4F &color);   //

3、清除绘图缓存

    使用clear()，来清除之前使用drawNode画的所有图形。

1 2 3

//      drawNode->clear(); //

4、颜色混合方式

    使用setBlendFunc(const BlendFunc &blendFunc)，设置颜色混合的方式。

    详见：http://shahdza.blog.51cto.com/2410787/1547633

1 2 3 4

//      BlendFunc bl = { GL_ONE, GL_ONE };      drawNode->setBlendFunc(bl); //

5、空心多边形绘制

    使用DrawNode绘制的图形都是实心的，那么空心的怎么绘制呢？

    从绘制图形的函数可以看出：图形绘制的同时，需要设置图形的颜色Color4F，其中也包含了透明度的设置。所以只要控制图形内部的填充颜色Color4F的透明度为透明（值为0），即可绘制出一个空心的图形来。

    而能达到这种效果的，就只有多边形的绘制：drawPolygon 。

    使用举例：

        > Color4F(1, 0, 0, 0) ：红色透明

        > Color4F(1, 0, 0, 1) ：红色不透明

1 2 3 4 5 6 7 8 9 10 11 12

//      Vec2 point[4];      point[0] = Vec2(100, 100);      point[1] = Vec2(100, 200);      point[2] = Vec2(200, 200);      point[3] = Vec2(200, 100);            //绘制空心多边形      //填充颜色：Color4F(1, 0, 0, 0), 透明      //轮廓颜色：Color4F(0, 1, 0, 1), 绿色      drawNode->drawPolygon(point, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1)); //

---

【代码实战】

    > 圆点

    > 线段

    > 三角形

    > 实心多边形

    > 空心多边形

    > 二次贝塞尔图形

    > 三次贝塞尔图形

    > 颜色混合测试 { GL_ONE , GL_ONE}

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

//      //创建DrawNode      DrawNode* drawNode = DrawNode::create();      this ->addChild(drawNode);          //圆点      drawNode->drawDot(Vec2(50, 50), 10, Color4F::RED);          //线段      drawNode->drawSegment(Vec2(20, 100), Vec2(100, 100), 5, Color4F(0, 1, 0, 1));      drawNode->drawSegment(Vec2(20, 150), Vec2(100, 150), 10, Color4F(0, 0, 1, 1));          //三角形      drawNode->drawTriangle(Vec2(20, 250), Vec2(100, 300), Vec2(50, 200), Color4F(1, 1, 0, 1));          //实心多边形      Vec2 point1[4];      point1[0] = Vec2(150, 50);      point1[1] = Vec2(150, 150);      point1[2] = Vec2(250, 150);      point1[3] = Vec2(250, 50);      drawNode->drawPolygon(point1, 4, Color4F(1, 0, 0, 1), 1, Color4F(0, 1, 0, 1));        //空心多边形      Vec2 point2[4];      point2[0] = Vec2(150, 200);      point2[1] = Vec2(150, 300);      point2[2] = Vec2(250, 300);      point2[3] = Vec2(250, 200);      drawNode->drawPolygon(point2, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1));          //二次贝塞尔      Vec2 from1 = Vec2(300, 20);      Vec2 to1 = Vec2(450, 20);      Vec2 control = Vec2(360, 100);      drawNode->drawQuadraticBezier(from1, control, to1, 100, Color4F::ORANGE);        //三次贝塞尔      Vec2 from2 = Vec2(300, 100);      Vec2 to2 = Vec2(450, 100);      Vec2 control1 = Vec2(350, 0);      Vec2 control2 = Vec2(400, 200);      drawNode->drawCubicBezier(from2, control1, control2, to2, 100, Color4F::YELLOW);          //颜色混合测试      BlendFunc bl = { GL_ONE, GL_ONE };      drawNode->setBlendFunc(bl);            drawNode->drawSegment(Vec2(300, 250), Vec2(450, 250), 10, Color4F::GREEN);      drawNode->drawTriangle(Vec2(300, 200), Vec2(400, 300), Vec2(450, 150), Color4F::RED); //

    截图：

    分析：

    （1）可以看出，绘制的图形全部都是实心的。

    （2）绘制的线段两边端点是一个半圆，这是因为线段是通过圆点画出来的。

    （3）看到中间的两个矩形，一个是实心的，一个是空心的。

    （4）实心的贝塞尔图形，看起来好奇怪啊。

---

【附录】

    v3.3中添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。

    新增函数如下：

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

//      // 一个点、多个点      // 正方形小点      void  drawPoint( const  Vec2& point,  const  float  pointSize,  const  Color4F &color);      void  drawPoints( const  Vec2 *position, unsigned  int  numberOfPoints,  const  Color4F &color);      void  drawPoints( const  Vec2 *position, unsigned  int  numberOfPoints,  const  float  pointSize,  const  Color4F &color);        // 线      void  drawLine( const  Vec2 &origin,  const  Vec2 &destination,  const  Color4F &color);        // 矩形、四边形      // Solid表示实心      void  drawRect( const  Vec2 &origin,  const  Vec2 &destination,  const  Color4F &color);      void  drawRect( const  Vec2 &p1,  const  Vec2 &p2,  const  Vec2 &p3,  const  Vec2& p4,  const  Color4F &color);      void  drawSolidRect( const  Vec2 &origin,  const  Vec2 &destination,  const  Color4F &color);        // 多边形      // Solid表示实心      void  drawPoly( const  Vec2 *poli, unsigned  int  numberOfPoints,  bool  closePolygon,  const  Color4F &color);      void  drawSolidPoly( const  Vec2 *poli, unsigned  int  numberOfPoints,  const  Color4F &color);        // 椭圆      // Solid表示实心      void  drawCircle( const  Vec2 &center,  float  radius,  float  angle, unsigned  int  segments,  bool  drawLineToCenter,  const  Color4F &color);      void  drawCircle(  const  Vec2& center,  float  radius,  float  angle, unsigned  int  segments,  bool  drawLineToCenter,  float  scaleX,  float  scaleY,  const  Color4F &color);          void  drawSolidCircle( const  Vec2& center,  float  radius,  float  angle, unsigned  int  segments,  const  Color4F& color);      void  drawSolidCircle( const  Vec2& center,  float  radius,  float  angle, unsigned  int  segments,  float  scaleX,  float  scaleY,  const  Color4F &color);        // 样条曲线      void  drawCardinalSpline(PointArray *config,  float  tension,  unsigned  int  segments,  const  Color4F &color);      void  drawCatmullRom(PointArray *points, unsigned  int  segments,  const  Color4F &color); //

本文出自 “夏天的风” 博客，请务必保留此出处http://shahdza.blog.51cto.com/2410787/1560900