用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
来源:互联网 发布:树莓派3 ubuntu 编辑:程序博客网 时间:2024/05/18 03:56
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
一,对比
1,html5中
首先看看在html5的canvas中的文字显示
在html中输入框就不用说了,需要用到input标签
2,在as中
二,编写js类库后的代码
三,实现方法
文字显示非常简单,只需要建立一个LTextField类和一个show方法就可以了function LTextField(){
代码不难理解,就是调用show方法的时候,把它画在canvas上面而已,
关键是输入框,因为html中,输入框是一个标签,怎么把这个标签画到canvas上?或者说canvas可以直接现实输入框?
这个我不太清楚,如果有高手知道的话,希望能告诉偶一声,
我现在说一说我的做法,我是在textField是input的时候,先画一个矩形方框,然后利用div,把textbox直接显示在相应的位置上
我的html里一开始只有下面代码
然后,利用javascript写入一个canvas和一个textbox,作为准备工作
一开始将textbox隐藏,然后的做法是,当点击我画的矩形方框的时候,将它显示到矩形方框上面,然后当点击其他地方的时候,把输入的内容赋值给textField后隐藏textbox
具体做法不多说了,下面是完整的LTextField代码,或者你一会儿可以直接鼠标右健看完整代码function LTextField(){
看一下成果吧,看不到效果的请下载支持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
一,对比
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——第六篇,TextField与输入框
- 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
- 用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
- 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
- 用仿ActionScript的语法来编写html5——第七篇,自定义按钮
- 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
- 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
- 用仿ActionScript的语法来编写html5——第一篇,显示一张图片
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
- ItemRender---之用 ActionScript类来编写itemRenderer
- 使用ActionScript的语法
- IOS textField、textView输入框的自适应
- TextField的输入问题
- 监听 textfield的输入
- 用Markdown来编写HTML5代码
- Flash的输入框TextField无法输入中文的问题
- UI开发第六篇——仿QQ的滑动Tab
- getline()忽略开头换行符
- 如何用一张操作系统光盘制作一张新的操作系统盘?
- Linux下用C++调用Shell进行截屏
- SQL优化
- (2)提示错误:当前记录集不支持更新。这可能是提供程序的限制,也可能是选定锁定类型的限制。
- 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
- wamp修改mysql数据库root密码
- Windows窗体控件线程安全
- DataRelation(DataSet中父子表)的一个示例
- 关于容器map的操作代码
- 在java + oracle环境下,对于clob类型的数据的插入
- 触发器
- launcher修改---launcher的搜索框和ProtipWidget(widget修改)(有图有真相)
- 平衡二叉搜索树(AVL树)