当前位置:Gxlcms > html代码 > 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

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

时间:2021-07-01 10:21:17 帮助过:37人阅读

用仿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.gxlcms.com)!

人气教程排行