用仿ActionScript的語法來寫html5-第六篇,TextField與輸入框
一,對比
1,html5中
先看看在html5的canvas中的文字顯示
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "40pt Calibri"; context.fillStyle = "#0000ff"; context.fillText("文字测试!", 50, 150);
在html中輸入框就不用說了,需要用到input標籤
<input type="text" id="myTextbox" />
2,在as中
//文字显示 var txt:TextField = new TextField(); txt.text = "文字测试!"; txt.x = 50; txt.y = 50; addChild(txt); //输入框 var txt:TextField = new TextField(); txt.type = TextFieldType.INPUT; txt.x = 50; txt.y = 50; addChild(txt);
二,編寫js類別庫後的程式碼
//文字显示 var txt = new LTextField(); txt.x = 100; txt.text = "TextField 测试"; addChild(txt); //输入框 var txt1 = new LTextField(); txt1.x = 100; txt1.y = 50; txt1.setType(LTextFieldType.INPUT); addChild(txt1);
三,實作方法
文字顯示非常簡單,只需要建立一個LTextField類別和一個show方法就可以了function LTextField(){
var self = this; self.objectindex = ++LGlobal.objectIndex; self.type = "LTextField"; self.texttype = null; self.x = 0; self.y = 0; self.text = ""; self.font = "utf-8"; self.size = "11"; self.color = "#000000"; self.textAlign = "left"; self.textBaseline = "middle"; self.lineWidth = 1; self.stroke = false; self.visible=true; } LTextField.prototype = { show:function (cood){ if(cood==null)cood={x:0,y:0}; var self = this; if(!self.visible)return; LGlobal.canvas.font = self.size+"pt "+self.font; LGlobal.canvas.textAlign = self.textAlign; LGlobal.canvas.textBaseline = self.textBaseline; LGlobal.canvas.lineWidth = self.lineWidth; if(self.stroke){ LGlobal.canvas.strokeStyle = self.color; LGlobal.canvas.strokeText(self.text,parseFloat(cood.x) + parseFloat(self.x), parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size)); }else{ LGlobal.canvas.fillStyle = self.color; LGlobal.canvas.fillText(self.text,parseFloat(cood.x) + parseFloat(self.x), parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size)); } } }
程式碼不難理解,就是呼叫show方法的時候,把它畫在canvas上面而已,
關鍵就是輸入框,因為html中,輸入框是一個標籤,怎麼把這個標籤畫到canvas?或者說canvas可以直接實在輸入框?
這個我不太清楚,如果有高手知道的話,希望能告訴偶一聲,
我現在說一說我的做法,我是在textField是input的時候,先畫一個矩形方框,然後利用div,把textbox直接顯示在對應的位置上
我的html裡一開始只有下面程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>仿ActionScript测试-TextField</title> <script type="text/javascript" src="../legend/legend.js"></script> <script type="text/javascript" src="./js/Main.js"></script> </head> <body> <div id="mylegend">页面读取中……</div> </body> </html>
然後,利用javascript寫入一個canvas和一個textbox,作為準備工作
LGlobal.object = document.getElementById(id); LGlobal.object.innerHTML='<div id="' + LGlobal.id + '_inittxt" style="position:absolute;margin:0px 0px 0px 0px;width:'+width+'px;height:'+height+'px;">数据读取中……</div>' + '<div style="position:absolute;margin:0px 0px 0px 0px;z-index:0;"> <canvas id="' + LGlobal.id + '_canvas">您的浏览器不支持HTML5</canvas></div>'+ '<div id="' + LGlobal.id + '_InputText" style="position:absolute;margin:0px 0px 0px 0px;z-index:10;display:none;"> <input type="text" id="' + LGlobal.id + '_InputTextBox" /></div>'; LGlobal.canvasObj = document.getElementById(LGlobal.id+"_canvas"); LGlobal.inputBox = document.getElementById(LGlobal.id + '_InputText'); LGlobal.inputTextBox = document.getElementById(LGlobal.id + '_InputTextBox'); LGlobal.inputTextField = null;
一開始將textbox隱藏,然後的做法是,當點擊我畫的矩形方框的時候,將它顯示到矩形方框上面,然後當點擊其他地方的時候,把輸入的內容賦值給textField後隱藏textbox
具體做法不多說了,下面是完整的LTextField程式碼,或是你一會兒可以直接滑鼠右健看完整程式碼function LTextField(){
var self = this; self.objectindex = ++LGlobal.objectIndex; self.type = "LTextField"; self.texttype = null; self.x = 0; self.y = 0; self.text = ""; self.font = "utf-8"; self.size = "11"; self.color = "#000000"; self.textAlign = "left"; self.textBaseline = "middle"; self.lineWidth = 1; self.stroke = false; self.visible=true; } LTextField.prototype = { show:function (cood){ if(cood==null)cood={x:0,y:0}; var self = this; if(!self.visible)return; if(self.texttype == LTextFieldType.INPUT){ self.inputBackLayer.show({x:self.x+cood.x,y:self.y+cood.y}); if(LGlobal.inputBox.name == "input"+self.objectindex){ LGlobal.inputBox.style.marginTop = (self.y+cood.y) + "px"; LGlobal.inputBox.style.marginLeft = (self.x+cood.x) + "px"; } } LGlobal.canvas.font = self.size+"pt "+self.font; LGlobal.canvas.textAlign = self.textAlign; LGlobal.canvas.textBaseline = self.textBaseline; LGlobal.canvas.lineWidth = self.lineWidth; if(self.stroke){ LGlobal.canvas.strokeStyle = self.color; LGlobal.canvas.strokeText(self.text,parseFloat(cood.x) + parseFloat(self.x), parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size)); }else{ LGlobal.canvas.fillStyle = self.color; LGlobal.canvas.fillText(self.text,parseFloat(cood.x) + parseFloat(self.x), parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size)); } }, setType:function(type){ var self = this; if(self.texttype != type && type == LTextFieldType.INPUT){ self.inputBackLayer = new LSprite(); self.inputBackLayer.graphics.drawRect(1,"black",[0, 0, 150, 20],true,"#cccccc"); self.inputBackLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function(){ if(self.texttype != LTextFieldType.INPUT)return; LGlobal.inputBox.style.display = ""; LGlobal.inputBox.name = "input"+self.objectindex; LGlobal.inputTextField = self; LGlobal.inputTextBox.value = self.text; }); }else{ self.inputBackLayer = null; } self.texttype = type; }, mouseEvent:function (event,type,cood){ if(cood==null)cood={x:0,y:0}; var self = this; if(self.inputBackLayer == null)return; self.inputBackLayer.mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y}); } }
以上就是用仿ActionScript的語法來寫html5-第六篇,TextField與輸入框的內容,更多相關內容請關注PHP中文網(www.php.cn)!