1. 程式人生 > >cocos2dx-js 將html控制元件元素轉換成cc.Node

cocos2dx-js 將html控制元件元素轉換成cc.Node

前言: cocos2dx-html5 沒有支援輸入框我們的做法是通過javascript 建立  input  textarea 新增 container上面

做法:

var inputStr = document.createElement("input"); 
text:文字屬性 value:文字內容  style:文字樣式 with height top left position等 但是對其位置來很噁心 得根據 container去做位置改變 
但是下面要介紹到是更為省事到辦法

var DOMUtil = function() {}
DOMUtil.createTextArea = function(......) {


var textArea = cc.newElement("textarea");
textArea.style.fontSize = fontSize + "px";
textArea.style.color = fontColor;
textArea.style.background = background;
textArea.style.width = "100%";
textArea.style.height = "100%";
textArea.style.resize = "none";


var textAreaDOM = new cc.Sprite();
textAreaDOM.draw = function () {};


textArea._textAreaDOM = textArea;
parent.addChild(textAreaDOM, 0, "textAreaDOM");
cc.DOM.convert(textAreaDOM);
textAreaDOM.dom.appendChild(textArea);
textAreaDOM.dom.style.width = width + "px";
textAreaDOM.dom.style.height = height + "px";
textAreaDOM.canvas.remove();
textAreaDOM.setPosition(posx, posy);

return textArea;
};

使用的時候只需要:
this._textArea = DOMUtil.createTextArea(this, ......);
// 可以用cocos的方式新增監聽,比如實現CMD+ENTER提交內容的功能
cc._addEventListener(this._textArea, "keypress", 
function (e) {
   if (e.keyCode === cc.KEY.enter && e.ctrlKey == true) {
   // 提交內容
    e.preventDefault();
   }
);