当前位置： 移动技术网 > IT编程>网页制作>Html5 > 用仿ActionScript的语法来编写html5——第六篇，TextField与输入框

用仿ActionScript的语法来编写html5——第六篇，TextField与输入框

2018年12月10日  | 移动技术网IT编程  | 我要评论

快乐大本营2013525,沃达尔,美国人口数量

 

用仿actionscript的语法来编写html5——第六篇，textfield与输入框

 

 

用仿actionscript的语法来编写html5——第一篇，

用仿actionscript的语法来编写html5——第二篇，利用sprite来实现动画

用仿actionscript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

用仿actionscript的语法来编写html5——第四篇，继承与简单的rpg

 

用仿actionscript的语法来编写html5——第五篇，graphics绘图

 

一，对比

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的时候，先画一个矩形方框，然后利用p，把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> 

<p id="mylegend">页面读取中……</p> 

</body> 

</html> 

 

然后，利用javascript写入一个canvas和一个textbox，作为准备工作

 

lglobal.object = document.getelementbyid(id); 

lglobal.object.innerhtml='<p id="' + lglobal.id + '_inittxt" style="position:absolute;margin:0px 0px 0px 0px;width:'+width+'px;height:'+height+'px;">数据读取中……</p>' +  

'<p style="position:absolute;margin:0px 0px 0px 0px;z-index:0;"><canvas id="' + lglobal.id + '_canvas">您的不支持html5</canvas></p>'+ 

'<p id="' + lglobal.id + '_inputtext" style="position:absolute;margin:0px 0px 0px 0px;z-index:10;display:none;"><input type="text" id="' + lglobal.id + '_inputtextbox" /></p>'; 

 

 

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的浏览器

https://fsanguo.comoj.com/html5/jstoas05/

点击输入框，textbox会自动显示，输入后点击其他地方，textbox自动消失


 

摘自 lufy小屋

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网