一、绘图的方式有两种:
① 使用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));
//
好了,大家可以自己动手试试了。