HTML5 Canvas游戏开发（四）lufylegend开源库件(下)

时间：2021-11-25 20:54:18

　　一、文本

　　LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象。

　　1、文本属性

　　创建的文本框对象不会自动加入可视化对象列表中。只有手动调用addChild()方法才能使它显示。

var layer = new LSprite();   //初始化LSprite对象

addChild(layer);    //将对象添加进canvas画布中

var field = new LTextField();   //创建文本框对象

field.text = "Hello World!";   //设置文本属性，添加文本内容

layer.addChild(field);   //将文本框对象添加进LSprite对象中

　　文本框对象还有很多其他的属性：坐标、文字大小、字体风格、字体颜色。

field.x = 50;

field.y = 50;

field.text = "Hello World!";

field.size = 25;

field.color = "#333333";

field.weight = "bolder";

　　2、输入框

　　使用LTextField对象的setType函数，可将texttype属性设为LTextFieldType.INPUT，将其变成一个输入框。

field.setType(LTextFieldType.INPUT);

　　二、事件

　　1、鼠标事件

　　鼠标事件分为鼠标按下（LMouseEvent.MOUSE_DOWN）、鼠标弹起（LMouseEvent.MOUSE_UP）和鼠标移动（LMouseEvent.MOUSE_MOVE）3个事件。

init(50,"mylegend",300,300,main);

var field;

function main(){

   var layer = new LSprite();

   layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');

   addChild(layer);

   field = new LTextField();

   field.text = "Wait Click!";

   layer.addChild(field);

   layer.addEventListener(LMouseEvent.MOUSE_DOWN,downshow);  //事件监听

   layer.addEventListener(LMouseEvent.MOUSE_UP,upshow);

}

function downshow(event){

    field.text = "Mouse Down!";

}

function upshow(event){

    field.text = "Mouse Up!";

}

　　在手机上发生的是TOUCH_START、TOUCH_END、TOUCH_MOVE事件，但是在库件中不需要进行区分，因为库件会根据运行环境自动进行转换。

　　2、循环事件

　　如果想重复执行某段代码，就需要循环事件的监听，循环事件指的是按照指定间隔事件不断重复地广播某事件。

var layer = new LSprite();

layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');

addChild(layer);

field = new LTextField();

layer.addChild(field);

layer.addEventListener(LEvent.ENTER_FRAME,onframe);  //使用循环事件重复调用onframe函数。

　　3、键盘事件

　　在库件中用LKeyboardEvent.KEY_DOWN、LKeyboardEvent.KEY_UP、LKeyboardEvent.KEY_PRESS来侦听键盘事件。

init(50,"mylegend",300,300,main);

var field;

function main(){

    var layer = new LSprite();

    layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');

    addChild(layer);

    field = new LTextField();

    field.text = "Wait Click!";

    layer.addChild(field);

    LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,downshow);

    LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,upshow);

}

function downshow(event){

    field.text = event.keyCode + " Down!";

}

function upshow(event){

    field.text = event.keyCode + " Up!";

}

　　需要特别注意的是，由于键盘事件需要加载到window上，所以加载的时候方法有变化。

　　注意看监听函数，在这里使用的是LEvent.addEventListener来加载键盘事件，其中LGlobal.window就是window对象。所以键盘事件是加载到window对象上，这样就能监听整个浏览器窗口。

　　二、按钮

　　库件中内置了LButton类来添加按钮。

　　原型：LButton（Displayobject_up，Displayobject_over）

　　参数：Displayobject_up：代表按钮默认是UP的状态，即没被按下。

　　Displayobject_over：鼠标移动到按钮上时按钮的状态，离开时又恢复成UP状态。

var testButton = new LButton(bitmapup,bitmapover);

testButton.y = 50;

layer.addChild(testButton);

testButton.addEventListener(LMouseEvent.MOUSE_DOWN,downshow);

　　三、动画

　　在库件中使用LAnimation类和循环事件，可以实现一组动画的播放。

　　LAnimation原型：LAnimation（layer,data,list）；

　　layer：LSprite对象。

　　data：LBitmapData对象。

　　list：一个存储坐标的二维数组。

　　LGlobal.divideCoordinate(width,height,row,col):准备一个二维的坐标数组。

　　该函数会将传入图片的宽和高按照行数和列数进行拆分计算，从而得到一个二维数组。

　　如果要实现图片的循环播放，则需要用LAnimation类的setAction函数。

　　函数原型：setAction(rowIndex,colIndex)

　　参数：rowIndex：数组行号。

　　colIndex：数组列号。

相关文章