コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > ActionScript のような構文を使用して html5 を記述する - パート 6、TextField と入力ボックス

ActionScript のような構文を使用して html5 を記述する - パート 6、TextField と入力ボックス

黄舟
リリース： 2017-01-17 16:52:11
オリジナル
1385 人が閲覧しました

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=&#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;
ログイン後にコピー

最初はテキストボックスを非表示にし、次に、これを実行します: 私が描いた長方形のボックスをクリックすると、長方形のボックスの上に表示され、他の場所をクリックすると、入力内容を 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) をフォローしてください。


関連ラベル：
入力ボックス
ソース：php.cn
前の記事：ActionScript のような構文を使用して html5 を記述する - パート 5、グラフィック描画 次の記事：ActionScript のような構文を使用して html5 を作成する - パート 7、カスタム ボタン
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React MUI: 値の選択の問題とデフォルト値の欠落 muiとformikを使用してreactでフォームを作成しています。 select を使用するときに、API のオブジェクトを使用してデフォルト値を設定しましたが、select が...
から 2024-04-04 08:32:56
0
1
420
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート