ホームページ > 記事 > ウェブフロントエンド > ActionScript のような構文を使用して html5 を記述する - パート 6、TextField と入力ボックス
ActionScript のような構文を使用して html5 を記述する - パート 6、TextField と入力ボックス
- 黄舟オリジナル
- 2017-01-17 16:52:111307ブラウズ
ActionScript のような構文を使用して html5 を作成する - パート 6、TextField と入力ボックス
1、比較
1、html5
まずは html5 のキャンバス内のテキスト表示を見てみましょう
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 を使用する必要があり、
//文字显示 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);
2 として、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);
3 の後にコードを記述します。実装方法は
テキスト表示は非常に簡単で、LTextField を作成するだけです。 show メソッド関数 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 メソッドを呼び出すときにキャンバスに描画するだけです。重要なのは、HTML では入力ボックスです。ボックスはラベルです。このラベルをキャンバスに描画するにはどうすればよいですか?それともキャンバスに入力ボックスを直接表示できますか?
これについてはあまり詳しくありません。知っている専門家がいたら教えていただければ幸いです。
今回は、textField を入力するときに、長方形のボックスを描画してから使用します。 div to 対応する位置にテキストボックスを直接表示します
私の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を使ってキャンバスとテキストボックスを書きます
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;最初はテキストボックスを非表示にし、次に、これを実行します: 私が描いた長方形のボックスをクリックすると、長方形のボックスの上に表示され、他の場所をクリックすると、入力内容を textField に割り当て、テキストボックスを非表示にします
特定のメソッドの詳細については、以下が完全な LTextField コードです。または、右クリックして完全なコードを表示できます。関数 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 - パート 6、内容を記述します。 TextField と入力ボックスのその他の関連コンテンツを確認してください。PHP 中国語 Web サイト (www.php.cn) をフォローしてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。