原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处、作者信息和本声明。否则将追究法律责任。
http://www.52php.cn/article/p-dnjvrbos-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用法,参见:http://www.52php.cn/article/p-rialwurl-wx.html
对于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
注:绘制的图形都是实心的。
//
//圆点 ('位置','圆点半径','填充颜色')
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),设置颜色混合的方式。
详见:http://www.52php.cn/article/p-fpnoljdp-wx.html
BlendFunc bl = { GL_ONE,GL_ONE };
drawNode->setBlendFunc(bl);
5、空心多边形绘制
使用DrawNode绘制的图形都是实心的,那么空心的怎么绘制呢?
从绘制图形的函数可以看出:图形绘制的同时,需要设置图形的颜色Color4F,其中也包含了透明度的设置。所以只要控制图形内部的填充颜色Color4F的透明度为透明(值为0),即可绘制出一个空心的图形来。
而能达到这种效果的,就只有多边形的绘制:drawPolygon。
使用举例:
>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));
【代码实战】
> 圆点
> 线段
> 三角形
> 实心多边形
> 空心多边形
> 二次贝塞尔图形
> 三次贝塞尔图形
> 颜色混合测试{ GL_ONE,GL_ONE}
//创建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);
截图:
分析:
(1)可以看出,绘制的图形全部都是实心的。
(2)绘制的线段两边端点是一个半圆,这是因为线段是通过圆点画出来的。
(3)看到中间的两个矩形,一个是实心的,一个是空心的。
(4)实心的贝塞尔图形,看起来好奇怪啊。
【附录】
v3.3中添加了和 DrawPrimitives 一样的功能,同时 DrawPrimitives 标识为弃用。
新增函数如下:
// 一个点、多个点
// 正方形小点
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.52php.cn/article/p-dnjvrbos-wx.html