HTML5技术

HTML5 Canvas游戏开发(四)lufylegend开源库件(下) - suvllian

字号+ 作者:H5之家 来源:H5之家 2016-05-09 17:00 我要评论( )

一、文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象。 1、文本属性 创建的文本框对象不会自动加入可视化对象列表中。只有手动调用addChild()方法才能使它显示。 var layer = new LSprite(); // 初始化LSprite对象 addChild(layer); f

  一、文本

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

  1、文本属性

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

var layer = new LSprite(); //初始化LSprite对象 addChild(layer); 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:数组列号。

 

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

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • 网页版扫雷游戏 - 季末的寂寞

    网页版扫雷游戏 - 季末的寂寞

    2017-04-21 13:00

网友点评