Use ActionScript-like syntax to write html5 - Part 6, TextField and input box-H5 Tutorial-php.cn

Use ActionScript-like syntax to write html5 - Part 6, TextField and input box

1, comparison
1,html5
First look at the text in the canvas of html5 Needless to say, display

var canvas = document.getElementById("myCanvas");    
var context = canvas.getContext("2d");    
context.font = "40pt Calibri";    
context.fillStyle = "#0000ff";  
context.fillText("文字测试!", 50, 150);

Copy after login

in the input box in html, you need to use the input tag

<input type="text" id="myTextbox" />

Copy after login

2, in 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);

Copy after login

2, after writing the js class library Code

//文字显示  
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);

Copy after login

3, Implementation method
Text display is very simple, you only need to create a LTextField class and a show method 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));  
        }  
    }  
}

Copy after login

The code is not difficult to understand, Just draw it on the canvas when calling the show method.
The key is the input box, because in HTML, the input box is a label. How to draw this label on the canvas? Or can canvas directly display the input box?
I’m not sure about this. If anyone knows about it, I hope you can tell me.
Now let me talk about my approach. When the textField is input, I first draw a rectangular box, and then Use div to display the textbox directly at the corresponding position
My html only has the following code at the beginning

<!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>

Copy after login

Then, use javascript to write a canvas and a textbox as preparation work

LGlobal.object = document.getElementById(id);  
LGlobal.object.innerHTML=&#39;<div id="&#39; + LGlobal.id + &#39;_inittxt" 
style="position:absolute;margin:0px 0px 0px 0px;width:&#39;+width+&#39;px;height:&#39;+height+&#39;px;">数据读取中……</div>&#39; +   
&#39;<div style="position:absolute;margin:0px 0px 0px 0px;z-index:0;">
<canvas id="&#39; + LGlobal.id + &#39;_canvas">您的浏览器不支持HTML5</canvas></div>&#39;+  
&#39;<div id="&#39; + LGlobal.id + &#39;_InputText" style="position:absolute;margin:0px 0px 0px 0px;z-index:10;display:none;">
<input type="text" id="&#39; + LGlobal.id + &#39;_InputTextBox" /></div>&#39;;  
  
  
LGlobal.canvasObj = document.getElementById(LGlobal.id+"_canvas");  
LGlobal.inputBox = document.getElementById(LGlobal.id + &#39;_InputText&#39;);  
LGlobal.inputTextBox = document.getElementById(LGlobal.id + &#39;_InputTextBox&#39;);  
LGlobal.inputTextField = null;

Copy after login

Hide the textbox at first. Then, when you click on the rectangular box I drew, display it on the rectangular box, and then when you click elsewhere, assign the input content to the textField. I won’t go into details about how to hide textbox
. The following is the complete LTextField code, or you can right-click to see the complete code later: 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});  
          
    }  
}

Copy after login

The above is using the syntax of imitating ActionScript. Writing HTML5 - Part 6, the content of TextField and input box, please pay attention to the PHP Chinese website (www.php.cn) for more related content!