返回上一页
客服QQ
客服QQ
一切从沟通开始……
仿AS语法来写HTML5—第6章，TextField与输入框
作者：睿美印象网站建设工作室 发布日期：2012-11-16
用仿ActionScript的语法来编写html5——第六篇，TextField与输入框
一，对比
1,html5中
首先看看在html5的canvas中的文字显示
JavaScript Code复制内容到剪贴板
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillStyle = "#0000ff";
context.fillText("文字测试!", 50, 150);
在html中输入框就不用说了，需要用到input标签
XML/HTML Code复制内容到剪贴板
<input type="text" id="myTextbox" />
2,在as中
JavaScript Code复制内容到剪贴板
//文字显示
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);
二,编写js类库后的代码
JavaScript Code复制内容到剪贴板
//文字显示
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);
三,实现方法
文字显示非常简单，只需要建立一个LTextField类和一个show方法就可以了
JavaScript Code复制内容到剪贴板
function 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方法的时候，把它画在canvas上面而已，
关键是输入框，因为html中，输入框是一个标签，怎么把这个标签画到canvas上？或者说canvas可以直接现实输入框？
这个我不太清楚，如果有高手知道的话，希望能告诉偶一声，
我现在说一说我的做法，我是在textField是input的时候，先画一个矩形方框，然后利用div，把textbox直接显示在相应的位置上
我的html里一开始只有下面代码
XML/HTML Code复制内容到剪贴板
<!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写入一个canvas和一个textbox，作为准备工作
JavaScript Code复制内容到剪贴板
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;
一开始将textbox隐藏，然后的做法是，当点击我画的矩形方框的时候，将它显示到矩形方框上面，然后当点击其他地方的时候，把输入的内容赋值给textField后隐藏textbox
具体做法不多说了，下面是完整的LTextField代码，或者你一会儿可以直接鼠标右健看完整代码
JavaScript Code复制内容到剪贴板
function 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});
}
}
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
一，对比
1,html5中
首先看看在html5的canvas中的文字显示
JavaScript Code复制内容到剪贴板
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillStyle = "#0000ff";
context.fillText("文字测试!", 50, 150);
在html中输入框就不用说了，需要用到input标签
XML/HTML Code复制内容到剪贴板
<input type="text" id="myTextbox" />
2,在as中
JavaScript Code复制内容到剪贴板
//文字显示
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);
二,编写js类库后的代码
JavaScript Code复制内容到剪贴板
//文字显示
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);
三,实现方法
文字显示非常简单，只需要建立一个LTextField类和一个show方法就可以了
JavaScript Code复制内容到剪贴板
function 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方法的时候，把它画在canvas上面而已，
关键是输入框，因为html中，输入框是一个标签，怎么把这个标签画到canvas上？或者说canvas可以直接现实输入框？
这个我不太清楚，如果有高手知道的话，希望能告诉偶一声，
我现在说一说我的做法，我是在textField是input的时候，先画一个矩形方框，然后利用div，把textbox直接显示在相应的位置上
我的html里一开始只有下面代码
XML/HTML Code复制内容到剪贴板
<!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写入一个canvas和一个textbox，作为准备工作
JavaScript Code复制内容到剪贴板
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;
一开始将textbox隐藏，然后的做法是，当点击我画的矩形方框的时候，将它显示到矩形方框上面，然后当点击其他地方的时候，把输入的内容赋值给textField后隐藏textbox
具体做法不多说了，下面是完整的LTextField代码，或者你一会儿可以直接鼠标右健看完整代码
JavaScript Code复制内容到剪贴板
function 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});
}
}
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- 99款高质量免费(X)HTML/CSS模板
- 推荐10款非常优秀的HTML5开发工具
- 跟KingDZ学HTML5之二：再见Audio和Video
- 表格的规范和优先级
- HTML5视频发展状况
- 跟KingDZ学HTML5之六：Canvas特效-阴影和渐变
- HTML5时代：实战PHP之Web页面表单设计
- 第十天 div+css网页标准布局实例教程（二）
- html5 Web开发：防止浏览器假死的方法
- 《精通HTML5编程》第七：Form API
- 新手应该知道的10条css技巧
- 必须知道的22个学习html5的技巧(二)
- 一步一步学做游戏 第一回：游戏分析
- 菜鸟理解css的float浮动属性
- 10个非常棒的Ajax及Javascript实例资源网站
- HTML5版3D实验室七：锥
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
