標籤：innerhtml sel 讀取 cti dex back .text index list
一，對比
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}); }}
看一下成果吧,看不到效果的請下載支援html5的瀏覽器
http://fsanguo.comoj.com/html5/jstoas05/index.html
點擊輸入框，textbox會自動顯示，輸入後點擊其他地方，textbox自動消失
用仿ActionScript的文法來編寫html5——第六篇，TextField與輸入框
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
