用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

原创 2011年09月16日 15:28:54
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框


一,对比
1,html5中
首先看看在html5的canvas中的文字显示
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,在as中
//文字显示
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类库后的代码
//文字显示
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方法就可以了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里一开始只有下面代码
<!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,作为准备工作
	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代码,或者你一会儿可以直接鼠标右健看完整代码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});
		
	}
}




看一下成果吧,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas05/index.html
点击输入框,textbox会自动显示,输入后点击其他地方,textbox自动消失




该系列的其他文章


用仿ActionScript的语法来编写html5——第一篇,显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032
用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
http://blog.csdn.net/lufy_legend/article/details/6770713
用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
http://blog.csdn.net/lufy_legend/article/details/6771962
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
http://blog.csdn.net/lufy_legend/article/details/6777784

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:41
  • 5207

[转帖]FMS客户端 ActionScript 语言参考(1)

[转帖]FMS客户端 ActionScript 语言参考(1)来源:蓝色理想译者:起舞弄清影译者博客:http://wenjun.flash9.net/ 面的代码摘自他的博客.招收翻译人员若干加入这个...
  • sujun10
  • sujun10
  • 2007年04月02日 11:13
  • 1246

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article/d...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 17:36
  • 5096

用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEv...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月26日 21:39
  • 5048

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。 这次用Sprite来动态显示图片。 依然遵循上一篇对显示对象的处理的思路,添加LSprit...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月08日 16:25
  • 10147

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 11:34
  • 7680

ActionScript 3.0 学习(六) AS3 文本类TextField属性htmlText学习

AS 3.0程序中对于文本的显示控制是由TextField类完成的,其有两种类型,由Type属性来定义:如果type = TextFieldType.DYNAMIC,那么这个文本框是用户无法编辑的动态...
  • BoRenLiang
  • BoRenLiang
  • 2015年08月16日 14:42
  • 2283

用仿ActionScript的语法来编写html5——第一篇,显示一张图片

最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 ...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月06日 13:15
  • 24769

用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

第八篇,图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:45
  • 6856

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...
  • lufy_Legend
  • lufy_Legend
  • 2011年10月05日 11:21
  • 13533
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
举报原因:
原因补充:

(最多只允许输入30个字)