cocostudio的TextField空件实现光标。

cocostudio3.10 已经帮我们做好了TextField控件，提供了触摸事件和一些常用API，已经不用向原来自己写一个TextFied了，但是还没有实现光标，下面我们在这个控件的基础上面来加入光标的功能。

CursorTextField .h

#ifndef CursorTextField_h
#define CursorTextField_h
#include"cocos2d.h"
#include"cocostudio/CocoStudio.h"
#include"ui/CocosGUI.h"

using namespace cocos2d;
using namespace ui;
using namespace cocostudio;

class CursorTextField :public Node
{
public:
CursorTextField();
static Node* createWithTextField(TextField *text,const std::string &TTFpath,int fontSize);
//static Node* createWithTextField(TextField *text);
bool init(TextField *text, const std::string &TTFpath, int fontSize);
void initTextField(TextField *text, const std::string &TTFpath, int fontSize);
void purge();

void addCursorSprite();
void textFiledEvent(Ref *pSender, TextField::EventType type);

int getContentWidth();
public:
TextField* m_textField;
std::string m_ttfPath;
int m_FontSize;

Sprite* m_cursorSprite;
Action* m_cursorAction;
};
#endif

CursorTextField .cpp

#include"CursorTextField.h"
CursorTextField::CursorTextField()
{
m_textField = NULL;
m_cursorSprite = NULL;
m_cursorAction = NULL;
}
Node* CursorTextField::createWithTextField(TextField *text, const std::string &TTFpath, int fontSize)
{
auto ref = new CursorTextField;
if (ref &&ref->init(text, TTFpath, fontSize))
{
ref->autorelease();
}
else CC_SAFE_DELETE(ref);
return ref;
}
bool CursorTextField::init(TextField *text, const std::string &TTFpath, int fontSize)
{

initTextField(text, TTFpath, fontSize);

addCursorSprite();

m_textField->addEventListener(CC_CALLBACK_2(CursorTextField::textFiledEvent,this));

return true;
}
void CursorTextField::initTextField(TextField *text, const std::string &TTFpath, int fontSize)
{
m_textField = text;
m_ttfPath = TTFpath;
m_FontSize = fontSize;
}

int CursorTextField::getContentWidth()
{
auto label = Label::createWithTTF(m_textField->getString(), m_ttfPath, m_FontSize);
auto width = label->getContentSize().width;
return m_textField->getPosition().x+width;
}
void CursorTextField::textFiledEvent(Ref *pSender, TextField::EventType type)
{
switch (type)
{
case TextField::EventType::ATTACH_WITH_IME:
{
m_cursorSprite->setVisible(true);
m_cursorSprite->setPositionX(getContentWidth());
break;
}

case TextField::EventType::DETACH_WITH_IME:
m_cursorSprite->setVisible(false);
break;

case TextField::EventType::INSERT_TEXT:
{
m_cursorSprite->setVisible(true);
m_cursorSprite->setPositionX(getContentWidth());
break;
}

case TextField::EventType::DELETE_BACKWARD:
{
m_cursorSprite->setVisible(true);
m_cursorSprite->setPositionX(getContentWidth());

break;
}

default:
break;
}
}
void CursorTextField::addCursorSprite()
{
int column = 2;
int height = 20;
int pData[50][2];
for (int i = 0; i < height; i++)
{
for (int j = 0; j < column; j++)
{
pData[i][j] = 0xffffffff;
}
}
Texture2D* texture = new Texture2D();

//指针，指针长度，像素类型，像素宽度，高度，内容大小
texture->initWithData(pData, 20, Texture2D::PixelFormat::RGB888, 1, m_textField->getFontSize(),CCSizeMake(column, height));
m_cursorSprite = Sprite::createWithTexture(texture);
m_cursorSprite->setPositionY(m_textField->Node::getPositionY()+2);

texture->autorelease();

addChild(m_cursorSprite);
m_cursorSprite->setVisible(false);
m_cursorAction = RepeatForever::create(Sequence::create(FadeOut::create(0.7f), FadeIn::create(0.7f),NULL));
m_cursorSprite->runAction(m_cursorAction);
}

使用：

//m_TextUsername是从Csb中得到的TextField控件。
//记住： 一定要将cocostudio中的TextField的字体大小和
//字体样式的设置和程序当中的label一样。我的代码已经处理过
//大家可以直接不管，直接使用。只是想提醒下这个细节。
m_TextUsernameField= CursorTextField::createWithTextField(m_TextUsername, "fonts/kaiti.ttf", m_TextUsername->getFontSize());
addChild(m_TextUsernameField);

效果图