Cocos2d-x從入門到精通第六課《自定義繪製》

  課程視頻教程地址：http://edu.csdn.net/course/detail/1342/20984?auto_start=1

一．自定義繪製

一個圖形引擎，總是由構建點，線，面的繪製功能寫起來的。點，線，面。構成了最初的圖形基礎。所以說，掌握點，線，面是掌握引擎的基礎。

Cocos2d-x 2.0的時候開始有的使用DrawPrimitives命名空間下的相關函數進行繪製。Cocos2d-x3.0版本開始有的DrawNode類提供的相關方法來繪製。今天的課程主要講解使用最新的方法進行繪製。

 

二．圖形繪製

獲得DrawNode很簡單,他是一個Node的子類，上節課我們已經講了Node是什麼,對Node有了個初步的認識，下面我們就來看一下DrawNode這類，代碼如下：

從代碼中不難看出，DrawNode其實是一個Node的子類，那麼他和我們之前講的Node的用法也是類似的。那麼我們如何獲得一個DrawNode的對象呢，其實很簡單，代碼如下：

 

    //創建DrawNode
    auto draw = DrawNode::create();
    //把DrawNode添加到Layer上
    addChild(draw, 10);

<span style="white-space:pre">	</span>通過代碼註釋我們可以清晰的看到只需要調用DrawNode的Create()的方法就可以創建出一個DrawNode的對象，然後我們把它添加到了HelloWorld的Layer上。

既然已經獲得了DrawNode的對象，那麼接下來我們來看一下如何使用DrawNode劃出一個點，代碼如下：

    //畫出一個點
    //參數1，該點的位置，參數2，該點的大小，參數3，該點的顏色，顏色值0-1的範圍的float
    draw->drawPoint(Vec2(200,200), 20, Color4F(1, 0.5, 0, 1));

通過代碼可以看到畫點其實很簡單。只需要調用DrawNode的drawPoint方法就行了，只需要填入相應的參數就可以了，具體參數的作用註釋中已經說的很詳細了，大家可以自己寫一遍加深記憶。

 

