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

好了，大家可以自己動手試試了。