Cocos2D-X2.2.3学习笔记10(几何图形)

我们这节来学习几何图形，即怎样使用Cocos2d-x绘制各种图形。已经贝塞尔曲线

我们查看CCNode中有个draw函数，我们须要将绘制的代码所有写在这个函数里面。写在init函数里是画不出线来的，

draw是有Cocos2d-x内部调用的。详细什么机制我也不知道。初期我们学习的是怎么使用。等以后做出来游戏赚钱了，闲的蛋疼的时候再回过头来钻研吧。学习不论什么东西追求的是高速的做出有用的东西 。

OK   我们在头文件里重写draw

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::CCLayer
{
public:
    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  

    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::CCScene* scene();

    // implement the "static node()" method manually
    CREATE_FUNC(HelloWorld);

	virtual void draw();
};

#endif // __HELLOWORLD_SCENE_H__

源文件

#include "HelloWorldScene.h"

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    return true;
}
void HelloWorld::draw(){

}

我们这次基本的代码都会先在draw函数中

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVjYmxvZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

这里有各种绘制函数，我们一个个来看

ok  
我们来绘制一个线条

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));
}

我们用到了CCDrawLine函数

看凝视draws a line given the origin and destination point measured in points

百度翻译和我说:画线的起点和终点測量点

OK   第一个为起点，第二个为终点。两个点连成一条线

我们从左上角到右下角绘制一条红色的粗线

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));

	//设置画刷颜色
	ccDrawColor4F(255,0,0,255);
	//设置线条的宽度
	glLineWidth(10);
	ccDrawLine(ccp(0,visibleSize.height),ccp(visibleSize.width,0));

}

有问题啊！

怎么我第一次画的线也变为红色了呢？

用过.net或C++或Java事实上都清楚，这个画刷是全局唯一的，当你设置了画刷的属性之后，假设不还原回去，下次另外一个地方使用的话还是先前的画刷属性。

可是，我们设置画刷的属性是在绘制完第一条线之后才设置的，为什么还是这样呢？？

这就是Cocos2d-x的机制了，你能够在该函数下CCLog一下，发现程序会不停的调用这个函数，

我在想。这效率不是太低了吗？假设换在手机上，不敢想象啊！

亲

(还是那句话，先学怎么用。赚钱才是硬道理，生活苦逼，么办法啊)

总之。用完画笔之后我们，在方法最后就得还原它

void HelloWorld::draw(){
	CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();
	ccDrawLine(ccp(0,0),ccp(visibleSize.width,visibleSize.height));

	//设置画刷颜色
	ccDrawColor4F(255,0,0,255);
	//设置线条的宽度
	glLineWidth(10);
	ccDrawLine(ccp(0,visibleSize.height),ccp(visibleSize.width,0));

	//还原画笔
	glLineWidth(1);
	ccDrawColor4B(255,255,255,255);
	ccPointSize(1);

}

这就正常了。

这里我们接触了一个新的函数，glLineWidth

我们发现，大部分都是CC开头，表示Cocos2d-x   这里的gl

OpenGL的意思，事实上Cocos2d-x底层还是调用的OpenGL来绘制的

绘制一个比較大的点

//绘制一个比較大的点,蓝色的，半透明
	ccPointSize(50);
	ccDrawColor4B(0,0,255,128);
	ccDrawPoint(ccp(visibleSize.width/2,visibleSize.height/2));

ok   这里注意了   ccDrawColor4F 设置半透明没效果

用4B才干够，至于为什么，反正我不关心

总之我们认为4B好用一点。那我们就都用4B吧

//一次绘制多个点
	CCPoint points[]={ccp(60,60),ccp(60,70),ccp(70,70),ccp(70,60)};
	ccPointSize(2);
	ccDrawColor4B(0,255,255,255);
	ccDrawPoints(points,sizeof(points)/sizeof(points[0]));

//绘制圆形
	glLineWidth(16);
	ccDrawColor4B(0, 255, 0, 255);
	ccDrawCircle(ccp(visibleSize.width/2,visibleSize.height/2),100,0,1000,false);

绘制圆须要说一下

第一个參数:  圆的中心点

第二个參数:  圆半径

第三个參数: 圆的逆时针旋转角度  (搞不懂就是0)

第四个參数:圆的平均分段   (越大越平滑。但始终有锯齿，这个非常纠结)

//绘制多边形
	ccDrawColor4B(255, 255, 0, 255);
	glLineWidth(10);
	CCPoint vertices[] = {ccp(50,50), ccp(100,50), ccp(100,100), ccp(50,100) };
	//须要绘制多边形的点,參数2。点的个数  參数3  是否须要起点和终点闭合
	ccDrawPoly(vertices,sizeof(vertices)/sizeof(vertices[0]),true);

	//绘制实心的多边形
	glLineWidth(1);
	CCPoint filledVertices[] = { ccp(0,120), ccp(50,120), ccp(50,170), ccp(25,200), ccp(0,170) };
	//须要绘制多边形的点,參数2。点的个数  參数3  填充的颜色
	ccDrawSolidPoly(filledVertices,sizeof(filledVertices)/sizeof(filledVertices[0]),ccc4f(0, 255, 0, 255));

	//绘制矩形
	//參数1   起点   參数2  终点  參数3   填充的颜色
	//打开绘图工具画个矩形  事实上起点就是左上角   终点就是右下角
	ccDrawSolidRect(ccp(visibleSize.width-70,visibleSize.height-20),ccp(visibleSize.width-20,visibleSize.height-70),ccc4f(0, 255, 0, 255));

源代码连接http://download.csdn.net/detail/q269399361/7391247