cocos2d-x 3.x DrawNode的使用

    一、绘图的方式有两种：

    ① 使用OpenGL的绘图原语DrawPrimitives。

    ② 使用DrawNode。

但是在3.3版本以后 DrawNode ：添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。

二、值得注意的是DrawNode由于在一个单独的批处理中绘制了所以元素，因此它绘制点、线段、多边形都要比

“drawingprimitives”快很多。

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

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

DrawNode的使用方法：

三、DrawNode的使用

//创建DrawNode并添加到我们的层中auto drawNode = DrawNode::create();this->addChild(drawNode);

四、使用DrawNode绘制的图形方法如下：(参考资料)

    void drawPoint(const Vec2& point, const float pointSize, const Color4F &color);//<span style="font-family: Roboto, sans-serif; line-height: 22px;">画一个点。</span>    void drawPoints(const Vec2 *position, unsigned int numberOfPoints, const Color4F &color);//画一组点             <pre name="code" class="html" style="color: rgb(80, 80, 80); font-size: 14px; font-weight: bold; line-height: 28px;">    //<span style="font-family: Roboto, sans-serif; line-height: 22px;">使用指定颜色画一条从起始点到目的地点的线。</span><span style="font-family: 宋体, 'Arial Narrow', arial, serif;">               </span>

void drawLine(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一个起始点坐标和目的地点坐标画一个矩形，坐标的单位是“Point” 起始点坐标和目的地点坐标不能相同。 void drawRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一个指向一组点坐标的指针和坐标点数量来绘制多边形 多边形可以闭合，也可以不闭合。 void drawPoly(const Vec2 *poli, unsigned int numberOfPoints, bool closePolygon, const Color4F &color); //给定圆的中心,半径，线段数量和线段颜色来绘制一个圆。如果要绘制带填充色的圆，请使用 drawSolidCircle函数。 void drawCircle( const Vec2& center, float radius, float angle, unsigned int segments, bool drawLineToCenter, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段数量来绘制一个圆。 void drawCircle(const Vec2 ¢er, float radius, float angle, unsigned int segments, bool drawLineToCenter, const Color4F &color); //画了一个四次贝塞尔曲线路径。 void drawQuadBezier(const Vec2 &origin, const Vec2 &control, const Vec2 &destination, unsigned int segments, const Color4F &color); //使用给定数量的线段和颜色绘制一个三次贝塞尔曲线。 void drawCubicBezier(const Vec2 &origin, const Vec2 &control1, const Vec2 &control2, const Vec2 &destination, unsigned int segments, const Color4F &color); //绘制一个基数样条路径。 void drawCardinalSpline(PointArray *config, float tension, unsigned int segments, const Color4F &color); //绘制一个卡特莫尔罗(Catmull Rom)路径。 void drawCatmullRom(PointArray *points, unsigned int segments, const Color4F &color); /** draw a dot at a position, with a given radius and color 在给定坐标点、半径和颜色值画一个点。 */ void drawDot(const Vec2 &pos, float radius, const Color4F &color); //画一个包含4个顶点的矩形 void drawRect(const Vec2 &lb, const Vec2 <, const Vec2 &rt, const Vec2& rb, const Color4F &color); //使用给定的原点和目的地点绘制一个实心矩形。 原点和目的地点不能有相同的x和y坐标。 void drawSolidRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一组坐标点画一个实心多边形,顶点数据包含个数和颜色. void drawSolidPoly(const Vec2 *poli, unsigned int numberOfPoints, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float angle, unsigned int segments, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float angle, unsigned int segments, const Color4F& color); /** draw a segment with a radius and color使用指定半径和颜色绘制一条线段。*/ void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color); /**使用给定的填充颜色和线条颜色绘制一个多边形。 * @code * When this function bound into js or lua,the parameter will be changed * In js: var drawPolygon(var Arrayofpoints, var fillColor, var width, var borderColor) * In lua:local drawPolygon(local pointTable,local tableCount,local fillColor,local width,local borderColor) * @endcode */ void drawPolygon(const Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor); /** draw a triangle with color 使用给定颜色绘制一个三角形,该颜色会填充矩形。*/ void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color); /** draw a quadratic bezier curve with color and number of segments, use drawQuadBezier instead给定线段颜色和线段数量画一条二次贝塞尔曲线 **/ CC_DEPRECATED_ATTRIBUTE void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);

其中使用clear（）来清除之前使用DrawNode画的所有图形。

drawNode->clear();//清除

五、空心多边形绘制

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

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

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

如下：

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

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

//    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));//

好了，大家可以自己动手试试了。