집 >웹 프론트엔드 >H5 튜토리얼 >ActionScript와 유사한 구문을 사용하여 html5 작성 - 6부, TextField 및 입력 상자

ActionScript와 유사한 구문을 사용하여 html5 작성 - 6부, TextField 및 입력 상자

黄舟원래의: 2017-01-17 16:52:111365검색

1, 비교
1, html5
먼저 html5 캔버스에 있는 텍스트를 살펴보세요. html의 입력란에

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

를 표시해야 합니다. 2. as에

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

라는 입력 태그를 사용해야 합니다. 2. js 클래스를 작성한 후 라이브러리 코드

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

3. 구현 방법

텍스트 표시는 매우 간단합니다. LTextField 클래스와 show 메서드만 생성하면 됩니다. LTextField(){

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

코드는 다음과 같습니다. 이해하기 어렵지 않습니다.

HTML에서는 입력 상자가 레이블이므로 이 레이블을 캔버스에 그리는 방법은 무엇입니까? 아니면 캔버스에 입력 상자를 직접 표시할 수 있나요?

이건 잘 모르겠습니다. 혹시 아시는 전문가가 계시다면 알려주시면 좋겠습니다.
이제 내 방법에 대해 설명하겠습니다. textField가 입력되면 먼저 직사각형 상자를 그립니다. , 그런 다음 div를 사용하여 해당 위치에 직접 텍스트 상자를 표시합니다
내 HTML에는 처음에 다음 코드만 있습니다

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

그런 다음 javascript를 사용하여 준비 작업으로 캔버스와 텍스트 상자를 작성합니다

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

처음에는 텍스트 상자를 숨기고 그 다음에는 제가 그린 직사각형 상자를 클릭하면 직사각형 상자에 표시되고, 그 다음 다른 곳을 클릭하면 입력 내용을 textField에 할당하지 않을 것입니다. 텍스트 상자를 숨기는 방법

에 대해 자세히 알아보세요. 다음은 전체 LTextField 코드입니다. 또는 나중에 마우스 오른쪽 버튼을 클릭하여 전체 코드를 볼 수도 있습니다. function LTextField(){

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;

위의 작업은 다음을 사용하여 수행됩니다. ActionScript 구문 모방 HTML5 작성 - 6부, TextField 및 입력 상자의 내용, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!

성명：

이전 기사：ActionScript와 유사한 구문을 사용하여 html5 작성 - 5부, 그래픽 그리기다음 기사：ActionScript와 유사한 구문을 사용하여 html5 작성 - 5부, 그래픽 그리기

ActionScript와 유사한 구문을 사용하여 html5 작성 - 6부, TextField 및 입력 상자

관련 기사