本节书摘来异步社区《Cocos2d 跨平台游戏开发指南（第2版）》一书中的第1章，第1.10节，作者： 【印度】Siddharth Shekar（谢卡）译者： 武传海 责编： 胡俊英，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.10　绘制gIPrimitives

Cocos2d使用openGLES，它是一个图形库，用来把对象显示在屏幕上。其实，到目前为止我们所有的绘图工作都依赖于这个图形库。Cocos2d也允许你访问gIPrimitives，使用它可以创建基本形状，如圆形、正方形、矩形等。

1.10.1　准备工作

现在，让我们一起看几个示例。我们将从创建一个简单的圆形开始。

1.10.2　操作步骤

在添加好hero节点之后，添加如下代码：

//drawDotNode
CCDrawNode* dotNode = [CCDrawNode node];
CCColor* red = [CCColorcolorWithRed:1.0fgreen:0.0fblue:0.0f];
[dotNodedrawDot:CGPointMake(winSize.width/2, winSize.height/2) radius:
10.0fcolor:red];
[selfaddChild:dotNode];

gIPrimitives使用CCDrawNode类创建出来。示例中，我们先新建一个CCDrawNode实例，命名为dotNode，然后创建一个CCColor类型的变量red，指定RGBA值为red。

接着，调用CCDrawNode的drawDot函数，传入圆形的创建位置，并传入圆形半径与颜色。最后，我们把dotNode添加到场景中。

1.10.3　工作原理

当你运行项目时，将在屏幕中心看到一个红色圆点。

在示例中，我们指定了圆心位置与圆形半径，Cocos2d会据此绘制圆形，并且根据我们指定的颜色填充圆形。

绘制圆形只是示例之一，我们也可以使用同样的方法绘制出其他形状，如图1-27所示。

1.10.4　更多内容

接下来，我们将看一下如何使用CCDrawNode类的drawWithPolyVerts函数绘制任意多边形。添加如下代码，替换或者注释掉DrawDot节点。

// DrawSquareNode
CCDrawNode *squareNode = [CCDrawNode node];

CGPointsquareVerts[4] =
{
  CGPointMake(center.x - 50, center.y - 50),

  CGPointMake(center.x - 50, center.y + 50),

  CGPointMake(center.x + 50, center.y + 50),

  CGPointMake(center.x + 50, center.y - 50)
};

CCColor* green = [CCColorcolorWithRed:0.0fgreen:1.0fblue:0.0f];

[squareNodedrawPolyWithVerts:squareVerts
  count:4
  fillColor:red
  borderWidth:1
  borderColor:green];

[selfaddChild:squareNode];

在上述代码中，我们先创建一个CCDrawNode类型的新节点。然后，创建一个CGPoint数组，通过squareVerts名称进行引用，数组中存储着正方形的4个顶点坐标。接下来，创建一个CCColor类型的变量green，使用RGBA值将其指定为绿色。

然后，调用drawPolyLineWithVerts，传入顶点数组，给出要绘制的顶点数，指定填充颜色为红色、边框线宽为1、边框颜色为green，green是我们之前刚刚创建出的CCColor类型变量。

最后，我们把squareNode添加到场景之中。

运行项目，我们将看到如图1-28所示的运行结果。

我们也可以使用同样的代码创建三角形。如果我们让函数绘制3个顶点，而非4个顶点，一个三角形就被绘制出来，而不是之前的正方形。

为了绘制三角形，修改代码如下，即在代码中，我们把顶点数由原来的4个改为3个。请注意，并不需要修改顶点数组。

CCColor* green = [CCColorcolorWithRed:0.0fgreen:1.0fblue:0.0f];

[squareNodedrawPolyWithVerts:squareVerts
  count: 3
  fillColor:red
  borderWidth:1
  borderColor:green];

[selfaddChild:squareNode];

再次运行项目，我们将看到如图1-29所示的变化。

事实上，借助CCDrawNode类，我们也可以在两点之间绘制线段。

为此，我们需要在绘制多边形的代码的下方，添加如下代码：

//segment node
CCColor* blue = [CCColorcolorWithRed:0.0fgreen:0.0fblue:1.0f];

CCDrawNode* segmentNode = [CCDrawNode node];

[segmentNodedrawSegmentFrom:center
  to:CGPointMake(center.x + 40, center.y + 40)
  radius: 2.0
  color: blue];

[selfaddChild:segmentNode];

在上面代码中，我们先创建了一个CCColor类型的变量blue，用来把线段着为蓝色。然后，我们又创建了一个CCDrawNode类型的变量，命名为segmentNode。

针对segmentNode，我们调用drawSegment函数，设置绘制起点为屏幕中心，终点距离x轴为40个单位，距离y轴也是40个单位，并且设置半径为2.0，它是指线条粗细，指定线条颜色为blue。

最后，我们把节点添加到场景中。

请注意，在如图1-30所示的屏幕截图中，我修改了折线，绘制出了一个正方形，而非三角形。