cocos2d-x输入文字超过输入框如何处理

在iphone应用中我们经常会遇到输入用户名，密码，这时候会提供输入框给用户输入数据。

最近遇到需要在输入框中支持输入长度最长为30位字符的情况

cocos2d-x自身设置当输入文字超过输入框（比如输入框width为40，一个字符宽度为4，那么当输入超过10个字符的时候）输入框中文字就会消失，虽然输入进来了，但是给用户的交互感很差。

iOS自带的输入效果，当超过输入框，前面的字符会前移到输入框之前，输入框里面看到的是最后截断的字符。

cocos2d-x是否支持这样的效果，我们通过查看其代码发现是支持的，只需要做一点小小的修改即可。

创建用户名输入框代码如下：

m_pUserName = CCTextFieldTTF::textFieldWithPlaceHolder("ACCOUNT",CCSize(getWidth(m_pInputName) - 8,24),CCTextAlignmentLeft,"Arial",20);

其中第二个参数CCSize(getWidth(m_pInputName) - 8,24)为输入框长度。

我们进入到CCTextFieldTTF中查看textFieldWithPlaceHolder函数，可以看到cocos2d-x是如何创建输入框中字符的。

textFieldWithPlaceHolder中主要是设置PlaceHolder的值，而显示的代码则都在

bool CCLabelTTF::initWithString(const char *label, CCSize dimensions, CCTextAlignment alignment, const char *fontName,float fontSize)

中。

我们只关注字符是如何处理的，所以只看对const char *label的处理。可以看到CCLabelTTF通过调用自身的setString方法来处理。

在setString方法中，这一段代码是我们需要看的

CCTexture2D *texture;
texture = new CCTexture2D();
texture->initWithString(label, m_tDimensions, m_eAlignment, m_pFontName->c_str(), m_fFontSize);

继续跟进label，在CCTexture2D中label变量传给了text，一直到这里仍然没有对text的显示进行处理，只是不断的将值往下传，由

if (! image.initWithString(text, (int)dimensions.width, (int)dimensions.height, eAlign, fontName, (int)fontSize))
{
   return false;
}

我们进入到CCImage_ios.mm中，终于看到.mm文件，说明已经到了C++和OC的交合处，需要最终修改的应该就在这边。

static bool _initWithString(const char * pText, cocos2d::CCImage::ETextAlign eAlign, const char * pFontName, int nSize,tImageInfo* pInfo)

函数中即为如何显示的代码

我们看看将字符画在方框中的代码

if( [font isKindOfClass:[UIFont class] ] )
   {
       [str drawInRect:CGRectMake(0, 0, dim.width, dim.height) withFont:font lineBreakMode:UILineBreakModeWordWrap alignment:align];
   }
   
#if CC_FONT_LABEL_SUPPORT
   else // ZFont class 
   {
       [FontLabelStringDrawingHelper drawInRect:str rect:CGRectMake(0, 0, dim.width, dim.height) withZFont:fontline BreakMode:UILineBreakModeWordWrap alignment:align];
   }
#endif

上面红色字的部分即为字符的截断模式，默认cocos2d-x为UILineBreakModeWordWrap，我们看看是否有其他的截断方式

// Deprecated: use NSLineBreakMode instead (we will be adding deprecation tags soon!)
enum {        
   UILineBreakModeWordWrap = 0,            // Wrap at word boundaries
   UILineBreakModeCharacterWrap,           // Wrap at character boundaries
   UILineBreakModeClip,                    // Simply clip when it hits the end of the rect
   UILineBreakModeHeadTruncation,          // Truncate at head of line: "...wxyz". Will truncate multiline text on first line
   UILineBreakModeTailTruncation,          // Truncate at tail of line: "abcd...". Will truncate multiline text on last line
   UILineBreakModeMiddleTruncation,        // Truncate middle of line:  "ab...yz". Will truncate multiline text in the middle
} NS_DEPRECATED_IOS(2_0,6_0);
typedef NSLineBreakMode UILineBreakMode;

通过查阅UIStringDrawing.h可见蓝色的为我们需要的截断模式，所以我们将所有的UILineBreakModeWordWrap全部替换为UILineBreakModeMiddleTruncation。

再去输入框输入超长字符的时候，会自动将中间的文字给缩成"..."。