一．自定义绘制

一个图形引擎，总是由构建点，线，面的绘制功能写起来的。点，线，面。构成了最初的图形基础。所以说，掌握点，线，面是掌握引擎的基础。

Cocos2d-x 2.0的时候开始有的使用DrawPrimitives命名空间下的相关函数进行绘制。Cocos2d-x3.0版本开始有的DrawNode类提供的相关方法来绘制。今天的课程主要讲解使用最新的方法进行绘制。

二．图形绘制

获得DrawNode很简单,他是一个Node的子类，上节课我们已经讲了Node是什么,对Node有了个初步的认识，下面我们就来看一下DrawNode这类，代码如下：

从代码中不难看出，DrawNode其实是一个Node的子类，那么他和我们之前讲的Node的用法也是类似的。那么我们如何获得一个DrawNode的对象呢，其实很简单，代码如下：

    //创建DrawNode
    auto draw = DrawNode::create();
    //把DrawNode添加到Layer上
    addChild(draw,10);

<span style="white-space:pre">	</span>通过代码注释我们可以清晰的看到只需要调用DrawNode的Create()的方法就可以创建出一个DrawNode的对象，然后我们把它添加到了HelloWorld的Layer上。

既然已经获得了DrawNode的对象，那么接下来我们来看一下如何使用DrawNode划出一个点，代码如下：

    //画出一个点
    //参数1，该点的位置，参数2，该点的大小，参数3，该点的颜色，颜色值0-1的范围的float
    draw->drawPoint(Vec2(200,200),20,Color4F(1,0.5,1));

通过代码可以看到画点其实很简单。只需要调用DrawNode的drawPoint方法就行了，只需要填入相应的参数就可以了，具体参数的作用注释中已经说的很详细了，大家可以自己写一遍加深记忆。

下面我们来看一下如何画一条线，代码如下：

    // 画一条线
    //参数1，该线的起点，参数2，该线的的终点，参数3，该线的颜色，CCRANDOM_O_1会参数0-1的随机数，也就是说线的颜色每帧都会变化
    draw->drawLine(Vec2(0,0),Vec2(480,320),Color4F(CCRANDOM_0_1(),CCRANDOM_0_1(),0.5));

看完代码聪明的同学应该就明白了，划线也很简单，只需要调用DrawNode的drawLine方法就可以了。我们可以看到这次画出的线是直线，那么我们如何画出一个曲线呢，这个我们首先要普及一个知识，关于贝塞尔曲线的知识，具体什么是贝塞尔曲线，大家可以去百度百科上看一下，由于贝塞尔概念并不重要，这儿就不细讲了，那么我们首先来看一下Cocos2d-x能绘制的两种贝塞尔曲线都长什么样子。如图：

二次贝塞尔曲线

高阶贝塞尔曲线

上面的两个图代表着两种贝塞尔曲线，这两种贝塞尔曲线也是我们最常用到的贝塞尔曲线，那么他们该如何被画出来呢，我们来看一下代码

    // 画一个二次贝塞尔曲线
    //三个参数分别如图中P0,P1,P2，不过在咱们这个例子中，正好与之上下镜像。
    //第四个参数是组成该曲线的线段数，当然线段数越多该曲线表现的就越平滑，第五个参数是该线的颜色
    draw->drawQuadBezier(Vec2(810,490),Vec2(890,630),Vec2(950,10,0.5));
    //画一个高阶贝塞尔曲线
    //前四个参数应该对应的是P0,P3,P4,图上的P2可以省去。第五个是曲线构成所用的线段数。
    draw->drawCubicBezier(Vec2(200,Vec2(300,300),Vec2(450,Vec2(500,100),1));

通过代码注释结合上面的贝塞尔的图我们应该能弄懂贝塞尔曲线了吧。下面，我们来看看如何画多边形，如三角形，矩形，以及不规则的多边形。代码如下：

    // 画一个三角形，参1，2，3分别是三角形的三个顶点，参4是颜色值
    draw->drawTriangle(Vec2(100,Vec2(170,130),Vec2(100,140),0.5    ));
    // 画一个矩形,参1是该矩形左下顶点的位置，参2是该矩形右上顶点的位置，参数是颜色
    draw->drawRect(Vec2(230,230),Vec2(70,70),1,1));
    // 绘制圆函数，参1是中心点，参2为半径,参3为圆的逆时针旋转角度，这里使用了一个宏CC_DEGREES_TO_RADIANS把角度值转为弧度。转动了90度，目的是为了让中心    连线垂直显示。，参4为圆的平均切分段数，最后一个参数是指定是否从圆分段起止点位置向圆中心连线，参数5是横向缩放的倍数，参6是纵向缩放的倍数，参数七是画圆线段的颜色
    draw->drawCircle(Vec2(600,100,CC_DEGREES_TO_RADIANS(90),50,true,1.0f,2.0f,Color4F(1.0,0.0,0.5));
    //画一个多边形,首先通过数组来保存多边形每个顶点的坐标
    Vec2 vertices[] = { Vec2(0,Vec2(50,50),100) };
    //画一个多边形，参1为各个顶点的坐标，参2顶点数，参3是否封闭图形，参4颜色值
    draw->drawPoly(vertices,5,1));

通过代码的注释，大家也会发现，其实都很简单。

那么，点和线都画出来了，下面我们就来看看如何画出一个面来，上面我们讲解了如何画多边形，那么我们画一个“实体”的多边形不就是面了吗，如果能有这个思维那就很好办了，下面来看一下画面的代码：

<span style="white-space:pre">	</span>//画一个圆面，参1是中心点，参2为半径,参3为圆的逆时针旋转角度，这里使用了一个宏CC_DEGREES_TO_RADIANS把角度值转为弧度。转动了90度，目的是为了让中心连线垂直显示。，参4为圆的平均切分段数，最后一个参数是指定是否从圆分段起止点位置向圆中心连线，参数5是横向缩放的倍数，参6是纵向缩放的倍数，参数七是画圆线段的颜色
    draw->drawSolidCircle(Vec2(480,30,CC_DEGREES_TO_RADIANS(60),2.0,1));
    //画一个矩形的面，参1是该矩形左下顶点的位置，参2是该矩形右上顶点的位置，参数是颜色
    draw->drawSolidRect(Vec2(100,Vec2(200,1));
    //画一个多边形,首先通过数组来保存多边形每个顶点的坐标
    Vec2 vertices1[] = { Vec2(0,100) };
    //参1为各个顶点的坐标，参2顶点数，参3颜色值
    draw->drawSolidPoly(vertices1,1));

通过代码的注释大家可以看到，要想画出一个面，只需要使用相应的drawSolidxxxx()的相关接口就可以画出不懂形状的面，和画多边形没有多大区别，只是使用的接口名字多了个solid的，是不是很简单。

OK,写了那么多代码，下面我们来看看最后运行的效果，如图：

三.自定义绘制的总结

今天我们主要讲解了自定义绘制的相关知识，通过本级课程同学们应该能学会使用Cocos再带的DrawNode类来绘制一些图像，线段，在我们实际工作总也会经常用到自定义绘制的，例如扑鱼达人的瞄准线就是一个典型的使用自定义绘制的一条彩色线。

四，作业：

1，画出点，线，多边形，和面。