HTML5技术

仿AS语法来写HTML5—第6章，TextField与输入框

字号+ 作者：lufy 来源： 2014-11-16 21:26 我要评论( )

用仿ActionScript的语法来编写 html5 第六篇，TextField与输入框 一，对比 1,html5中 首先看看在 html5 的canvas中的文字显示 JavaScript Code 复制内容到剪贴板 var canvas=document.getElementById( myCanvas );

用仿ActionScript的语法来编写html5的canvas中的文字显示

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById("myCanvas");    
  2. var context = canvas.getContext("2d");    
  3. context.font = "40pt Calibri";    
  4. context.fillStyle = "#0000ff";  
  5. context.fillText("文字测试!", 50, 150);  
在html中输入框就不用说了，需要用到input标签
 
XML/HTML Code复制内容到剪贴板
  1. <input type="text" id="myTextbox" />  
2,在as中

JavaScript Code复制内容到剪贴板
  1. //文字显示  
  2. var txt:TextField = new TextField();  
  3. txt.text = "文字测试!";  
  4. txt.x = 50;  
  5. txt.y = 50;  
  6. addChild(txt);  
  7. //输入框  
  8. var txt:TextField = new TextField();  
  9. txt.type = TextFieldType.INPUT;  
  10. txt.x = 50;  
  11. txt.y = 50;  
  12. addChild(txt);  
二,编写js类库后的代码
 
JavaScript Code复制内容到剪贴板
  1. //文字显示  
  2. var txt = new LTextField();  
  3. txt.x = 100;  
  4. txt.text = "TextField 测试";  
  5. addChild(txt);  
  6. //输入框  
  7. var txt1 = new LTextField();  
  8. txt1.x = 100;  
  9. txt1.y = 50;  
  10. txt1.setType(LTextFieldType.INPUT);  
  11. addChild(txt1);  
三,实现方法

文字显示非常简单，只需要建立一个LTextField类和一个show方法就可以了

JavaScript Code复制内容到剪贴板
  1. function LTextField(){  
  2.         var self = this;  
  3.         self.objectindex = ++LGlobal.objectIndex;  
  4.         self.type = "LTextField";  
  5.         self.texttype = null;  
  6.         self.x = 0;  
  7.         self.y = 0;  
  8.         self.text = "";  
  9.         self.font = "utf-8";  
  10.         self.size = "11";  
  11.         self.color = "#000000";  
  12.         self.textAlign = "left";  
  13.         self.textBaseline = "middle";  
  14.         self.lineWidth = 1;  
  15.         self.stroke = false;  
  16.         self.visible=true;  
  17. }  
  18.   
  19. LTextField.prototype = {  
  20.         show:function (cood){  
  21.                 if(cood==null)cood={x:0,y:0};  
  22.                 var self = this;  
  23.                 if(!self.visible)return;  
  24.   
  25.             LGlobal.canvas.font = self.size+"pt "+self.font;    
  26.             LGlobal.canvas.textAlign = self.textAlign;  
  27.             LGlobal.canvas.textBaseline = self.textBaseline;  
  28.             LGlobal.canvas.lineWidth = self.lineWidth;    
  29.   
  30.             if(self.stroke){  
  31.                     LGlobal.canvas.strokeStyle = self.color;  
  32.                     LGlobal.canvas.strokeText(self.text,parseFloat(cood.x) + parseFloat(self.x),  
  33.                             parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size));    
  34.             }else{  
  35.                     LGlobal.canvas.fillStyle = self.color;  
  36.                     LGlobal.canvas.fillText(self.text,parseFloat(cood.x) + parseFloat(self.x),  
  37.                                     parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size));  
  38.             }  
  39.         }  
  40. }  
代码不难理解，就是调用show方法的时候，把它画在canvas上面而已，

关键是输入框，因为html中，输入框是一个标签，怎么把这个标签画到canvas上？或者说canvas可以直接现实输入框？
这个我不太清楚，如果有高手知道的话，希望能告诉偶一声，
我现在说一说我的做法，我是在textField是input的时候，先画一个矩形方框，然后利用div，把textbox直接显示在相应的位置上
我的html里一开始只有下面代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>仿ActionScript测试-TextField</title>  
  6. <script type="text/javascript" src="../legend/legend.js"></script>   
  7. <script type="text/javascript" src="./js/Main.js"></script>   
  8. </head>  
  9. <body>  
  10. <div id="mylegend">页面读取中……</div>  
  11. </body>  
  12. </html>  
然后，利用javascript写入一个canvas和一个textbox，作为准备工作
 
