cocos2dx[3.2](17)——简单绘图DrawNode

概述原创作品，允许转载，转载时请务必以超链接形式标明文章  原始出处 、作者信息和本声明。否则将追究法律责任。 http://www.voidcn.com/article/p-dnjvrbos-wx.html 【唠叨】     绘图的方式有两种：     > 使用OpenGL的绘图原语DrawPrimitives。     > 使用DrawNode。     曾经在使用2.x版本的时候，学习过使用Dr
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处、作者信息和本声明。否则将追究法律责任。 http://www.jb51.cc/article/p-dnjvrbos-wx.html

【唠叨】

绘图的方式有两种：

> 使用OpenGL的绘图原语DrawPrimitives。

> 使用DrawNode。

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

OpenGL绘图原语DrawPrimitives，@H_419_35@详见：http://www.jb51.cc/article/p-rialwurl-wx.html

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

【致谢】

http://www.jb51.cc/article/p-wnysnybz-kq.html

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

【小知识】

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

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

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

【v3.3】

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

@H_419_35@DrawPrimitives用法，参见：http://www.jb51.cc/article/p-rialwurl-wx.html

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

---

【DrawNode】

DrawNode由于在一个单独的批处理中绘制了所以元素，因此它绘制点、线段、多边形都要比“drawing primitives”快。

> 使用DrawPrimitives绘图原语绘制的图形，可以是实心的，也可以是空心的。

> 使用DrawNode绘制的图形@H_419_119@都是实心的。

1、使用方法

创建一个DrawNode，然后加入到Layer布景层中，即可绘制各种形状的图形。

@H_419_35@使用方法如下：

@H_419_35@

//    //创建DrawNode，然后后加入到Layer层中    DrawNode* drawNode = DrawNode::create();    this->addChild(drawNode);         //...基本图形绘制...//

2、基本图形绘制

使用DrawNode来绘制图形，可以绘制如下几个图形。

>@H_419_35@圆点 ：drawDot

>@H_419_35@线段 ：drawSegment

>@H_419_35@三角形 ：drawTriangle

>@H_419_35@多边形 ：drawpolygon

>@H_419_35@二次贝塞尔图形：drawQuadraticBezIEr

>@H_419_35@三次内塞尔图形：drawCubicBezIEr

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

@H_419_35@

//    //圆点      ('位置','圆点半径','填充颜色')    voID drawDot(const Vec2 &pos,float radius,const color4F &color);     //线段          ('起点','终点','半线宽','填充颜色')    voID drawSegment(const Vec2 &from,const Vec2 &to,const color4F &color);     //三角形         ('顶点1','顶点2','顶点3','填充颜色')    voID drawTriangle(const Vec2 &p1,const Vec2 &p2,const Vec2 &p3,const color4F &color);     //多边形        ('顶点数组','顶点个数','填充颜色','轮廓粗细','轮廓颜色')    voID drawpolygon(Vec2 *verts,int count,const color4F &fillcolor,float borderWIDth,const color4F &bordercolor);     //二次贝塞尔图形        ('起点','控制点','分段数','填充颜色')    voID drawQuadraticBezIEr(const Vec2& from,const Vec2& control,const Vec2& to,unsigned int segments,const color4F &color);         //三次贝塞尔图形    ('起点','控制点1','控制点2','填充颜色')    voID drawCubicBezIEr(const Vec2& from,const Vec2& control1,const Vec2& control2,const color4F &color); //

3、清除绘图缓存

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

drawNode->clear();

4、颜色混合方式

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

@H_419_35@详见：http://www.jb51.cc/article/p-fpnoljdp-wx.html

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

5、空心多边形绘制

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

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

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

@H_419_35@使用举例：

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

>color4F(1,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),透明    //轮廓颜色：color4F(0,1,1),绿色    drawNode->drawpolygon(point,4,color4F(1,color4F(0,1));

---

【代码实战】

@H_419_35@> 圆点

@H_419_35@> 线段

@H_419_35@> 三角形

@H_419_35@> 实心多边形

@H_419_35@> 空心多边形

@H_419_35@> 二次贝塞尔图形

@H_419_35@> 三次贝塞尔图形

@H_419_35@> 颜色混合测试{ GL_ONE,GL_ONE}

@H_419_35@

    //创建DrawNode    DrawNode* drawNode = DrawNode::create();    this->addChild(drawNode);    //圆点    drawNode->drawDot(Vec2(50,50),10,color4F::RED);    //线段    drawNode->drawSegment(Vec2(20,100),Vec2(100,5,1));    drawNode->drawSegment(Vec2(20,150),1));    //三角形    drawNode->drawTriangle(Vec2(20,250),300),Vec2(50,200),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,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,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,color4F::YELLOW);     //颜色混合测试    BlendFunc bl = { GL_ONE,GL_ONE };    drawNode->setBlendFunc(bl);    drawNode->drawSegment(Vec2(300,Vec2(450,color4F::GREEN);    drawNode->drawTriangle(Vec2(300,Vec2(400,color4F::RED);

@H_419_35@截图：

@H_419_35@分析：

（1）可以看出，绘制的图形全部都是实心的。

（2）绘制的线段两边端点是一个半圆，这是因为线段是通过圆点画出来的。

（3）看到中间的两个矩形，一个是实心的，一个是空心的。

（4）实心的贝塞尔图形，看起来好奇怪啊。

---

【附录】

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

@H_419_35@新增函数如下：

@H_419_35@

    // 一个点、多个点    // 正方形小点    voID drawPoint(const Vec2& point,const float pointSize,const color4F &color);    voID drawPoints(const Vec2 *position,unsigned int numberOfPoints,const color4F &color);    // 线    voID drawline(const Vec2 &origin,const Vec2 &destination,const color4F &color);     // 矩形、四边形    // SolID表示实心    voID drawRect(const Vec2 &origin,const color4F &color);    voID drawRect(const Vec2 &p1,const Vec2& p4,const color4F &color);    voID drawSolIDRect(const Vec2 &origin,const color4F &color);     // 多边形    // SolID表示实心    voID drawpoly(const Vec2 *poli,bool closepolygon,const color4F &color);    voID drawSolIDpoly(const Vec2 *poli,const color4F &color);     // 椭圆    // SolID表示实心    voID drawCircle(const Vec2 ¢er,float angle,bool drawlinetoCenter,const color4F &color);    voID drawCircle( const Vec2& center,float scaleX,float scaleY,const color4F &color);        voID drawSolIDCircle(const Vec2& center,const color4F& color);    voID drawSolIDCircle(const Vec2& center,const color4F &color);     // 样条曲线    voID drawCardinalSpline(PointArray *config,float tension,const color4F &color);    voID drawCatmullRom(PointArray *points,const color4F &color);

本文出自 “夏天的风” 博客，请务必保留此出处http://www.jb51.cc/article/p-dnjvrbos-wx.html

总结

以上是内存溢出为你收集整理的cocos2dx[3.2](17)——简单绘图DrawNode全部内容，希望文章能够帮你解决cocos2dx[3.2](17)——简单绘图DrawNode所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。