首页 > 代码库 > Cocos2d-x 3.1.1 学习笔记（三）学习绘图API
Cocos2d-x 3.1.1 学习笔记（三）学习绘图API
关于cocos2d-x 3.1.1 版本的绘图方法有两种
1、使用DrawNode类绘制自定义图形。
2、继承Layer类重写draw()方法。
以上两种方法都可以绘制自定义图形，根据自己的需要选择合适的方法。
一、使用DrawNode类绘制自定义图形
使用DrawNode 类绘制图形是最简单的方法，create一个DrawNode类，然后添加进场景。然后就可以愉快的绘图了。
1 auto s = Director::getInstance()->getWinSize(); 2 //创建 3 auto draw = DrawNode::create(); 4 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) { return; _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__ */
1 #include "VisibleRect.h" 2 3 USING_NS_CC; 4 5 Rect VisibleRect::s_visibleRect; 6 7 void VisibleRect::lazyInit() 8 { 9 // no lazy init10 // Useful if we change the resolution in runtime11 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 }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。