当前位置: 首页 > 工具软件 > lufylegend > 使用案例 >

lufylegend.js的简单使用

翟奕
2023-12-01

js 引入

<script type="text/javascript" src="js/lufylegend/lufylegend-1.10.1.min.js"></script>

html

<div id="legend"></div>

<img src="" alt="" class="photo_img">

 

 

//初始化画布

LInit(40, "legend", 750, 1447, main);

//资源定义,可以是js和图像,js可以不适用name属性,但type属性="js"是需要的

var imgData = [

  {

name: "bg",

path: "img/bg.jpg"

},]

//初始化回调函数
    function main() {
        if (LGlobal.mobile) {
            //根据长宽设置是否按高度适配
            if (window.innerHeight / window.innerWidth > 1.48) {
                LGlobal.width = 750;
                LGlobal.height = 750 * window.innerHeight / window.innerWidth;
                LGlobal.canvasObj.width = LGlobal.width;
                LGlobal.canvasObj.height = LGlobal.height;
            }
        }
        //强制全屏
        //一个 LStageAlign 类中指定舞台在浏览器中的对齐方式的值。
        LGlobal.align = LStageAlign.TOP_MIDDLE;
        //一个 LStageScaleMode 类中指定要使用哪种缩放模式的值。
        //SHOW_ALL[静态] 指定整个应用程序在指定区域中可见,且不会发生扭曲,同时保持应用程序的原始高宽比。
        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;

        LSystem.screen(LStage.FULL_SCREEN);

        //加载资源的动画LoadingSample1~7
        loadingLayer = new LoadingSample7();
        addChild(loadingLayer);
        //LLoadManage.load方法用于加载资源,参数:资源列表,加载过程回调函数用于显示加载动画,加载完成后的回调函数
        LLoadManage.load(imgData, function (progress) {
            loadingLayer.setProgress(progress); //设置进度条进度
        }, function (result) {
            imglist = result;
            removeChild(loadingLayer); //移除进度条
            loadingLayer = null;
            gameinit();
        });
    }
    //result可以认为是一个map,资源列表中的资源可以按键获取
function gameinit() {
        //底层
        //创建一个新的 LSprite 实例。 LSprite 类是基本显示列表构造块:一个可显示图形并且也可包含子项的显示列表节点。
        backLayer = new LSprite();
        addChild(backLayer);

        //da背景
        bgLayer = new LSprite(); //第一个背景
        bgLayer.x = 0;
        bgLayer.y = 0;
        bgLayer.addChild(new LBitmap(new LBitmapData(imglist["bg"])));
        backLayer.addChild(bgLayer);
        AddEvent(); //添加每帧动画事件
        //可以创建多个layer 然后插入到底层模块里,也就是backlayer
    }
    
//动画事件
    function AddEvent() {
       
        backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
    }
function onframe() {
    bg.x +=5;//每帧都会走5px
}

 

 类似资料: