4.1 lufylegend库件简介
http://lufylegend.com/lufylegend
在lufylegend库件的使用步骤:
(1)引入lufylegend库件
(2)在HTML中创建一个<div>标签
(3)使用init函数进行初始化工作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
</head>
<body>
<div id="mylegend">loading...</div>
<script type="text/javascript">
init(50, "mylegend", 500, 350, main);
function main() {
alert("lufylegend start");
}
</script>
</body>
</html>
4.2 图片的加载与显示
步骤:
(1)使用Lloader类加载图片数据
(2)将读取完的图片数据保存到LbitmapData中
(3)利用Lbitmap将图片显示到画板上。
<script type="text/javascript">
var loader;
init(50, "mylegend", 500, 350, main);
function main() {
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("face.jpg", "bitmapData");
}
function loadBitmapdata(event) {
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
addChild(bitmap);
}
</script>
LBitmapData对象:LBitmapData(image, x, y, width, height)
LBitmap对象:还可以控制图片的各种属性,如坐标、透明度、旋转、缩放等。
4.3 层的概念
让不同的图像按照先后顺序显示到屏幕上,lufylegend.js为canvas实现了层的概念,它就是LSprite对象。用法简单
var layer = new LSprite();
addChild(layer);
<div id="mylegend">loading...</div>
<script type="text/javascript">
var loader;
init(50, "mylegend", 500, 350, main);
function main() {
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("face.jpg", "bitmapData");
}
function loadBitmapdata(event) {
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
var layer = new LSprite();
addChild(layer);
layer.addChild(bitmap);
layer.x = 50;
layer.y = 50;
layer.rotate = 60;
}
</script>
4.4 使用LGraphics对象绘图
绘制矩形:drawRect(thickness, lineColor, pointArray, isfill, color);
- thickness:边框线宽
- lineColor:边框颜色
- pointArray:矩形范围数组【坐标x,坐标y,长,宽】
- isfill:是否填充矩形
- color:填充颜色
绘制圆:drawArc(thickness, lineColor, pointArray, isfill, color);
- thickness:边框线宽
- lineColor:边框颜色
- pointArray:矩形范围数组【坐标x,坐标y,半径,起始角度,结束角度,顺时针或逆时针】
- isfill:是否填充
- color:填充颜色
- thickness:边框线宽
- lineColor:边框颜色
- vertices:顶点数组【】
- isfill:是否填充矩形
- color:填充颜色
使用LSprite对象进行绘图:上面的绘图都可以使用LSprite对象中的graphics来实现。
layer.graphics.xxxx()
使用LGraphics对象绘制图片:
<script type="text/javascript">
var loader;
init(50, "mylegend", 500, 350, main);
function main() {
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("face.jpg", "bitmapData");
}
function loadBitmapdata(event) {
var bitmapdata = new LBitmapData(loader.content);
var backlayer = new LSprite();
addChild(backlayer);
backlayer.graphics.beginBitmapFill(bitmapdata);
backlayer.graphics.drawArc(1, "#000", [110,80,50,0,Math.PI*2]);
}
</script>
4.5 文本
LTextField对象是专门用于显示文本信息的一个对象
<script type="text/javascript">
var loader;
init(50, "mylegend", 500, 350, main);
function main() {
var layer = new LSprite();
addChild(layer);
var field = new LTextField();
field.text = "Hello World";
layer.addChild(field);
}ss
</script>
4.6 事件
addEventListener可以为各种事件添加侦听
鼠标:鼠标按下(LMouseEvent.MOUSE_DOWN)、鼠标弹起(LMouseEvent.MOUSE_UP)和鼠标移动(LMouseEvent.MOUSE_MOVE)
循环事件:按照指定间隔时间不断重复地广播某事件。用LEvent.ENTER_FRAME来添加侦听循环事件。
layer.addEventListener(LEvent.ENTER_FRAME, onframe);
键盘事件:LKeyboardEvent.KEY_DOWN、LKeyboardEvent.KEY_UP和LKeyboardEvent.KEY_PRESS
由于键盘事件需要加载到window上,所以加载的时候与前面讲述的方法会稍微有些变化
<div id="mylegend">loading...</div>
<script type="text/javascript">
init(50, "mylegend", 500, 350, main);
var field;
function main() {
var layer = new LSprite();
layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
addChild(layer);
sfield = 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!";
}
</script>
4.7 按钮
lufylegend内置了LButton类来添加按钮
LButton(DisplayObject_up, DisplayObject_over)
- DisplayObject_up:代表按钮默认up状态的对象,当鼠标不在按钮上,按钮就处于这个状态。
- DisplayObject_over:当鼠标移动到按钮上时按钮的状态,鼠标离开时按钮又回到up状态。
4.8 动画
利用LAnimation类和循环事件,可以很轻松地实现一组动画的播放。
LAnimation(layer, data, list)
- layer:LSprite对象
- data:LBitmapData对象
- list:一个存储坐标的二维数组
准备一个二维的坐标数组,如16个小图片的坐标。
LGlobal.divideCoordinate(width, height, row, col)
使用setAction函数可以改变播放图片的行号和列号。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
</head>
<body>
<div id="mylegend">loading...</div>
<script type="text/javascript">
init(200, "mylegend", 500, 350, main);
var loader, anime, layer;
function main() {
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("chara.png", "bitmapData");
}
function loadBitmapdata(event) {
var bitmapdata = new LBitmapData(loader.content, 0, 0, 64, 64);
var list = LGlobal.divideCoordinate(256, 256, 4, 4);
//
layer = new LSprite();
addChild(layer);
anime = new LAnimation(layer, bitmapdata, list);
layer.addEventListener(LEvent.ENTER_FRAME, onframe);
}
function onframe(event) {
var action = anime.getAction();
switch(action[0]) {
case 0:
layer.y += 5;
if (layer.y >= 200) {
anime.setAction(2);
}
break;
case 1:
layer.x -= 5;
if (layer.x <= 0) {
anime.setAction(0);
}
break;
case 2:
layer.x += 5;
if (layer.x >= 200) {
anime.setAction(3);
}
break;
case 3:
layer.y -= 5;
if (layer.y <= 0) {
anime.setAction(1);
}
break;
}
anime.onframe();
}
</script>
</body>
</html>