JavaScript Code复制内容到剪贴板
  1. LGlobal.object = document.getElementById(id);  
  2.        LGlobal.object.innerHTML='<div id="' + LGlobal.id + '_inittxt" style="position:absolute;margin:0px 0px 0px 0px;width:'+width+'px;height:'+height+'px;">数据读取中……</div>' +   
  3.        '<div style="position:absolute;margin:0px 0px 0px 0px;z-index:0;"><canvas id="' + LGlobal.id + '_canvas">您的浏览器不支持HTML5</canvas></div>'+  
  4.        '<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>';  
  5.   
  6.        LGlobal.canvasObj = document.getElementById(LGlobal.id+"_canvas");  
  7.        LGlobal.inputBox = document.getElementById(LGlobal.id + '_InputText');  
  8.        LGlobal.inputTextBox = document.getElementById(LGlobal.id + '_InputTextBox');  
  9.        LGlobal.inputTextField = null;  
 

一开始将textbox隐藏，然后的做法是，当点击我画的矩形方框的时候，将它显示到矩形方框上面，然后当点击其他地方的时候，把输入的内容赋值给textField后隐藏textbox
具体做法不多说了，下面是完整的LTextField代码，或者你一会儿可以直接鼠标右健看完整代码

JavaScript Code复制内容到剪贴板
  1.  function LTextField(){  
  2.         var self = this;  
  3.         self.objectindex = ++LGlobal.objectIndex;  
  4.         self.type = "LTextField";  
  5.         self.texttype = null;  
  6.         self.x = 0;  
  7.         self.y = 0;  
  8.         self.text = "";  
  9.         self.font = "utf-8";  
  10.         self.size = "11";  
  11.         self.color = "#000000";  
  12.         self.textAlign = "left";  
  13.         self.textBaseline = "middle";  
  14.         self.lineWidth = 1;  
  15.         self.stroke = false;  
  16.         self.visible=true;  
  17. }  
  18.   
  19. LTextField.prototype = {  
  20.         show:function (cood){  
  21.                 if(cood==null)cood={x:0,y:0};  
  22.                 var self = this;  
  23.                 if(!self.visible)return;  
  24.                 if(self.texttype == LTextFieldType.INPUT){  
  25.                         self.inputBackLayer.show({x:self.x+cood.x,y:self.y+cood.y});  
  26.                     if(LGlobal.inputBox.name == "input"+self.objectindex){  
  27.                             LGlobal.inputBox.style.marginTop = (self.y+cood.y) + "px";  
  28.                             LGlobal.inputBox.style.marginLeft = (self.x+cood.x) + "px";  
  29.                     }  
  30.                 }  
  31.             LGlobal.canvas.font = self.size+"pt "+self.font;    
  32.             LGlobal.canvas.textAlign = self.textAlign;  
  33.             LGlobal.canvas.textBaseline = self.textBaseline;  
  34.             LGlobal.canvas.lineWidth = self.lineWidth;    
  35.   
  36.             if(self.stroke){  
  37.                     LGlobal.canvas.strokeStyle = self.color;  
  38.                     LGlobal.canvas.strokeText(self.text,parseFloat(cood.x) + parseFloat(self.x),  
  39.                             parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size));    
  40.             }else{  
  41.                     LGlobal.canvas.fillStyle = self.color;  
  42.                     LGlobal.canvas.fillText(self.text,parseFloat(cood.x) + parseFloat(self.x),  
  43.                                     parseFloat(cood.y) + parseFloat(self.y) + parseFloat(self.size));  
  44.             }  
  45.         },  
  46.         setType:function(type){  
  47.                 var self = this;  
  48.                 if(self.texttype != type && type == LTextFieldType.INPUT){  
  49.                         self.inputBackLayer = new LSprite();  
  50.                         self.inputBackLayer.graphics.drawRect(1,"black",[0, 0, 150, 20],true,"#cccccc");  
  51.                         self.inputBackLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function(){  
  52.                                 if(self.texttype != LTextFieldType.INPUT)return;  
  53.                                 LGlobal.inputBox.style.display = "";  
  54.                                 LGlobal.inputBox.name = "input"+self.objectindex;  
  55.                             LGlobal.inputTextField = self;  
  56.                             LGlobal.inputTextBox.value = self.text;  
  57.                         });  
  58.                 }else{  
  59.                         self.inputBackLayer = null;  
  60.                 }  
  61.                 self.texttype = type;  
  62.         },  
  63.         mouseEvent:function (event,type,cood){  
  64.                 if(cood==null)cood={x:0,y:0};  
  65.                 var self = this;  
  66.                 if(self.inputBackLayer == null)return;  
  67.                 self.inputBackLayer.mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});  
  68.                   
  69.         }  
  70. }  


看一下成果吧
http://fsanguo.comoj.com/html5/jstoas05/index.html
点击输入框，textbox会自动显示，输入后点击其他地方，textbox自动消失

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章，URLLoader读取文件

    仿AS语法来写HTML5—第9章，URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章，图片处理+粒子

    仿AS语法来写HTML5—第8章，图片处理+粒子

    2014-11-16 21:26

网友点评
精彩导读
Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

HTML5优势 - 计划

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习