cocos2d-x Demo-实现画笔功能

首先，原文来自 沈大海：cocos2d-x 2.0实现绘图功能实例-《你画你猜》--沈大海cocos2d-x教程14

原理是这样的，当出现屏幕触摸事件时，记录触摸点的坐标，然后通过重载node的draw()方法，这个方法每帧会画一次屏幕，我们在该方法中将记录的点画出来。当然在智能机上其实不推荐直接绘制几何图像，因为大量的坐标编码会极大降低机器的工作效率，而且可能和其他图片产生渲染遮挡的问题，由于这个只是小demo，所以就无所谓。

研究过沈大海的代码后觉得写得稍微有点粗糙，他的版本如果想画东西你只能一笔画完，如果再画第二笔那么第一笔的内容就会被清空，根据他的代码我进行了修改，实现了随意画的功能，并且还添加了一个按钮，可以清空画板。

DrawView.h

#ifndef __DRAW_VIEW_H_#define __DRAW_VIEW_H_#include "cocos2d.h"class DrawView : public cocos2d::CCLayerColor{public:DrawView();~DrawView();cocos2d::CCArray *points;cocos2d::CCArray *lines;static cocos2d::CCScene *scene();virtual bool init();virtual bool ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);virtual void ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);virtual void ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);virtual void draw();virtual void menuCloseCallback(cocos2d::CCObject* pSender);virtual void registerWithTouchDispatcher(void);CREATE_FUNC(DrawView);};#endif

DrawView.cpp

#include "DrawView.h"using namespace cocos2d;DrawView::DrawView(){points = new CCArray;points->retain();lines = new CCArray;lines->retain();}DrawView::~DrawView(){points->release();points = NULL;lines->release();lines = NULL;}cocos2d::CCScene *DrawView::scene(){CCScene *scene = CCScene::create();DrawView *layer = DrawView::create();scene->addChild(layer);return scene;}bool DrawView::init(){bool bRet = false;do {CCSize size = CCDirector::sharedDirector()->getWinSize();// 文字标签，内容是replayCCLabelTTF *rePlay = CCLabelTTF::labelWithString("replay", "Arial", 24); CC_BREAK_IF(!rePlay);// 把文字标签加入菜单项，并设置点击后的回调函数CCMenuItemLabel* pMenu = CCMenuItemLabel::create(rePlay, this, menu_selector(DrawView::menuCloseCallback));CC_BREAK_IF(!pMenu);// 设置菜单项的位置，这里是放在右下角pMenu->setPosition(ccp(size.width - pMenu->getContentSize().width/2, pMenu->getContentSize().height/2));// 菜单CCMenu *menu = CCMenu::create(pMenu, NULL);// 让菜单的坐标系按gl坐标系来，如果不这么设置那么原点是默认的屏幕中央menu->setPosition(CCPointZero);// 把菜单添加进图层this->addChild(menu,0);// 设置层可被触摸this->setTouchEnabled(true);bRet = true;} while (0);return bRet;}void DrawView::registerWithTouchDispatcher(){// 注册层响应屏幕触摸事件CCDirector *director = CCDirector::sharedDirector();director->getTouchDispatcher()->addTargetedDelegate(this, 0, true);}bool DrawView::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent ){// 每次触摸事件肯定是由点击开始，所以开始的坐标存进画点的数组CCPoint *point = new CCPoint;point->setPoint(pTouch->getLocation().x, pTouch->getLocation().y);points->addObject(point);point->release();return true;}void DrawView::ccTouchMoved( cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent ){// 移动的过程中如果移动的太快，会出现画出来是点不连续的情况，所以存进画线的数组，两点// 之间画成线，那图案看起来就会比较连续CCPoint *point = new CCPoint;point->setPoint(pTouch->getLocation().x, pTouch->getLocation().y);lines->addObject(point);point->release();}void DrawView::ccTouchEnded( CCTouch *pTouch, CCEvent *pEvent ){// 结束时添加（-1，-1）这个点，代表这一笔画结束了CCPoint *point = new CCPoint;point->setPoint(-1, -1);lines->addObject(point);point->release();}void DrawView::draw(){// 设置点的宽度为4glPointSize(4);// 设置线的宽度为4glLineWidth(4);if(points == NULL)return;CCObject *_object;// 遍历所有的点并画出CCARRAY_FOREACH(points, _object){CCPoint *point = (CCPoint*)_object;ccDrawPoint(ccp(point->x, point->y));}if(lines == NULL)return;int count = lines->count();bool isFirstPoint = false;for (int i = 0;i < count;i++){CCPoint *point = (CCPoint*)lines->objectAtIndex(i);// 如果是（-1， -1）则不用画出来if (point->equals(ccp(-1, -1))){isFirstPoint = true;}else{// 每一笔如果有滑动那么ccTouchMoved方法就会往lines添加点，由于画线需要// 两个点，所以所以第一点还是画成圆点if (isFirstPoint || i == 0){ccDrawPoint(ccp(point->x, point->y));isFirstPoint = false;}else{// 画线CCPoint *beforePoint = (CCPoint*)lines->objectAtIndex(i-1);ccDrawLine(ccp(point->x, point->y), ccp(beforePoint->x, beforePoint->y));}}}}void DrawView::menuCloseCallback( CCObject* pSender ){// 清空所有点points->removeAllObjects();lines->removeAllObjects();}

最后上图

附本章源码下载：http://download.csdn.net/detail/lpkkk/5002135

文章所写的东西只是我自己的理解，如果哪里出现错误，敬请斧正。

您可以留言、微博私聊我或Email我

我的微博：http://weibo.com/u/2007282737

我的Email：[e-mail]

本文所有内容均为原创，转载请注明出处 lpk：http://blog.csdn.net/lpkkk ，谢谢！