ActionScript와 유사한 구문을 사용하여 html5 작성 - 6부, TextField 및 입력 상자
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);
이건 잘 모르겠습니다. 혹시 아시는 전문가가 계시다면 알려주시면 좋겠습니다.
이제 내 방법에 대해 설명하겠습니다. 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)); } } }
<!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='<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;