【Cocos2d-X開發學習筆記】第10期：渲染架構之幾何圖形的繪制

本系列學習教程使用的是cocos2d-x-2.1.4（最新版為3.0alpha0-pre） ，PC開發環境Windows7，C++開發環境VS2010       

一、圖形的繪制

      有時為了調試遊戲，我們常常會需要繪制一些簡單的幾何圖形，比如點、直線或者圓圈。這些幾何圖形顔色顔色

簡單，樣式單一，很少出現在遊戲畫面中，Cocos2D-X引擎提供了一個繪制幾何圖形的類CCDrawingPrimitives。我

們可以使用它來繪制幾何圖形，用于調試遊戲畫面。

注意：因為類CCDrawingPrimitives純粹是為了調試遊戲而存在的，是以我們在技術文檔中找不到此類說明。

1、常用繪制圖形函數如下。

<1> ccDrawColor4B(GLubyte r,GLubyte g,GLubyte b,GLubyte a)

作用：設定繪制顔色。

參數1：紅色分量。

參數2：綠色分量。

參數3：藍色分量。

參數4：透明度。

<2> glLineWidth(GLfloat width)

作用：設定線條寬度。

參數：寬度值。

<3> ccDrawLine(const CCPoint& origin,const CCPoint& destination)

作用：繪制一條直線。

參數1：起始坐标。

參數2：終點坐标。

<4> ccPointSize(GLfloat pointSize)

作用：設定每個點的大小。

參數：點的大小。

<5> ccDrawPoint(const CCPoint& point)

作用：繪制一個點。

參數：點的坐标。

<6> ccDrawCircle(const CCPoint& center,float radius,float angle,unsigned int segments,bool drawLineToCenter)

作用：繪制圓形。

參數1：中心點坐标。

參數2：半徑長度。

參數3：圓形的角度。

參數4：角度。

參數5：定點數。

<7> ccDrawPoly(const CCPoint * poli,unsigned int numberOfPoints,bool closePolygon)

作用：繪制空心多邊形。

參數1：頂點數組。

參數2：點數量。

參數3：是否自動封閉多邊形。

<8> ccDrawSolidRect(CCPoint origin,CCPoint destination,ccColor4F color)

作用：繪制填充的矩形。

參數1：頂點數組。

參數2：點數量。

參數3：矩形的顔色。

<9> ccDrawRect(CCPoint origin,CCPoint destination)

作用：繪制空心的矩形。

參數1：頂點數組。

參數2：點數量。

<10> ccDrawQuadBezier(const CCPoint& origin,const CCPoint& control,const CCPoint& destination,unsigned int segments)

作用：繪制貝塞爾曲線。

參數1：起始點。

參數2：控制點。

參數3：結束點。

參數4：頂點數。

<11> ccDrawCubicBezier(conts CCPoint& origin,const CCPoint& control1,const CCPoint& control2,const CCPoint& destination,unsigned int segments)

作用：繪制立體貝塞爾曲線。

參數1：起始點。

參數2：控制點1。

參數3：控制點2.

參數4：結束點。

參數5：頂點數。

2、示例代碼如下。

<1> 首先建立Cocos2D-X項目，在HelloWorldScene.h頭檔案中重寫draw函數：

//重寫draw函數
    virtual void draw();
           

<2> 然後在HelloWorldScene.cpp檔案中實作了draw函數：

void HelloWorld::draw(){
    CCSize s = CCDirector::sharedDirector()->getWinSize();
    //設定顔色
    ccDrawColor4B(255,0,0,255);
    //設定線的寬度
    glLineWidth(2);
    //繪制一條直線
    ccDrawLine( ccp(0, 0), ccp(s.width*0.5, s.height*0.5) );
    
    ccDrawColor4B(255,255,0,0);
    //設定像素尺寸
    ccPointSize(30);
    //繪制一個點
    ccDrawPoint( ccp(s.width*0.5, s.height *0.5) );
    
    ccDrawColor4B(0,0,255,0);
    //繪制圓形
    ccDrawCircle( ccp(s.width/2, s.height/2), 50, CC_DEGREES_TO_RADIANS(90), 50, false);
    ccDrawCircle( ccp(s.width/2, s.height/2), 50, CC_DEGREES_TO_RADIANS(45), 6, false);
    
    ccDrawColor4B(0, 255, 255, 255);
    glLineWidth(5);
    //繪制多邊形
    CCPoint vertices[] = { ccp(70,150), ccp(150,150), ccp(150,200),ccp(190,300)  };
    ccDrawPoly( vertices, 4, true);
    
    ccDrawColor4B(255, 0, 255, 255);
    //繪制填充的多邊形
    CCPoint filledVertices[] = { ccp(0,120), ccp(50,120), ccp(50,170), ccp(25,200), ccp(0,170) };
	ccDrawSolidPoly(filledVertices, 5, ccc4f(0.5f, 0.5f, 1, 1 ) );
//    ccDrawPoly(<#const cocos2d::CCPoint *vertices#>, <#unsigned int numOfVertices#>, <#bool closePolygon#>)
    
    //繪制貝塞爾曲線
    ccDrawQuadBezier(ccp(0,s.height), ccp(s.width/2,s.height/2), ccp(s.width,s.height), 50);
    
    //繪制立體的貝塞爾曲線
    // draw cubic bezier path
    ccDrawCubicBezier(ccp(s.width/2, s.height/2), ccp(s.width/2+30,s.height/2+50), ccp(s.width/2+60,s.height/2-50),ccp(s.width, s.height/2),100);
    
    //繪制填充舉行
    ccDrawSolidRect(ccp(240,50), ccp(300,10), ccc4f(255, 177, 177, 255));
    //繪制空心矩形
//    ccDrawRect(<#cocos2d::CCPoint origin#>, <#cocos2d::CCPoint destination#>)
    
}
           

3、示例效果圖。

源碼下載下傳位址