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);

效果圖這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章