加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-14 21:04:35 所属栏目:百科 来源:网络整理
导读:【唠叨】 绘图的方式有两种: 使用OpenGL的绘图原语 DrawPrimitives 。 使用 DrawNode 。 曾经在使用2.x版本的时候,学习过使用DrawPrimitives进行简单图形的绘制。 OpenGL绘图原语DrawPrimitives, 详见: http://www.jb51.cc/article/p-rialwurl-wx.html

【唠叨】

绘图的方式有两种:

> 使用OpenGL的绘图原语DrawPrimitives

> 使用DrawNode

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

OpenGL绘图原语DrawPrimitives,详见:http://www.52php.cn/article/p-rialwurl-wx.html

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


【致谢】

http://www.52php.cn/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.52php.cn/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
46
47
48
49
50
51
52
53
54
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));
//空心多边形
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);
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.52php.cn/article/p-dnjvrbos-wx.html

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读