下面我們來看一下如何畫一條線，代碼如下：

    // 畫一條線
    //參數1，該線的起點，參數2，該線的的終點，參數3，該線的顏色，CCRANDOM_O_1會參數0-1的隨機數，也就是說線的顏色每幀都會變化
    draw->drawLine(Vec2(0,0), Vec2(480, 320), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

看完代碼聰明的同學應該就明白了，劃線也很簡單，只需要調用DrawNode的drawLine方法就可以了。我們可以看到這次畫出的線是直線，那麼我們如何畫出一個曲線呢，這個我們首先要普及一個知識，關於貝塞爾曲線的知識，具體什麼是貝塞爾曲線，大家可以去百度百科上看一下，由於貝塞爾概念並不重要，這兒就不細講了，那麼我們首先來看一下Cocos2d-x能繪製的兩種貝塞爾曲線都長什麼樣子。如圖：

二次貝塞爾曲線

高階貝塞爾曲線

 

上面的兩個圖代表着兩種貝塞爾曲線，這兩種貝塞爾曲線也是我們最常用到的貝塞爾曲線，那麼他們該如何被畫出來呢，我們來看一下代碼

    // 畫一個二次貝塞爾曲線
    //三個參數分別如圖中P0,P1,P2，不過在咱們這個例子中，正好與之上下鏡像。
    //第四個參數是組成該曲線的線段數，當然線段數越多該曲線表現的就越平滑，第五個參數是該線的顏色
    draw->drawQuadBezier(Vec2(810, 490), Vec2(890, 630), Vec2(950, 630), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
    //畫一個高階貝塞爾曲線
    //前四個參數應該對應的是P0,P1,P3,P4,圖上的P2可以省去。第五個是曲線構成所用的線段數。
    draw->drawCubicBezier(Vec2(200,200), Vec2(300,300), Vec2(450,200), Vec2(500,100) ,10, Color4F(1,0,0,1));

通過代碼註釋結合上面的貝塞爾的圖我們應該能弄懂貝塞爾曲線了吧。下面，我們來看看如何畫多邊形，如三角形，矩形，以及不規則的多邊形。代碼如下：

    // 畫一個三角形，參1，2，3分別是三角形的三個頂點，參4是顏色值
    draw->drawTriangle(Vec2(100, 100), Vec2(170, 130), Vec2(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5    ));
    // 畫一個矩形,參1是該矩形左下頂點的位置，參2是該矩形右上頂點的位置，參數是顏色
    draw->drawRect(Vec2(230,230), Vec2(70,70), Color4F(1,1,0,1));
    // 繪製圓函數，參1是中心點，參2爲半徑,參3爲圓的逆時針旋轉角度，這裏使用了一個宏CC_DEGREES_TO_RADIANS把角度值轉爲弧度。轉動了90度，目的是爲了讓中心    連線垂直顯示。，參4爲圓的平均切分段數，最後一個參數是指定是否從圓分段起止點位置向圓中心連線，參數5是橫向縮放的倍數，參6是縱向縮放的倍數，參數七是畫圓線段的顏色
    draw->drawCircle(Vec2(600,320), 100, CC_DEGREES_TO_RADIANS(90), 50, true, 1.0f, 2.0f, Color4F(1.0, 0.0, 0.0, 0.5));
    //畫一個多邊形,首先通過數組來保存多邊形每個頂點的座標
    Vec2 vertices[] = { Vec2(0,0), Vec2(50,50), Vec2(100,50), Vec2(100,100), Vec2(50,100) };
    //畫一個多邊形，參1爲各個頂點的座標，參2頂點數，參3是否封閉圖形，參4顏色值
    draw->drawPoly(vertices, 5, true, Color4F(CCRANDOM_0_1(),CCRANDOM_0_1(),CCRANDOM_0_1(),1));

通過代碼的註釋，大家也會發現，其實都很簡單。

 

那麼，點和線都畫出來了，下面我們就來看看如何畫出一個面來，上面我們講解了如何畫多邊形，那麼我們畫一個“實體”的多邊形不就是面了嗎，如果能有這個思維那就很好辦了，下面來看一下畫面的代碼：

<span style="white-space:pre">	</span>//畫一個圓面，參1是中心點，參2爲半徑,參3爲圓的逆時針旋轉角度，這裏使用了一個宏CC_DEGREES_TO_RADIANS把角度值轉爲弧度。轉動了90度，目的是爲了讓中心連線垂直顯示。，參4爲圓的平均切分段數，最後一個參數是指定是否從圓分段起止點位置向圓中心連線，參數5是橫向縮放的倍數，參6是縱向縮放的倍數，參數七是畫圓線段的顏色
    draw->drawSolidCircle(Vec2(480,320), 30, CC_DEGREES_TO_RADIANS(60), 10, 2.0, 2.0, Color4F(1,0,0,1));
    //畫一個矩形的面，參1是該矩形左下頂點的位置，參2是該矩形右上頂點的位置，參數是顏色
    draw->drawSolidRect(Vec2(100,100), Vec2(200,200), Color4F(1,1,0,1));
    //畫一個多邊形,首先通過數組來保存多邊形每個頂點的座標
    Vec2 vertices1[] = { Vec2(0,0), Vec2(50,50), Vec2(100,50), Vec2(100,100), Vec2(50,100) };
    //參1爲各個頂點的座標，參2頂點數，參3顏色值
    draw->drawSolidPoly(vertices1, 5, Color4F(CCRANDOM_0_1(),CCRANDOM_0_1(),CCRANDOM_0_1(),1));

通過代碼的註釋大家可以看到，要想畫出一個面，只需要使用相應的drawSolidxxxx()的相關接口就可以畫出不懂形狀的面，和畫多邊形沒有多大區別，只是使用的接口名字多了個solid的，是不是很簡單。

 

       OK,寫了那麼多代碼，下面我們來看看最後運行的效果，如圖：

 

 

三.自定義繪製的總結

今天我們主要講解了自定義繪製的相關知識，通過本級課程同學們應該能學會使用Cocos再帶的DrawNode類來繪製一些圖像，線段，在我們實際工作總也會經常用到自定義繪製的，例如撲魚達人的瞄準線就是一個典型的使用自定義繪製的一條彩色線。

四，作業：

1，畫出點，線，多邊形，和麪。