在Cocos2d-x 绘图的方式有两种：1. 使用OpenGL的绘图原语DrawPrimitives；2. 使用DrawNode。本节中主要学习使用DrawNode来进行图形的绘制。

【小知识】

分段数：即绘制曲线一般都是通过绘制“样条曲线”来实现，而分段数即样条段数。

二次贝塞尔曲线：起点终点之间的一条抛物线，利用一个控制点来控制抛物线的形状。

三次贝塞尔曲线：起点终点之间，利用两个控制点来控制曲线的形状。

【DrawNode】

DrawNode由于在一个单独的批处理中绘制了所有元素，因此它绘制点、线段、多边形都要比“drawing primitives”快。

使用DrawPrimitives绘图原语绘制的图形，可以是实心的，也可以是空心的。

使用DrawNode绘制的图形都是实心的。

1、使用方法

创建一个DrawNode，然后加入到Layer布景层中，即可绘制各种形状的图形。

使用方法如下：

//

//创建DrawNode，然后后加入到Layer层中

DrawNode* drawNode = DrawNode::create();

this->addChild(drawNode);

//...基本图形绘制...

//

2、基本图形绘制

使用DrawNode来绘制图形，可以绘制如下几个图形。

圆点：drawDot

线段：drawSegment

三角形：drawTriangle

多边形：drawPolygon

二次贝塞尔图形：drawQuadraticBezier

三次内塞尔图形：drawCubicBezier

注：绘制的图形都是实心的。

使用方法如下：

//

//圆点 ('位置' , '圆点半径' , '填充颜色')

void drawDot(const Vec2 &pos, float radius, const Color4F &color);

//线段 ('起点' , '终点' , '半线宽' , '填充颜色')

void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color);

//三角形 ('顶点1' , '顶点2' , '顶点3' , '填充颜色')

void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color);

//多边形 ('顶点数组' , '顶点个数' , '填充颜色' , '轮廓粗细' , '轮廓颜色')

void drawPolygon(Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor);

//二次贝塞尔图形 ('起点' , '控制点' , '终点' , '分段数' , '填充颜色')

void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);

//三次贝塞尔图形 ('起点' , '控制点1' , '控制点2' , '终点' , '分段数' , '填充颜色')

void drawCubicBezier(const Vec2& from, const Vec2& control1, const Vec2& control2, const Vec2& to, unsigned int segments, const Color4F &color);

//

3、清除绘图缓存

使用clear()，来清除之前使用drawNode画的所有图形。

//

drawNode->clear();

//

4、颜色混合方式

使用setBlendFunc(const BlendFunc &blendFunc)，设置颜色混合的方式。详见：《颜色混合BlendFunc用法实例总结》

//

BlendFunc bl = { GL_ONE, GL_ONE };

drawNode->setBlendFunc(bl);

//

5、空心多边形绘制

使用DrawNode绘制的图形都是实心的，那么空心的怎么绘制呢?

从绘制图形的函数可以看出：图形绘制的同时，需要设置图形的颜色Color4F，其中也包含了透明度的设置。所以只要控制图形内部的填充颜色Color4F的透明度为透明(值为0)，即可绘制出一个空心的图形来。

而能达到这种效果的，就只有多边形的绘制：drawPolygon 。

使用举例：

Color4F(1, 0, 0, 0) ：红色透明

Color4F(1, 0, 0, 1) ：红色不透明

//

Vec2 point[4];

point[0] = Vec2(100, 100);

point[1] = Vec2(100, 200);

point[2] = Vec2(200, 200);

point[3] = Vec2(200, 100);

//绘制空心多边形

//填充颜色：Color4F(1, 0, 0, 0), 透明

//轮廓颜色：Color4F(0, 1, 0, 1), 绿色

drawNode->drawPolygon(point, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1));

//

【代码实战】

圆点

线段

三角形

实心多边形

空心多边形

二次贝塞尔图形

三次贝塞尔图形

颜色混合测试 { GL_ONE , GL_ONE}

//

//创建DrawNode

DrawNode* drawNode = DrawNode::create();

this->addChild(drawNode);

//圆点

drawNode->drawDot(Vec2(50, 50), 10, Color4F::RED);

//线段

drawNode->drawSegment(Vec2(20, 100), Vec2(100, 100), 5, Color4F(0, 1, 0, 1));

drawNode->drawSegment(Vec2(20, 150), Vec2(100, 150), 10, Color4F(0, 0, 1, 1));

//三角形

drawNode->drawTriangle(Vec2(20, 250), Vec2(100, 300), Vec2(50, 200), Color4F(1, 1, 0, 1));

//实心多边形

Vec2 point1[4];

point1[0] = Vec2(150, 50);

point1[1] = Vec2(150, 150);

point1[2] = Vec2(250, 150);

point1[3] = Vec2(250, 50);

drawNode->drawPolygon(point1, 4, Color4F(1, 0, 0, 1), 1, Color4F(0, 1, 0, 1));

//空心多边形

Vec2 point2[4];

point2[0] = Vec2(150, 200);

point2[1] = Vec2(150, 300);

point2[2] = Vec2(250, 300);

point2[3] = Vec2(250, 200);

drawNode->drawPolygon(point2, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1));

//二次贝塞尔

Vec2 from1 = Vec2(300, 20);

Vec2 to1 = Vec2(450, 20);

Vec2 control = Vec2(360, 100);

drawNode->drawQuadraticBezier(from1, control, to1, 100, Color4F::ORANGE);

//三次贝塞尔

Vec2 from2 = Vec2(300, 100);

Vec2 to2 = Vec2(450, 100);

Vec2 control1 = Vec2(350, 0);

Vec2 control2 = Vec2(400, 200);

drawNode->drawCubicBezier(from2, control1, control2, to2, 100, Color4F::YELLOW);

//颜色混合测试

BlendFunc bl = { GL_ONE, GL_ONE };

drawNode->setBlendFunc(bl);

drawNode->drawSegment(Vec2(300, 250), Vec2(450, 250), 10, Color4F::GREEN);

drawNode->drawTriangle(Vec2(300, 200), Vec2(400, 300), Vec2(450, 150), Color4F::RED);

//

截图：

分析：

(1)可以看出，绘制的图形全部都是实心的。

(2)绘制的线段两边端点是一个半圆，这是因为线段是通过圆点画出来的。

(3)看到中间的两个矩形，一个是实心的，一个是空心的。

(4)实心的贝塞尔图形，看起来好奇怪啊。