cocos2d-x 3.x DrawNode的使用
2016-04-15 14:11
597 查看
一、绘图的方式有两种:
① 使用OpenGL的绘图原语DrawPrimitives。
② 使用DrawNode。
但是在3.3版本以后 DrawNode :添加了和
DrawPrimitives 一样的功能,同时 DrawPrimitives 标识为弃用。
二、值得注意的是DrawNode由于在一个单独的批处理中绘制了所以元素,因此它绘制点、线段、多边形都要比
“drawingprimitives”快很多。
1、 使用DrawPrimitives绘图原语绘制的图形,可以是实心的,也可以是空心的。
2、使用DrawNode绘制的图形都是实心的。
DrawNode的使用方法:
三、DrawNode的使用
四、使用DrawNode绘制的图形方法如下:(参考资料)
给定一个起始点坐标和目的地点坐标画一个矩形,坐标的单位是“Point” 起始点坐标和目的地点坐标不能相同。 void drawRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一个指向一组点坐标的指针和坐标点数量来绘制多边形
多边形可以闭合,也可以不闭合。 void drawPoly(const Vec2 *poli, unsigned int numberOfPoints, bool closePolygon, const Color4F &color); //给定圆的中心,半径,线段数量和线段颜色来绘制一个圆。如果要绘制带填充色的圆,请使用 drawSolidCircle函数。
void drawCircle( const Vec2& center, float radius, float angle, unsigned int segments, bool drawLineToCenter, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段数量来绘制一个圆。
void drawCircle(const Vec2 ¢er, float radius, float angle, unsigned int segments, bool drawLineToCenter, const Color4F &color); //画了一个四次贝塞尔曲线路径。 void drawQuadBezier(const
Vec2 &origin, const Vec2 &control, const Vec2 &destination, unsigned int segments, const Color4F &color); //使用给定数量的线段和颜色绘制一个三次贝塞尔曲线。 void drawCubicBezier(const Vec2 &origin,
const Vec2 &control1, const Vec2 &control2, const Vec2 &destination, unsigned int segments, const Color4F &color); //绘制一个基数样条路径。 void drawCardinalSpline(PointArray *config,
float tension, unsigned int segments, const Color4F &color); //绘制一个卡特莫尔罗(Catmull Rom)路径。 void drawCatmullRom(PointArray *points, unsigned int segments, const Color4F &color);
/** draw a dot at a position, with a given radius and color
在给定坐标点、半径和颜色值画一个点。 */ void drawDot(const Vec2 &pos, float radius, const Color4F &color); //画一个包含4个顶点的矩形 void drawRect(const Vec2 &lb, const Vec2 <, const Vec2 &rt, const
Vec2& rb, const Color4F &color); //使用给定的原点和目的地点绘制一个实心矩形。 原点和目的地点不能有相同的x和y坐标。 void drawSolidRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一组坐标点画一个实心多边形,顶点数据包含个数和颜色.
void drawSolidPoly(const Vec2 *poli, unsigned int numberOfPoints, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float
angle, unsigned int segments, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float angle,
unsigned int segments, const Color4F& color); /** draw a segment with a radius and color
使用指定半径和颜色绘制一条线段。*/ void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color); /**
使用给定的填充颜色和线条颜色绘制一个多边形。 * @code * When this function bound into js or lua,the parameter will be changed * In js: var drawPolygon(var Arrayofpoints, var fillColor, var width,
var borderColor) * In lua:local drawPolygon(local pointTable,local tableCount,local fillColor,local width,local borderColor) * @endcode */ void drawPolygon(const Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor);
/** draw a triangle with color
使用给定颜色绘制一个三角形,该颜色会填充矩形。*/ void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color); /** draw a quadratic bezier curve with color and number of segments, use drawQuadBezier instead
给定线段颜色和线段数量画一条二次贝塞尔曲线 **/ CC_DEPRECATED_ATTRIBUTE void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);
其中使用clear()来清除之前使用DrawNode画的所有图形。
drawNode->clear();
//清除
五、空心多边形绘制
使用DrawNode绘制的图形都是实心的,那么空心的怎么绘制呢?
从绘制图形的函数可以看出:图形绘制的同时,需要设置图形的颜色Color4F,其中也包含了透明度的设置。所以只要控制图形内
部的填充颜色Color4F的透明度为透明(值为0),即可绘制出一个空心的图形来。
而能达到这种效果的,就只有多边形的绘制:drawPolygon 。
如下:
Color4F(1, 0, 0, 0) :红色透明
Color4F(1, 0, 0, 1) :红色不透明
好了,大家可以自己动手试试了。
① 使用OpenGL的绘图原语DrawPrimitives。
② 使用DrawNode。
但是在3.3版本以后 DrawNode :添加了和
DrawPrimitives 一样的功能,同时 DrawPrimitives 标识为弃用。
二、值得注意的是DrawNode由于在一个单独的批处理中绘制了所以元素,因此它绘制点、线段、多边形都要比
“drawingprimitives”快很多。
1、 使用DrawPrimitives绘图原语绘制的图形,可以是实心的,也可以是空心的。
2、使用DrawNode绘制的图形都是实心的。
DrawNode的使用方法:
三、DrawNode的使用
//创建DrawNode并添加到我们的层中 auto drawNode = DrawNode::create(); this->addChild(drawNode);
四、使用DrawNode绘制的图形方法如下:(参考资料)
void drawPoint(const Vec2& point, const float pointSize, const Color4F &color);//<span style="font-family: Roboto, sans-serif; line-height: 22px;">画一个点。</span> void drawPoints(const Vec2 *position, unsigned int numberOfPoints, const Color4F &color);//画一组点 <pre name="code" class="html" style="color: rgb(80, 80, 80); font-size: 14px; font-weight: bold; line-height: 28px;"> //<span style="font-family: Roboto, sans-serif; line-height: 22px;">使用指定颜色画一条从起始点到目的地点的线。</span><span style="font-family: 宋体, 'Arial Narrow', arial, serif;"> </span>void drawLine(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //
给定一个起始点坐标和目的地点坐标画一个矩形,坐标的单位是“Point” 起始点坐标和目的地点坐标不能相同。 void drawRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一个指向一组点坐标的指针和坐标点数量来绘制多边形
多边形可以闭合,也可以不闭合。 void drawPoly(const Vec2 *poli, unsigned int numberOfPoints, bool closePolygon, const Color4F &color); //给定圆的中心,半径,线段数量和线段颜色来绘制一个圆。如果要绘制带填充色的圆,请使用 drawSolidCircle函数。
void drawCircle( const Vec2& center, float radius, float angle, unsigned int segments, bool drawLineToCenter, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段数量来绘制一个圆。
void drawCircle(const Vec2 ¢er, float radius, float angle, unsigned int segments, bool drawLineToCenter, const Color4F &color); //画了一个四次贝塞尔曲线路径。 void drawQuadBezier(const
Vec2 &origin, const Vec2 &control, const Vec2 &destination, unsigned int segments, const Color4F &color); //使用给定数量的线段和颜色绘制一个三次贝塞尔曲线。 void drawCubicBezier(const Vec2 &origin,
const Vec2 &control1, const Vec2 &control2, const Vec2 &destination, unsigned int segments, const Color4F &color); //绘制一个基数样条路径。 void drawCardinalSpline(PointArray *config,
float tension, unsigned int segments, const Color4F &color); //绘制一个卡特莫尔罗(Catmull Rom)路径。 void drawCatmullRom(PointArray *points, unsigned int segments, const Color4F &color);
/** draw a dot at a position, with a given radius and color
在给定坐标点、半径和颜色值画一个点。 */ void drawDot(const Vec2 &pos, float radius, const Color4F &color); //画一个包含4个顶点的矩形 void drawRect(const Vec2 &lb, const Vec2 <, const Vec2 &rt, const
Vec2& rb, const Color4F &color); //使用给定的原点和目的地点绘制一个实心矩形。 原点和目的地点不能有相同的x和y坐标。 void drawSolidRect(const Vec2 &origin, const Vec2 &destination, const Color4F &color); //给定一组坐标点画一个实心多边形,顶点数据包含个数和颜色.
void drawSolidPoly(const Vec2 *poli, unsigned int numberOfPoints, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float
angle, unsigned int segments, float scaleX, float scaleY, const Color4F &color); //给定圆的中心,半径和线段的数量绘制一个实心圆。 void drawSolidCircle(const Vec2& center, float radius, float angle,
unsigned int segments, const Color4F& color); /** draw a segment with a radius and color
使用指定半径和颜色绘制一条线段。*/ void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color); /**
使用给定的填充颜色和线条颜色绘制一个多边形。 * @code * When this function bound into js or lua,the parameter will be changed * In js: var drawPolygon(var Arrayofpoints, var fillColor, var width,
var borderColor) * In lua:local drawPolygon(local pointTable,local tableCount,local fillColor,local width,local borderColor) * @endcode */ void drawPolygon(const Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor);
/** draw a triangle with color
使用给定颜色绘制一个三角形,该颜色会填充矩形。*/ void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color); /** draw a quadratic bezier curve with color and number of segments, use drawQuadBezier instead
给定线段颜色和线段数量画一条二次贝塞尔曲线 **/ CC_DEPRECATED_ATTRIBUTE void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);
其中使用clear()来清除之前使用DrawNode画的所有图形。
drawNode->clear();
//清除
五、空心多边形绘制
使用DrawNode绘制的图形都是实心的,那么空心的怎么绘制呢?
从绘制图形的函数可以看出:图形绘制的同时,需要设置图形的颜色Color4F,其中也包含了透明度的设置。所以只要控制图形内
部的填充颜色Color4F的透明度为透明(值为0),即可绘制出一个空心的图形来。
而能达到这种效果的,就只有多边形的绘制:drawPolygon 。
如下:
Color4F(1, 0, 0, 0) :红色透明
Color4F(1, 0, 0, 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, 0, 0), 透明 //轮廓颜色:Color4F(0, 1, 0, 1), 绿色 drawNode->drawPolygon(point, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1)); //
好了,大家可以自己动手试试了。
相关文章推荐
- mac下创建cocos2d-x的android项目详细流程
- cocos2d-x3.0 macOS下配置Android开发环境以及使用cocos2d-console来新建执行project
- Cocos2d-x 3.0中 物理碰撞检测中onContactBegin回调函数不响应问题
- 骨骼动画中为每个骨骼设置单独的颜色
- cocos2dx CCArray
- cocos2dx抗锯齿与渲染冲突——待解决
- cocos2dx抗锯齿问题
- cocos-lua帧动画使用
- 初识 Cocos
- Cocos2dx:cocostudio 2.0 Text文本控件
- Cocos2dx:Sprite切换图片
- iOS导入cocos2d游戏
- cocos2d-x 3.4 eclipse android 编译是出现WindowsError: [Error 5] 的解决方法 assets
- 如何优雅进行 cocos2dx + lua 开发
- cocos2dx-lua里面class的实现的一些问题记录和思考
- Cocos2dx lua绑定C++
- cocos2d-html5 Schedule定时器
- Cocos2dx android 上打包出现编译警告: 编码 UTF-8 的不可映射字符
- Cocos2d-JS 事件处理机制
- Cocos2d-JS 动作、特效和动画