Cocos2d-x 3.x基础学习: 简单绘图DrawNode

在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

  // 圆点 ('位置' , '圆点半径' , '填充颜色')
  void drawDot(const Vec2 &pos, float radius, const Color4F &color);
  

• 线段：drawSegment

  // 线段 ('起点' , '终点' , '半线宽' , '填充颜色')
  void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color);
  

• 三角形：drawTriangle

  // 三角形 ('顶点1' , '顶点2' , '顶点3' , '填充颜色')
  void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color);
  

• 多边形：drawPolygon

  // 多边形 ('顶点数组' , '顶点个数' , '填充颜色' , '轮廓粗细' , '轮廓颜色')
  void drawPolygon(Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor);
  

• 二次贝塞尔图形：drawQuadraticBezier

  // 二次贝塞尔图形 ('起点' , '控制点' , '终点' , '分段数' , '填充颜色')
  void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);
  

• 三次贝塞尔图形：drawCubicBezier

  // 三次贝塞尔图形 ('起点' , '控制点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的透明度来实现。当透明度值为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));

代码实战

以下是一个综合示例，展示了如何使用DrawNode绘制各种图形，并进行颜色混合测试：

// 创建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);

结果分析

• 从绘制结果可以看出，所有绘制的图形都是实心的。
• 绘制的线段两端端点呈现半圆形状，这是因为线段是通过圆点绘制实现的。
• 可以看到中间有两个矩形，一个是实心的，一个是空心的。
• 实心的贝塞尔图形在视觉上可能会给人一种奇怪的感觉。