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

概述【唠叨】绘图的方式有两种： > 使用OpenGL的绘图原语DrawPrimitives。 > 使用DrawNode。曾经在使用2.x版本的时候，学习过使用DrawPrimitives进行简单图形的绘制。 OpenGL绘图原语DrawPrimitives，详见：http://www.voidcn.com/article/p-rialwurl-wx.html

【唠叨】

绘图的方式有两种：

> 使用OpenGL的绘图原语DrawPrimitives。

> 使用DrawNode。

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

OpenGL绘图原语DrawPrimitives，详见：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（贝塞尔曲线的原理）

【小知识】

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

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

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

【v3.3】

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

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

【DrawNode】

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

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

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

1、使用方法

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

使用方法如下：

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

2、基本图形绘制

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

>圆点：drawDot

线段：drawSegment

三角形：drawTriangle

多边形：drawPolygon

二次贝塞尔图形：drawQuadraticBezier

三次内塞尔图形：drawCubicBezier

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

7 8 9 10 11 12 13 14 15 16 17 18 19 20 //圆点('位置','圆点半径','填充颜色') void drawDot( const Vec2&pos, float radius, Color4F&color); //线段('起点','终点','半线宽','填充颜色') drawSegment( Vec2&from,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&to,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&color); //三角形('顶点1','顶点2','顶点3','填充颜色') drawTriangle( Vec2&p1,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&p2,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&p3,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&color); //多边形('顶点数组','顶点个数','填充颜色','轮廓粗细','轮廓颜色') drawPolygon(Vec2*verts,monospace!important; font-weight:bold!important; font-size:1em!important; min-height:inherit!important; color:gray!important; background:none!important">int count,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&fillColor,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">borderWidth,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&borderColor); //二次贝塞尔图形('起点','控制点','分段数','填充颜色') drawQuadraticBezier( Vec2&control,unsigned segments,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&color); //三次贝塞尔图形('起点','控制点1','控制点2','填充颜色') drawCubicBezier( Vec2&control1,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&control2,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">Color4F&color); 3、清除绘图缓存

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

4、颜色混合方式
    使用setBlendFunc(const BlendFunc &blendFunc)，设置颜色混合的方式。
 详见：http://www.jb51.cc/article/p-fpnoljdp-wx.html
           4              BlendFuncbl={GL_ONE,GL_ONE};

drawNode->setBlendFunc(bl);

5、空心多边形绘制
  使用DrawNode绘制的图形都是实心的，那么空心的怎么绘制呢？
 
  从绘制图形的函数可以看出：图形绘制的同时，需要设置图形的颜色color4F，其中也包含了透明度的设置。所以只要控制图形内部的填充颜色color4F的透明度为透明（值为0），即可绘制出一个空心的图形来。
  而能达到这种效果的，就只有多边形的绘制：drawpolygon。
  
 使用举例：
 
    >color4F(1,0) ：红色透明
  >color4F(1,1) ：红色不透明
           12              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),透明 //轮廓颜色：color4F(0,1,1),绿色 drawNode->drawpolygon(point,4,color4F(1,color4F(0,1));

【代码实战】
 > 圆点
 
 > 线段
 
 > 三角形
 
 > 实心多边形
 
 > 空心多边形
 
 > 二次贝塞尔图形
 
 > 三次贝塞尔图形
 
 > 颜色混合测试{ GL_ONE,GL_ONE}
           20                      21                      22                      23                      24                      25                      26                      27                      28                      29                      30                      31                      32                      33                      34                      35                      36                      37                      38                      39                      40                      41                      42                      43                      44                      45              @H_54_301@        46                      47                      48                      49                      50                      51                      52                      53                      54              @H_404_319@        55                      56                      57              //创建DrawNode

->addChild(drawNode); //圆点 drawNode->drawDot(Vec2(50,50),10,color4F::RED); //线段 drawNode->drawSegment(Vec2(20,100),Vec2(100,5,1)); //三角形 drawNode->drawTriangle(Vec2(20,250),300),Vec2(50,200),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,1)); @H_854_404@ //空心多边形 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,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,color4F::YELLOW); //颜色混合测试 drawNode->setBlendFunc(bl); drawNode->drawSegment(Vec2(300,Vec2(450,color4F::GREEN); drawNode->drawTriangle(Vec2(300,Vec2(400,color4F::RED);

截图：
 
 分析：
 
  （1）可以看出，绘制的图形全部都是实心的。
 
  （2）绘制的线段两边端点是一个半圆，这是因为线段是通过圆点画出来的。
 
  （3）看到中间的两个矩形，一个是实心的，一个是空心的。
 
  （4）实心的贝塞尔图形，看起来好奇怪啊。
 【附录】
 v3.3中添加了和 DrawPrimitives 一样的功能，同时 DrawPrimitives 标识为弃用。
 新增函数如下：
           32              //一个点、多个点

//正方形小点 drawPoint( Vec2&point,153)!important; background:none!important">const

pointSize,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

drawPoints(

Vec2*position,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">numberOfPoints,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

//线 drawline(

Vec2&origin,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&destination,0)!important; background:none!important">//矩形、四边形

//SolID表示实心 drawRect( color4F&color);

Vec2&p4,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

drawSolIDRect( color4F&color); //多边形 //SolID表示实心 drawpoly(

Vec2*poli,monospace!important; Font-weight:bold!important; Font-size:1em!important; min-height:inherit!important; color:gray!important; background:none!important">bool

closepolygon,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

drawSolIDpoly( color4F&color); //椭圆 //SolID表示实心 drawCircle(

Vec2&center,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">angle,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">drawlinetoCenter,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

scaleX,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">scaleY,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

drawSolIDCircle( color4F&color); @H_854_404@ color4F&color); //样条曲线

drawCardinalSpline(PointArray*config,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">tension,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

drawCatmullRom(PointArray*points,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">color4F&color);

 本文出自 “夏天的风” 博客，请务必保留此出处http://www.jb51.cc/article/p-dnjvrbos-wx.html
          总结       以上是内存溢出为你收集整理的cocos2dx[3.2](17)——简单绘图DrawNode全部内容，希望文章能够帮你解决cocos2dx[3.2](17)——简单绘图DrawNode所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1054801.html

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

`发表评论`

`评论列表（0条）`