Cocos2dx3.0版本後渲染引入了OpenGlES3.0相關特性，使用了DrawNode類來進行繪製，那麼我們就來看看DrawNode類具體是如何繪製點線面的：

我們在DrawNode.cpp中可以看到DrawNode類提供了畫點drawPoint()、畫線drawLine()、畫矩形drawRect()、畫多邊形drawPoly()、畫矩形面drawSolidRect()、畫多邊形面drawSolidPoly()等等方法。

接下來我們以drawLine()這個方法為例，看下cocos到底是如何繪製圖形的：

void DrawNode::drawLine(const Vec2 &origin, const Vec2 &destination, const Color4F &color)
{
    ensureCapacityGLLine(2);
    
    V2F_C4B_T2F *point = (V2F_C4B_T2F*)(_bufferGLLine + _bufferCountGLLine);
    
    V2F_C4B_T2F a = {origin, Color4B(color), Tex2F(0.0, 0.0)};
    V2F_C4B_T2F b = {destination, Color4B(color), Tex2F(0.0, 0.0)};
    
    *point = a;
    *(point+1) = b;
    
    _bufferCountGLLine += 2;
    _dirtyGLLine = true;
}
 

該方法引數為終點、起點座標、顏色值。

首先把引數傳來的值賦給了V2F_C4B_T2F型別的變數，這個V2F_C4B_T2F是什麼型別呢？我們看看：我們在ccTypes.h檔案中可以找到對V2F_C4B_T2F的定義：

struct V2F_C4B_T2F
{
    /// vertices (2F)
    Vec2       vertices;
    /// colors (4B)
    Color4B        colors;
    /// tex coords (2F)
    Tex2F          texCoords;
};

原來V2F_C4B_T2F是一個結構體，裡面點座標、顏色值還有個

回過頭來，剛剛只是把繪製資訊儲存起來，那麼drawLine具體繪製的方法在哪裡呢？

我們可以在DrawNode.cpp中找到onDrawGLLine()方法，繪製線就是在這個方法裡面進行的：

void DrawNode::onDrawGLLine(const Mat4 &transform, uint32_t flags)
{                                                                                                                                                                //得到用於儲存管理GL程式設計物件的shader著色器單例
    auto glProgram = GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR);
    //使用shader
    glProgram->use();
    //設定shader的一些內建uniform
    glProgram->setUniformsForBuiltins(transform);
    GL::blendFunc(_blendFunc.src, _blendFunc.dst);
 
    if (_dirtyGLLine)
    {	                                                                                                                                                          //繫結一個新緩衝區
        //同時把之前的一些緩衝區資料清掉
        glBindBuffer(GL_ARRAY_BUFFER, _vboGLLine);
        //去申請存放傳來資料的相關記憶體
        glBufferData(GL_ARRAY_BUFFER, sizeof(V2F_C4B_T2F)*_bufferCapacityGLLine, _bufferGLLine, GL_STREAM_DRAW);
        _dirtyGLLine = false;
}
    //根據VAO還是VBO的頂點繪製方式進行不同處理
    //在OpenGL2.0時只有VBO頂點繪製方式,VAO是OpenGL3.0後的特性
    //VAO比VBO即省記憶體又提高渲染效率
    if (Configuration::getInstance()->supportsShareableVAO())
    {
        GL::bindVAO(_vaoGLLine);
    }
    else
    {
        glBindBuffer(GL_ARRAY_BUFFER, _vboGLLine);
        //啟用attribute
        GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);
        // 給vertex指定資料來源
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 2, GL_FLOAT, GL_FALSE, sizeof(V2F_C4B_T2F), (GLvoid *)offsetof(V2F_C4B_T2F, vertices));
        // 給color指定資料來源
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(V2F_C4B_T2F), (GLvoid *)offsetof(V2F_C4B_T2F, colors));
        // 給texcood指定資料來源
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, sizeof(V2F_C4B_T2F), (GLvoid *)offsetof(V2F_C4B_T2F, texCoords));
}
    //設定線的寬度
    glLineWidth(_lineWidth);
 
    glDrawArrays(GL_LINES, 0, _bufferCountGLLine);
    
    if (Configuration::getInstance()->supportsShareableVAO())
    {
        GL::bindVAO(0);
    }
    
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    
    CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1,_bufferCountGLLine);
    CHECK_GL_ERROR_DEBUG();
}
 

好了，其他的圖形繪製方法基本大同小異都是這個流程，如果你想深入理解，最好學習一下OpenGL的相關知識。

接下來我們就使用DrawNode類來進行一些圖形繪製：

//建立DrawNode物件
auto dNode = DrawNode::create();
//將DrawNode物件新增到HelloWorld的layer上
this->addChild(dNode);

1.繪製點

//繪製點
//引數：座標、大小、顏色
//Color4F的4個引數：R、B、G、alpha,範圍0~1
dNode->drawPoint(Vec2(200,200),20,Color4F(1,0,0,1));

2.繪製線

//繪製線
//引數：起點座標、終點座標、顏色
dNode->drawLine(Vec2(200,200),Vec2(400,400),Color4F(0,0,1,1));

3.繪製Bezier曲線

//繪製Bezier曲線
//引數：起點座標、控制點座標、終點座標、段數、顏色
//CCRANDOM_0_1()為獲得0~1之間隨機數的巨集
                                                                                                                                                          //二級貝塞爾曲線
dNode->drawQuadBezier(Vec2(200, 200), Vec2(100, 300), Vec2(500, 200), 15, Color4F(0, 1, 0, 1));
                                                                                                                                                          //高階貝塞爾曲線
dNode->drawCubicBezier(Vec2(200, 200), Vec2(300, 300), Vec2(450, 200), Vec2(150, 100), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));

4.繪製三角形

//繪製三角形
//引數：頂點座標、顏色
dNode->drawTriangle(Vec2(200, 300), Vec2(400, 300), Vec2(300, 400), Color4F(1, 0, 0, 1));

5.繪製矩形

//繪製矩形
//引數：左下角頂點座標、右上角頂點座標、顏色
dNode->drawRect(Vec2(300, 300), Vec2(400, 400), Color4F(1, 0, 0, 1));

6.繪製圓形

//繪製圓形
//引數：圓心座標、半徑、角度（弧度）、段數、是否有線連到圓心、橫、縱座標縮放、顏色
dNode->drawCircle(Vec2(480, 320), 100, CC_DEGREES_TO_RADIANS(90), 20, true, 1, 1, Color4F(1, 0, 0, 1));

7.繪製多邊形

//繪製多邊形
//引數：頂點座標陣列、頂點數、是否封閉、顏色
Vec2 vertices[] = { Vec2(100, 100), Vec2(150, 150), Vec2(200, 150), Vec2(200,200), Vec2(150, 200)};
dNode->drawPoly(vertices, 5, true, Color4F(1, 0, 0, 1));

8.繪製矩形面

//繪製矩形面
//引數：左下角頂點座標、右上角頂點座標、顏色
dNode->drawSolidRect(Vec2(300, 300), Vec2(400, 400), Color4F(1, 0, 0, 1));

 其他繪製面的方法基本也和繪製線的相同，引數基本一樣，只是方法名多了“Solid”。

以上。