【唠叨】

绘图的方式有两种：

> 使用OpenGL的绘图原语DrawPrimitives。

> 使用DrawNode。

曾经在使用2.x版本的时候，学习过使用DrawPrimitives进行简单图形的绘制。

OpenGL绘图原语DrawPrimitives，详见：http://shahdza.blog.51cto.com/2410787/1545462

在本节中将学习使用DrawNode来进行图形的绘制。


【致谢】

http://blog.csdn.net/ac_huang/article/details/39522473

http://blog.csdn.net/conmajia/article/details/8543834（贝塞尔曲线的原理）


【小知识】

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

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

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


【v3.3】

DrawNode ：添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。

DrawPrimitives用法，参见：http://shahdza.blog.51cto.com/2410787/1545462


对于v3.3新增的函数，参见本文最后的《附录》。函数用法将不做赘述，参见DrawPrimitives用法即可。



【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

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

使用方法如下：

////圆点('位置','圆点半径','填充颜色')voiddrawDot(constVec2&pos,floatradius,constColor4F&color);//线段('起点','终点','半线宽','填充颜色')voiddrawSegment(constVec2&from,constVec2&to,floatradius,constColor4F&color);//三角形('顶点1','顶点2','顶点3','填充颜色')voiddrawTriangle(constVec2&p1,constVec2&p2,constVec2&p3,constColor4F&color);//多边形('顶点数组','顶点个数','填充颜色','轮廓粗细','轮廓颜色')voiddrawPolygon(Vec2*verts,intcount,constColor4F&fillColor,floatborderWidth,constColor4F&borderColor);//二次贝塞尔图形('起点','控制点','终点','分段数','填充颜色')voiddrawQuadraticBezier(constVec2&from,constVec2&control,constVec2&to,unsignedintsegments,constColor4F&color);//三次贝塞尔图形('起点','控制点1','控制点2','终点','分段数','填充颜色')voiddrawCubicBezier(constVec2&from,constVec2&control1,constVec2&control2,constVec2&to,unsignedintsegments,constColor4F&color);//


3、清除绘图缓存

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

//drawNode->clear();//


4、颜色混合方式

使用setBlendFunc(const BlendFunc &blendFunc)，设置颜色混合的方式。

详见：http://shahdza.blog.51cto.com/2410787/1547633

//BlendFuncbl={GL_ONE,GL_ONE};drawNode->setBlendFunc(bl);//


5、空心多边形绘制

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

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

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

使用举例：

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

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

//Vec2point[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}

////创建DrawNodeDrawNode*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));//实心多边形Vec2point1[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));//空心多边形Vec2point2[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));//二次贝塞尔Vec2from1=Vec2(300,20);Vec2to1=Vec2(450,20);Vec2control=Vec2(360,100);drawNode->drawQuadraticBezier(from1,control,to1,100,Color4F::ORANGE);//三次贝塞尔Vec2from2=Vec2(300,100);Vec2to2=Vec2(450,100);Vec2control1=Vec2(350,0);Vec2control2=Vec2(400,200);drawNode->drawCubicBezier(from2,control1,control2,to2,100,Color4F::YELLOW);//颜色混合测试BlendFuncbl={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）实心的贝塞尔图形，看起来好奇怪啊。



【附录】

v3.3中添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。


新增函数如下：

////一个点、多个点//正方形小点voiddrawPoint(constVec2&point,constfloatpointSize,constColor4F&color);voiddrawPoints(constVec2*position,unsignedintnumberOfPoints,constColor4F&color);voiddrawPoints(constVec2*position,unsignedintnumberOfPoints,constfloatpointSize,constColor4F&color);//线voiddrawLine(constVec2&origin,constVec2&destination,constColor4F&color);//矩形、四边形//Solid表示实心voiddrawRect(constVec2&origin,constVec2&destination,constColor4F&color);voiddrawRect(constVec2&p1,constVec2&p2,constVec2&p3,constVec2&p4,constColor4F&color);voiddrawSolidRect(constVec2&origin,constVec2&destination,constColor4F&color);//多边形//Solid表示实心voiddrawPoly(constVec2*poli,unsignedintnumberOfPoints,boolclosePolygon,constColor4F&color);voiddrawSolidPoly(constVec2*poli,unsignedintnumberOfPoints,constColor4F&color);//椭圆//Solid表示实心voiddrawCircle(constVec2&center,floatradius,floatangle,unsignedintsegments,booldrawLineToCenter,constColor4F&color);voiddrawCircle(constVec2&center,floatradius,floatangle,unsignedintsegments,booldrawLineToCenter,floatscaleX,floatscaleY,constColor4F&color);voiddrawSolidCircle(constVec2&center,floatradius,floatangle,unsignedintsegments,constColor4F&color);voiddrawSolidCircle(constVec2&center,floatradius,floatangle,unsignedintsegments,floatscaleX,floatscaleY,constColor4F&color);//样条曲线voiddrawCardinalSpline(PointArray*config,floattension,unsignedintsegments,constColor4F&color);voiddrawCatmullRom(PointArray*points,unsignedintsegments,constColor4F&color);//