用仿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——第六篇，TextField与输入框的更多相关文章

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...
用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果
用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...
用仿ActionScript的语法来编写html5——第七篇，自定义按钮
第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...
用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg
第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...
用仿ActionScript的语法来编写html5——第九篇，仿URLLoader读取文件
第九篇,仿URLLoader读取文件先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...
用仿ActionScript的语法来编写html5——第一篇，显示一张图片
第一篇,显示一张图片一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

随机推荐

linux 查找文件并移动
find . -name '10-*.dat' -exec mv {} ../ \; 这里: => -exec mv {} /mnt/mp3 \; - 运行mv命令. => {} ...
TCP会话劫持_转
前言通常,大家所说的入侵,都是针对一台主机,在获得管理员权限后,就很是得意:其实,真正的入侵是占领整个内部网络.针对内部网络的攻击方法比较多,但比较有效的方法非ARP欺骗.DNS欺骗莫属了.但是,不管 ...
Centos版本 32或64位查看命令
[root@root nginx]# uname -a Linux root -.el6.x86_64 # SMP Fri Nov :: UTC x86_64 x86_64 x86_64 GNU/Li ...
linux怎么发邮件
邮箱配置: tail /etc/mail.rc #要写在一行 set from=gb17735517416@163.com smtp=smtp.163.com smtp-auth-user=gb ...
每隔10秒自动更新svn 定时更新svn 脚本
任务: */1 * * * * /opt/adobe/fms/webroot/api/svn.sh 这个命令的问题:只更新了版本号,没有更新实际内容,但是直接运行上面shell脚本能更新. 解决:需要 ...
Log4J是Apache组织的开源一个开源项目，通过Log4J，可以指定日志信息输出的目的地，如console、file等。Log4J采用日志级别机制，请按照输出级别由低到高的顺序写出日志输出级别。
Log4J是Apache组织的开源一个开源项目,通过Log4J,可以指定日志信息输出的目的地,如console.file等.Log4J采用日志级别机制,请按照输出级别由低到高的顺序写出日志输出级别. ...
Windows Azure 系列-- 使用Azure + Web API实现图片上传
1. 创建1个Azure账号,登录之后创建1个AzureStorage.左下方点Manage Access会看到Primary Access Key和Storage Account,记住它们的位置,等 ...
xcode 运行 lua版本崩溃解决方案
问题描述:运行到LuaStack::init() 崩溃原因: luajit不支持arm64 解决方案:编译luajit64位静态库 a.可以直接下载别人编译好的库,然后直接覆盖cocos2d\ext ...
Android去掉标题的方法
我们写程序的时候经常要全屏显示或者不显示标题.比如我们做地图导航的时候就不要标题了,下面介绍三种方法来实现Android去掉标题. 第一种:也一般入门的时候经常使用的一种方法在setContentV ...
Dubbo基础篇-zookeeper安装（单点）
安装步骤: 一首先安装jdk环境二安装zookeeper 在centos虚拟机192.168.23.131中安装zookeeper: 1 修改操作系统/etc/hosts 文件中的配置: # ...

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

用仿ActionScript的语法来编写html5——第六篇，TextField与输入框的更多相关文章

随机推荐

热门专题