Cocos2d-x 3.2学习笔记（三）学习绘图API

　　关于cocos2d-x 3.2 版本的绘图方法有两种

　　1、使用DrawNode类绘制自定义图形。

　　2、继承Layer类重写draw()方法。

　　以上两种方法都可以绘制自定义图形，根据自己的需要选择合适的方法。

一、使用DrawNode类绘制自定义图形

　　使用DrawNode 类绘制图形是最简单的方法，create一个DrawNode类，然后添加进场景。然后就可以愉快的绘图了。

　　

 1     auto s = Director::getInstance()->getWinSize();

 2 　　 //创建

 3     auto draw = DrawNode::create();

 4     this->addChild(draw, 10);

 5 

 6     // 画圆

 7     for( int i=0; i < 10; i++)

 8     {

 9         draw->drawDot(Vec2(s.width/2, s.height/2), 10*(10-i), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));

10     }

11 

12     // 画多边形

13     Vec2 points[] = { Vec2(s.height/4,0), Vec2(s.width,s.height/5), Vec2(s.width/3*2,s.height) };

14     draw->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(1,0,0,0.5), 4, Color4F(0,0,1,1));

15 

16     // 画线

17     draw->drawSegment(Vec2(20,s.height), Vec2(20,s.height/2), 10, Color4F(0, 1, 0, 1));

18 

19     draw->drawSegment(Vec2(10,s.height/2), Vec2(s.width/2, s.height/2), 40, Color4F(1, 0, 1, 0.5));

20 

21     // 画三角形

