Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 – Teil 6, TextField und Eingabefeld zu schreiben-H5-Tutorial-php.cn

Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben - Teil 6, TextFeld und Eingabefeld

1, Vergleich
1, in HTML5
Schauen Sie sich zuerst den Text im Canvas von HTML5 an Unnötig Wenn Sie beispielsweise

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

Nach dem Login kopieren

im Eingabefeld in HTML anzeigen, müssen Sie das Eingabe-Tag

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

Nach dem Login kopieren

2 als

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

Nach dem Login kopieren

2 verwenden. Code nach dem Schreiben der js-Klassenbibliothek

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

Nach dem Login kopieren

Drei, Implementierungsmethode
Die Textanzeige ist sehr einfach, Sie müssen nur eine LTextField-Klasse und eine Show-Methodenfunktion LTextField(){

< 🎜 erstellen >

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));  
        }  
    }  
}

Nach dem Login kopieren

Der Code ist nicht schwer zu verstehen, wenn die Show-Methode aufgerufen wird.

Der Schlüssel ist das Eingabefeld, da es sich bei dem Eingabefeld um eine Beschriftung handelt Zeichnen Sie dieses Etikett auf die Leinwand? Oder kann Canvas das Eingabefeld direkt anzeigen?
Ich weiß nicht viel darüber, ich hoffe, Sie können es mir sagen. Wenn das Textfeld eingegeben wird, zeichne ich zuerst ein rechteckiges Feld , und dann Verwenden Sie div, um das Textfeld direkt an der entsprechenden Position anzuzeigen
Mein HTML enthält zunächst nur den folgenden Code

Dann verwenden Sie Javascript, um als Vorbereitungsarbeit eine Leinwand und ein Textfeld zu schreiben

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

Nach dem Login kopieren

Verstecken Sie zunächst das Textfeld. Wenn Sie dann auf das von mir gezeichnete rechteckige Feld klicken, wird es über dem rechteckigen Feld angezeigt. Wenn Sie dann auf eine andere Stelle klicken, wird der Eingabeinhalt angezeigt. Ich werde nicht näher darauf eingehen, wie das Textfeld

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;

Nach dem Login kopieren

ausgeblendet wird, nachdem es textField zugewiesen wurde. Im Folgenden finden Sie den vollständigen LTextField-Code. Sie können auch mit der rechten Maustaste klicken, um den vollständigen Code später mit der Funktion LTextField() anzuzeigen

Das ist es. Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 6, den Inhalt von TextField und dem Eingabefeld. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

 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});  
          
    }  
}

Nach dem Login kopieren