（三）学习绘图API
（三）学习绘图API
http://cn.cocos2d-x.org/tutorial/show?id=1273
RichardMillings2014-08-06 14:47:185909 次阅读
关于Cocos2d-x 3.2 版本的绘图方法有两种：
1、使用DrawNode类绘制自定义图形。
2、继承Layer类重写draw()方法。
以上两种方法都可以绘制自定义图形，根据自己的需要选择合适的方法。
一、使用DrawNode类绘制自定义图形
使用DrawNode 类绘制图形是最简单的方法，create一个DrawNode类，然后添加进场景。然后就可以愉快的绘图了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
auto s = Director::getInstance()->getWinSize();
//创建
auto draw = DrawNode::create();
this
->addChild(draw, 10);
// 画圆
for
(
int
i=0; i < 10; i++)
{
draw->drawDot(Vec2(s.width/2, s.height/2), 10*(10-i), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 1));
}
// 画多边形
Vec2 points[] = { Vec2(s.height/4,0), Vec2(s.width,s.height/5), Vec2(s.width/3*2,s.height) };
draw->drawPolygon(points,
sizeof
(points)/
sizeof
(points[0]), Color4F(1,0,0,0.5), 4, Color4F(0,0,1,1));
// 画线
draw->drawSegment(Vec2(20,s.height), Vec2(20,s.height/2), 10, Color4F(0, 1, 0, 1));
draw->drawSegment(Vec2(10,s.height/2), Vec2(s.width/2, s.height/2), 40, Color4F(1, 0, 1, 0.5));
// 画三角形
draw->drawTriangle(Vec2(10, 10), Vec2(70, 30), Vec2(100, 140), Color4F(CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), 0.5));
// 画贝赛尔曲线
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));
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()方法
这种方式可以自定义一个绘图类，用于创作自己需要的图形。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#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
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
#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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
#ifndef __VISIBLERECT_H__
#define __VISIBLERECT_H__
#include "cocos2d.h"
class
VisibleRect
{
public
:
static
cocos2d::Rect getVisibleRect();
static
cocos2d::Vec2 left();
static
cocos2d::Vec2 right();
static
cocos2d::Vec2 top();
static
cocos2d::Vec2 bottom();
static
cocos2d::Vec2 center();
static
cocos2d::Vec2 leftTop();
static
cocos2d::Vec2 rightTop();
static
cocos2d::Vec2 leftBottom();
static
cocos2d::Vec2 rightBottom();
private
:
static
void
lazyInit();
static
cocos2d::Rect s_visibleRect;
};
#endif /* __VISIBLERECT_H__ */
VisibleRect.h
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
#include "VisibleRect.h"
USING_NS_CC;
Rect VisibleRect::s_visibleRect;
void
VisibleRect::lazyInit()
{
// no lazy init
// Useful if we change the resolution in runtime
s_visibleRect = Director::getInstance()->getOpenGLView()->getVisibleRect();
}
Rect VisibleRect::getVisibleRect()
{
lazyInit();
return
s_visibleRect;
}
Vec2 VisibleRect::left()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height/2);
}
Vec2 VisibleRect::right()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height/2);
}
Vec2 VisibleRect::top()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height);
}
Vec2 VisibleRect::bottom()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y);
}
Vec2 VisibleRect::center()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height/2);
}
Vec2 VisibleRect::leftTop()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height);
}
Vec2 VisibleRect::rightTop()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height);
}
Vec2 VisibleRect::leftBottom()
{
lazyInit();
return
s_visibleRect.origin;
}
Vec2 VisibleRect::rightBottom()
{
lazyInit();
return
Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y);
}
VisibleRect.cpp
|
来源网址：http://www.cnblogs.com/Richard-Core/p/3836100.html