cocos2d-html5的字符输入框

现在cocos2d-html5似乎还没有开发出输入框的概念，于是自己仿造了了他的menu类和menuItem类的关系继承menu类实现了一个inputMenu类，继承menuItem类实现了一个MenuItemInputBox类。然后大概写了下，不是很完善，至少能实现字符输入了。 
缺点在于创建了10个输入框后，CPU占用率达到了100%左右（firefox 17.01中得到的结果），暂时无办法解决，所以发上来看有没有人能解决。 
用法和menu类以及menuItem类使用方法是一样的。 
//简单封装了下
var createTextInputBoxWidthLabel = function(labelStr,labelFontStyle,labelFontSize,labelFontColor,labelX,labelY,centerX,centerY,width,height) {
var textInputBox = MenuItemInputBox.create(cc.c4b(255,0,0,255),cc.c4b(10,10,10,255),width,height);
if(labelStr) {
var inputBoxLabel = cc.LabelTTF.create(labelStr,labelFontStyle,labelFontSize);
inputBoxLabel.setColor(labelFontColor);
inputBoxLabel.setPosition(cc.p(labelX,labelY));
textInputBox.addChild(inputBoxLabel);
}
textInputBox.setPosition(cc.p(centerX,centerY));
return textInputBox;
};
var s = cc.Director.getInstance().getWinSize();
//创建了一个输入框
this._inputBoxUp = createTextInputBoxWidthLabel("向上","Arial",38,cc.c4b(100,100,100,255),80,15,-s.width / 2 + 150,150,40,40);
this._inputBoxUp.setInputStringLength(1);
this._inputBoxUp.setNormalColor(cc.c3b(150,50,150));
this._inputBoxUp.setOpacity(100);
//获取输入框里面输入的字符串
var keySet = this._inputBoxUp.getInputString();
复制代码
var TextInputDisplayLayer = cc.LayerColor.extend({
_labelStr:null,
_fontName:null,
_fontSize:0,
_fontColor:null,
init:function() {
this._super();
return true;
},
initWithSize:function(width,height) {
if(null == this._fontName)
this._fontName = "Arial";
if(0 == this._fontSize)
this._fontSize = 38;
if(null == this._fontColor)
this._fontColor = cc.c3b(0,0,0);
this.setContentSize(cc.size(width,height));
this._labelStr = cc.LabelTTF.create(" ",this._fontName,this._fontSize);
this._labelStr.setColor(this._fontColor);
this._labelStr.setPosition(cc.p(width / 2,height / 2));
this.addChild(this._labelStr);
return true;
},
displayStr:function(dispStr) {
this._labelStr.setString(dispStr);
},
setFontName:function(fontName) {
if(typeof(this._labelStr) != "undefined") {
this._labelStr.setFontName(fontName);
}
},
setFontSize:function(fontSize) {
if(typeof(this._labelStr) != "undefined") {
this._labelStr.setFontSize(fontSize);
}
},
setFontColor:function(fontColor) {
if(typeof(this._labelStr) != "undefined") {
this._labelStr.setColor(fontColor);
}
}
});
var MenuItemInputBox = cc.MenuItem.extend({
_inputDisplayLayer:null,
_textBuf:null,
_normalColor:null,
_selectedColor:null,
_colorOpacity:255,
_maxChracterNum:0,
_curChracterNum:0,
_isItemActive:false,
getNormalColor:function() {
return this._normalColor;
},
setNormalColor:function(color) {
if(color == this._normalColor)
return;
if(typeof(color) != "undefined" &&
typeof(this._inputDisplayLayer) != "undefined") {
this._normalColor = color;
if(!this._isItemActive) {
this._inputDisplayLayer.setColor(color);
}
}
},
getSelectedColor:function() {
return this._selectedImage;
},
setSelectedColor:function(color) {
if(color == this._selectedColor)
return;
if(typeof(color) != "undefined" &&
typeof(this._inputDisplayLayer) != "undefined") {
this._selectedColor = color;
if(this._isItemActive) {
this._inputDisplayLayer.setColor(color);
}
}
},
initWithNormalBgColor:function(normalColor,selectedColor,width,height) {
this.setContentSize(cc.size(width,height));
this._inputDisplayLayer = new TextInputDisplayLayer();
this._inputDisplayLayer.initWithSize(width,height);
this._inputDisplayLayer.setPosition(cc.p(0,0));
this.setNormalColor(normalColor);
this.setSelectedColor(selectedColor);
this.addChild(this._inputDisplayLayer);
this._isEnabled = true;
return true;
},
setColor:function(color) {
this.setNormalColor(color);
},
getColor:function() {
return this.getNormalColor(color);
},
setOpacity:function(opacity) {
this._colorOpacity = opacity;
if(typeof(this._inputDisplayLayer) != "undefined") {
this._inputDisplayLayer.setOpacity(opacity);
}
},
getOpacity:function(opacity) {
return this._colorOpacity = opacity;
},
setFontName:function(fontName) {
if(typeof(this._inputDisplayLayer) != "undefined") {
this._inputDisplayLayer.setFontName(fontName);
}
},
setFontSize:function(fontSize) {
if(typeof(this._inputDisplayLayer) != "undefined") {
this._inputDisplayLayer.setFontSize(fontSize);
}
},
setFontColor:function(fontColor) {
if(typeof(this._inputDisplayLayer) != "undefined") {
this._inputDisplayLayer.setFontColor(fontColor);
}
},
//box is selected(we can run callback)
selected:function() {
if(typeof(this._inputDisplayLayer) != "undefined") {
this._isItemActive = true;
this._inputDisplayLayer.setColor(this._selectedColor);
}
},
//back to unselected state
unselected:function() {
if(typeof(this._inputDisplayLayer) != "undefined") {
this._isItemActive = false;
this._inputDisplayLayer.setColor(this._normalColor);
}
},
handleKey:function(e) {
if(e === cc.KEY.Delete || e === cc.KEY.backspace) {
if(null != this._textBuf) {
if(1 == this._textBuf.length)
this._textBuf = null;
else
this._textBuf = this._textBuf.substr(1,this._textBuf.length - 1);
if(0 != this._curChracterNum)
this._curChracterNum--;
}
}
var key = null;
if(e === cc.KEY.a) {
key = "a";
} else if(e === cc.KEY.b) {
key = "b";
} else if(e === cc.KEY.c) {
key = "c";
} else if(e === cc.KEY.d) {
key = "d";
} else if(e === cc.KEY.e) {
key = "e";
} else if(e === cc.KEY.f) {
key = "f";
} else if(e === cc.KEY.g) {
key = "g";
} else if(e === cc.KEY.h) {
key = "h";
} else if(e === cc.KEY.i) {
key = "i";
} else if(e === cc.KEY.j) {
key = "j";
} else if(e === cc.KEY.k) {
key = "k";
} else if(e === cc.KEY.l) {
key = "l";
} else if(e === cc.KEY.m) {
key = "m";
} else if(e === cc.KEY.n) {
key = "n";
} else if(e === cc.KEY.o) {
key = "o";
} else if(e === cc.KEY.p) {
key = "p";
} else if(e === cc.KEY.q) {
key = "q";
} else if(e === cc.KEY.r) {
key = "r";
} else if(e === cc.KEY.s) {
key = "s";
} else if(e === cc.KEY.t) {
key = "t";
} else if(e === cc.KEY.u) {
key = "u";
} else if(e === cc.KEY.v) {
key = "v";
} else if(e === cc.KEY.w) {
key = "w";
} else if(e === cc.KEY.x) {
key = "x";
} else if(e === cc.KEY.y) {
key = "y";
} else if(e === cc.KEY.z) {
key = "z";
} else if((e === cc.KEY[‘0‘]) || (e === cc.KEY.num0)) {
key = "0";
} else if(e === cc.KEY[‘1‘] || e === cc.KEY.num1) {
key = "1";
} else if(e === cc.KEY[‘2‘] || e === cc.KEY.num2) {
key = "2";
} else if(e === cc.KEY[‘3‘] || e === cc.KEY.num3) {
key = "3";
} else if(e === cc.KEY[‘4‘] || e === cc.KEY.num4) {
key = "4";
} else if(e === cc.KEY[‘5‘] || e === cc.KEY.num5) {
key = "5";
} else if(e === cc.KEY[‘6‘] || e === cc.KEY.num6) {
key = "6";
} else if(e === cc.KEY[‘7‘] || e === cc.KEY.num7) {
key = "7";
} else if(e === cc.KEY[‘8‘] || e === cc.KEY.num8) {
key = "8";
} else if(e === cc.KEY[‘9‘] || e === cc.KEY.num9) {
key = "9";
} else if(e === cc.KEY[‘-‘]) {
key = "-";
} else if(e === cc.KEY[‘.‘]) {
key = ".";
} else if(e === cc.KEY[‘,‘]) {
key = ",";
} else if(e == cc.KEY.left) {
key = "←";
} else if(e == cc.KEY.right) {
key = "→";
} else if(e == cc.KEY.up) {
key = "↑";
} else if(e == cc.KEY.down) {
key = "↓";
}
if(null != key) {
if(null == this._textBuf) {
this._textBuf = key;
this._curChracterNum++;
} else if(this._curChracterNum < this._maxChracterNum) {
this._textBuf += key;
this._curChracterNum++;
} else if(this._curChracterNum >= this._maxChracterNum) {
if(1 == this._textBuf.length)
this._textBuf = key;
else {
this._textBuf = this._textBuf.substr(1,this._textBuf.length - 1);
this._textBuf += key;
}
}
}
if(null == this._textBuf)
this._inputDisplayLayer.displayStr(" ");
else
this._inputDisplayLayer.displayStr(this._textBuf);
//alert("_textBuf: " + this._textBuf);
},
_updateImagesVisibility:function () {
if(this._isEnabled) {
if(typeof(this._inputDisplayLayer) != "undefined") {
this.setOpacity(0);
}
} else {
if(typeof(this._inputDisplayLayer) != "undefined") {
this.setOpacity(this._colorOpacity);
}
}
},
setOpacityModifyRGB:function() {
},
isOpacityModifyRGB:function() {
return false;
},
setInputStringLength:function(len) {
this._maxChracterNum = len;
},
getInputString:function() {
if(this._maxChracterNum != 0 &&
this._curChracterNum != 0)
return this._textBuf;
else
return null;
}
});
MenuItemInputBox.create = function(normalColor,selectedColor,width,height) {
var ret = new MenuItemInputBox();
ret.initWithNormalBgColor(normalColor,selectedColor,width,height);
return ret;
};
var InputMenu = cc.Menu.extend({
_isItemActive:false,
onTouchBegan:function(touch,e) {
if(this._state != cc.MENU_STATE_WAITING || !this._visible || !this._enabled) {
return false;
}
for(var c = this._parent;c != null;c = c.getParent()) {
if(!c.isVisible()) {
return false;
}
}
var _tmpSelect = null;
if(!this._isItemActive) {
this._selectedItem = this._itemForTouch(touch);
} else {
_tmpSelect = this._itemForTouch(touch);
}
if(this._selectedItem) {
if(!this._isItemActive) {
//this._state = cc.MENU_STATE_TRACKING_TOUCH;
this._isItemActive = true;
this._selectedItem.selected();
} else {
if(null == _tmpSelect) {
cc.Assert(this._state == cc.MENU_STATE_TRACKING_TOUCH,"[Menu onTouchEnded] -- invalid state");
this._isItemActive = false;
if(this._selectedItem) {
this._selectedItem.unselected();
}
//this._state = cc.MENU_STATE_WAITING;
} else if(_tmpSelect != this._isItemActive) {
//pressed other input box!
if(this._selectedItem) {
this._selectedItem.unselected();
}
_tmpSelect.selected();
this._selectedItem = _tmpSelect;
}
}
return true;
}
return false;
},
onTouchEnded:function(touch,e) {
},
onTouchMoved:function (touch, e) {
},
onKeyUp:function(e) {
},
onKeyDown:function(e) {
//alert("_isItemActived:" + !this._isItemActive);
if(!this._isItemActive)
return;
this._selectedItem.handleKey(e);
},
initWithArray:function (arrayOfItems) {
if(this.init()){
this.setKeyboardEnabled(true);
this.setTouchEnabled(true);
this._enabled = true;
//it seems that we can‘t get _visible value from parent
this._visible = true;
var winSize = cc.Director.getInstance().getWinSize();
this.ignoreAnchorPointForPosition(true);
this.setAnchorPoint(cc.p(0.5, 0.5));
this.setContentSize(winSize);
this.setPosition(cc.p(winSize.width / 2,winSize.height / 2));
if(arrayOfItems){
for(var i = 0; i< arrayOfItems.length; i++){
this.addChild(arrayOfItems[i],i);
}
}
this._selectedItem = null;
this._state = cc.MENU_STATE_WAITING;
return true;
}
return false;
}
});
InputMenu.create = function() {
var ret = new InputMenu();
if(arguments.length == 0) {
ret.initWithItems(null,null);
} else if(arguments.length == 1) {
if(arguments[0] instanceof Array) {
ret.initWithArray(arguments[0]);
return ret;
}
}
ret.initWithItems(arguments);
return ret;
};

文章由http://nk.39.net/shjl/nszx/nsjf/index.html整编发布