用仿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自动消失

时间： 2024-08-02 06:47:36

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

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

用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图 效果和代码看这里,看不到效果的请下载支持html5的浏览器 http://fsanguo.comoj.com/html5/jstoas07/index.html 2013年3月13日追加 该系列文章写的很早,目前该系列文章中所总结的方法等都已经封装进了lufylegend.js引擎里 lufylegend.js引擎的下载链接 http://lufylegend

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个Graphics,Shape我先不考虑了,它更容易实现些,在Html5中,绘图都是绘在同一个canvas上面的,所以我们现在需要考虑两个问题,1,如何把每个Sprite里的Graphics在不同的时刻,画在同一个地方2,因为我们现在在不停的刷新页面,所以如果我们用Graphics绘图,那么它也需要不断的刷新 那我现在依然先假设,每一个Sprite储存的Graphics,只保存一些绘图

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

第七篇,自定义按钮 这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ backLayer = new LSprite(); addChild(backLayer); btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new L

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

一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之为引擎,希望将来可以作为html5的开源引擎,为html5开发者提供服务. 二,LegendForHtml5Programming1.0库件的构建过程请参照下面的九篇文章,最终代码和构建过程会有些出入,以源码为准.用仿ActionScript的语法来编写html5系列文章第一篇,显示一张图片http

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

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventListener(LEvent.COMPLETE,readFileOk); urlloader.load("../file/test.txt","text"); } function readFileOk(){ mytxt.text = urlloader.data; } 基

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

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并追加show方法,如下: function LSprite(){ var self = this; self.type = "LSprite"; self.x = 0; self.y = 0; self.visible=true; self.childList = new Array()

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

第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete); loader.load(new URLRequest("10594855.png")); } public function complete(

AS语法来写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(&

C#语法糖之第六篇: 泛型委托- Predicate&lt;T&gt;、Func&lt;T&gt;

今天继续分享泛型委托的Predicate<T>,上篇文章讲了Action委托,这个比Action委托功不一样的地方就是委托引用方法是Bool返回值的方法,Action为无返回值.首先我们看一下它的定义吧: 1 public delegate bool Predicate<T>(T obj); 从其定义可以看到,此委托引用一个返回bool 值的方法,在实际开发中,通常使用Predicate<T>委托变量引用一个“判断条件函数”,在判断条件函数内部书写代码表明函数参数所引用