本节书摘来异步社区《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所示的屏幕截图中，我修改了折线，绘制出了一个正方形，而非三角形。
