[ 登录注册 ]

HTML5

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

2016-08-17 14:11:16 admin 返回上一页

 

用仿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的时候,先画一个矩形方框,然后利用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自动消失


 

摘自 lufy小屋

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377707.html
返回上一页    返回分类 上一篇:   下一篇:
相关