22     draw->drawTriangle(Vec2(10, 10), Vec2(70, 30), Vec2(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

23 

24     // 画贝赛尔曲线

25     draw->drawQuadraticBezier(Vec2(s.width - 150, s.height - 150), Vec2(s.width - 70, s.height - 10), Vec2(s.width - 10, s.height - 10), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

26 

27     draw->drawCubicBezier(Vec2(s.width - 250, 40), Vec2(s.width - 70, 100), Vec2(s.width - 30, 250), Vec2(s.width - 10, s.height - 50), 10, Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));

 

　　根据需要可以用这些api创造出自己需要的图像。

二、继承Layer类重写draw()方法

　　这种方式可以自定义一个绘图类，用于创作自己需要的图形。

　　

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;



class HelloWorld : public cocos2d::Layer

{

public:

        virtual void draw(Renderer *renderer, const Mat4 &transform, bool transformUpdated) override;

protected:  

    void onDraw(const kmMat4 &transform, bool transformUpdated);  

    CustomCommand _customCommand;  

};

#endif

#include "HelloWorldScene.h"

#include "VisibleRect.h"



void HelloWorld::draw(cocos2d::Renderer *renderer, const kmMat4 &transform, bool transformUpdated)  

{  

    _customCommand.init(1);  

    _customCommand.func = CC_CALLBACK_0(HelloWorld::onDraw, this,transform,transformUpdated);  

    renderer->addCommand(&_customCommand);  

}



void HelloWorld::onDraw(const kmMat4 &transform, bool transformUpdated)  

{  

    kmGLPushMatrix();  

    kmGLLoadMatrix(&transform);  





    /*直线*/  

    CHECK_GL_ERROR_DEBUG();  

    DrawPrimitives::drawLine(VisibleRect::leftBottom(), VisibleRect::rightTop());  





    CHECK_GL_ERROR_DEBUG();  



    glLineWidth( 5.0f );  

    DrawPrimitives::setDrawColor4B(255,0,0,255);  

    DrawPrimitives::drawLine( Point(0, 0), Point(100, 100) );  



    // draw big point in the center  

    DrawPrimitives::setPointSize(64);  

    DrawPrimitives::setDrawColor4B(100, 0, 255, 128);  

    DrawPrimitives::drawPoint(VisibleRect::center());  

    CHECK_GL_ERROR_DEBUG();  





    // draw 4 small points  

    Point points[] = { Point(60,60), Point(70,70), Point(160,70), Point(170,60) };  

    DrawPrimitives::setPointSize(10);  

    DrawPrimitives::setDrawColor4B(0,10,255,255);  

    DrawPrimitives::drawPoints( points, 4);  



    CHECK_GL_ERROR_DEBUG();  





    // draw a green circle with 10 segments  

    glLineWidth(16);  

    DrawPrimitives::setDrawColor4B(0, 255, 0, 255);  

    DrawPrimitives::drawCircle( VisibleRect::center(), 100, 0, 10, false);  



    CHECK_GL_ERROR_DEBUG();  



    // draw a green circle with 50 segments with line to center  

    glLineWidth(2);  

    DrawPrimitives::setDrawColor4B(0, 255, 255, 255);  

    DrawPrimitives::drawCircle( VisibleRect::center(), 150, CC_DEGREES_TO_RADIANS(90), 50, false);  



    CHECK_GL_ERROR_DEBUG();  



    // draw a pink solid circle with 50 segments  

    glLineWidth(2);  

    DrawPrimitives::setDrawColor4B(255, 0, 255, 255);  

    DrawPrimitives::drawSolidCircle( VisibleRect::center() + Point(140,0), 40, CC_DEGREES_TO_RADIANS(90), 50, 1.0f, 1.0f);  



    CHECK_GL_ERROR_DEBUG();  



    // open yellow poly  

    DrawPrimitives::setDrawColor4B(255, 255, 0, 255);  

    glLineWidth(5);  

    Point vertices[] = { Point(10,10), Point(50,50), Point(100,50), Point(150,100), Point(200,150) };  

    DrawPrimitives::drawPoly( vertices, 5, false);  



    CHECK_GL_ERROR_DEBUG();  



    // filled poly  

    glLineWidth(1);  

    Point filledVertices[] = { Point(0,120), Point(50,120), Point(50,170), Point(25,200), Point(0,170) };  

    DrawPrimitives::drawSolidPoly(filledVertices, 5, Color4F(0.5f, 0.5f, 1, 1 ) );  





    // closed purble poly  

    DrawPrimitives::setDrawColor4B(255, 0, 255, 255);  

    glLineWidth(2);  

    Point vertices2[] = { Point(30,130), Point(30,230), Point(50,200) };  

    DrawPrimitives::drawPoly( vertices2, 3, true);  



    CHECK_GL_ERROR_DEBUG();  



    // draw quad bezier path  

    DrawPrimitives::drawQuadBezier(VisibleRect::leftTop(), VisibleRect::center(), VisibleRect::rightTop(), 50);  



    CHECK_GL_ERROR_DEBUG();  





    // draw cubic bezier path  

    DrawPrimitives::drawCubicBezier(VisibleRect::center(), Point(VisibleRect::center().x+30,VisibleRect::center().y+150), Point(VisibleRect::center().x+60,VisibleRect::center().y-300),Point(VisibleRect::center().x+90,VisibleRect::center().y+150),100);  





    CHECK_GL_ERROR_DEBUG();  





    //draw a solid polygon  

    Point vertices3[] = {Point(60,160), Point(70,190), Point(100,190), Point(90,160)};  

    DrawPrimitives::drawSolidPoly( vertices3, 4, Color4F(1,1,0,1) );  



    CHECK_GL_ERROR_DEBUG();  



    //end draw  

    kmGLPopMatrix();  

}  

　　其中涉及到辅助类VisibleRect类得到获取视口。

 1 #ifndef __VISIBLERECT_H__

 2 #define __VISIBLERECT_H__

 3 

 4 #include "cocos2d.h"

 5 

 6 class VisibleRect

 7 {

 8 public:

 9     static cocos2d::Rect getVisibleRect();

10 

11     static cocos2d::Vec2 left();

12     static cocos2d::Vec2 right();

13     static cocos2d::Vec2 top();

14     static cocos2d::Vec2 bottom();

15     static cocos2d::Vec2 center();

16     static cocos2d::Vec2 leftTop();

17     static cocos2d::Vec2 rightTop();

18     static cocos2d::Vec2 leftBottom();

19     static cocos2d::Vec2 rightBottom();

20 private:

21     static void lazyInit();

22     static cocos2d::Rect s_visibleRect;

23 };

24 

25 #endif /* __VISIBLERECT_H__ */

VisibleRect.h

 1 #include "VisibleRect.h"

 2 

 3 USING_NS_CC;

 4 

 5 Rect VisibleRect::s_visibleRect;

 6 

 7 void VisibleRect::lazyInit()

 8 {

 9     // no lazy init

10     // Useful if we change the resolution in runtime

11     s_visibleRect = Director::getInstance()->getOpenGLView()->getVisibleRect();

12 }

13 

14 Rect VisibleRect::getVisibleRect()

15 {

16     lazyInit();

17     return s_visibleRect;

18 }

19 

20 Vec2 VisibleRect::left()

21 {

22     lazyInit();

23     return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height/2);

24 }

25 

26 Vec2 VisibleRect::right()

27 {

28     lazyInit();

29     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height/2);

30 }

31 

32 Vec2 VisibleRect::top()

33 {

34     lazyInit();

35     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height);

36 }

37 

38 Vec2 VisibleRect::bottom()

39 {

40     lazyInit();

41     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y);

42 }

43 

44 Vec2 VisibleRect::center()

45 {

46     lazyInit();

47     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height/2);

48 }

49 

50 Vec2 VisibleRect::leftTop()

51 {

52     lazyInit();

53     return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height);

54 }

55 

56 Vec2 VisibleRect::rightTop()

57 {

58     lazyInit();

59     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height);

60 }

61 

62 Vec2 VisibleRect::leftBottom()

63 {

64     lazyInit();

65     return s_visibleRect.origin;

66 }

67 

68 Vec2 VisibleRect::rightBottom()

69 {

70     lazyInit();

71     return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y);

72 }

VisibleRect.cpp