LayaAir UI 组件 # Clip 切片、ComboBox 下拉框_layaair ui图切割

 

目录

Clip 切片

默认Clip 资源

自定义Clip 资源

ComboBox

编码示例

---

Clip 切片

1、Laya.ui.Clip 组件可用于显示位图切片动画，Clip 可以将一张图片，按横向分隔数量 clipX、竖向分隔数量 clipY，或横向分割每个切片的宽度 clipWidth、竖向分割每个切片的高度 clipHeight，从左向右，从上到下，分割组合为一个切片动画。

2、Clip 组件可以用来播放切片动画，和显示切片动画的某一帧图片。
3、LayaAir 对于以 clip 前缀命令的资源自动识别为 Clip 组件。

4、Image 和 Clip 组件是唯一支持异步加载的两个组件，比如clip.skin = "abc/xxx.png"，其他UI组件均不支持异步加载。

 更多 API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip

默认Clip 资源

1、现在就以使用默认提供的 clip_num.png 为例进行操作。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
 
var atlas_comp = "res/atlas/comp.atlas";//atlas_comp：系统默认图集资源
var skin_clip_num = "comp/clip_num.png";//skin_clip_num：系统默认提供的切片组件
var clip_num;//clip_num：切片组件对象
 
//加载图集成功后，执行onLoad回调方法
Laya.loader.load(atlas_comp, Laya.Handler.create(this, onLoaded));
function onLoaded() {
    //创建一个新的Clip实例；clipX x方向分割个数、clipY y方向分割个数
    clip_num = new Laya.Clip(skin_clip_num, 10, 1);
    // clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放
    clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)
    clip_num.pos(30, 10);//设置对象显示的位置
    Laya.stage.addChild(clip_num);//添加到舞台显示
    addButton();
}
 
var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
//添加一个操作按钮
function addButton() {
    //创建一个按钮实例
    var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");
    button.labelSize = 20;//按钮文本字体大小
    button.pos(200, 10);//按钮组件显示的位置
    Laya.stage.addChild(button);//添加到舞台显示
 
    button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件
        if (clip_num.isPlaying) {//当切片动画在播放时
            clip_num.stop();//停止切片动画
            clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始
            button.label = "播 放";//改变按钮显示的文本
        } else {
            clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后
            clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放
            button.label = "暂 停";
        }
    });
}

自定义Clip 资源

1、如上所示 clip_countDown.png 是自己用 PS 所绘制，尺寸没有强制要求，注意的是应该进行等分。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1920, Laya.WebGL);
Laya.stage.bgColor = "#252525";
 
var skin_clip_num = "ui/clip_countDown.png";//skin_clip_num：自定义的切片组件
var clip_num;//clip_num：切片组件对象
 
//资源加载成功后，执行 onLoad 回调方法
Laya.loader.load(skin_clip_num, Laya.Handler.create(this, onLoaded));
function onLoaded() {
    //创建一个新的Clip实例；x方向分割10个、y方向分割1个
    clip_num = new Laya.Clip(skin_clip_num, 10, 1);
    clip_num.size(50,50);//设置切片动画对象的尺寸大小
    // clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放
    clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)
    clip_num.pos(30, 10);//设置对象显示的位置
    Laya.stage.addChild(clip_num);//添加到舞台显示
}
 
//使用系统自带的按钮皮肤，先加载图集
Laya.loader.load("res/atlas/comp.atlas",Laya.Handler.create(this,addButton));
var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
//添加一个操作按钮
function addButton() {
    //创建一个按钮实例，系统默认按钮组件皮肤
    var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");
    button.labelSize = 20;//按钮文本字体大小
    button.pos(200, 10);//按钮组件显示的位置
    Laya.stage.addChild(button);//添加到舞台显示
 
    button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件
        if (clip_num.isPlaying) {//当切片动画在播放时
            Laya.SoundManager.stopMusic();//停止背景音乐
            clip_num.stop();//停止切片动画
            clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始
            button.label = "播 放";//改变按钮显示的文本
        } else {
            Laya.SoundManager.playMusic("http://img02.tuke88.com/preview_music/00/08/56/preview-5b835eaf13a9b9053.mp3");//播放一个背景音乐
            clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后
            clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放
            button.label = "暂 停";
        }
    });
}

更多内容可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-3

ComboBox

1、laya.ui.ComboBox 组件包含一个下拉列表，用户可以从该列表中选择单个值。

2、以 combobox_  或者 combo_前缀命名的组件自动识别为 下拉框 comboBox 组件。系统默认提供的下拉框组件如下图所示，combobox.png 其实和 button.png 组件很像。

更多 API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.ComboBox

编码示例

1、这里直接使用引擎默认提供的 combobox.png 资源，并把它单独拷贝到新建的 bin/ui 目录下了。如果自己想重新 PS 一张，则和 "自定义按钮资源' 同理，不再累述。

(function () {
    //combobox.png：系统默认提供的下拉框资源，从 laya/assets/comp 下复制一份到 bin/ui 目录下
    var skin = "ui/combobox.png";
    Laya.init(1080, 1920, Laya.WebGL);//初始化引擎，不支持WebGL时自动切换至Canvas
    Laya.stage.bgColor = "#fff";
    var text_info;
 
    //下拉框皮肤加载完成后执行回调函数
    Laya.loader.load(skin, Laya.Handler.create(this, onLoadComplete));
    function onLoadComplete() {
        /**
         * 第一个参数：下拉框皮肤地址
         * 第二个参数：下拉列表的标签集字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"
         */
        var comboBox = new Laya.ComboBox(skin, "Java,Android,LayaAir,Vue,React,RocketMQ");
        comboBox.labelSize = 25;//获取或设置 ComboBox 组件包含的 Button 组件的标签字体大小，即选中后显示的文本大小
        comboBox.itemSize = 20;//获取和设置下拉列表项标签的字体大小
        comboBox.size(150, 30);//下拉框按钮的大小,应该根据内容文本长度和大小进行合理设置，确保能包含最长的选项
        comboBox.pos(30, 10);//下拉框组件的位置
        Laya.stage.addChild(comboBox);//添加到舞台显示
        /**
         * selectHandler：改变下拉列表的选择项时执行的处理器(默认返回参数index:int)
         */
        comboBox.selectHandler = new Laya.Handler(this, function (cb) {
            text_info.text = "选中： " + cb.selectedIndex + "=" + cb.selectedLabel;
        }, [comboBox]);
 
        showText();
    }
 
    //显示一段文本
    function showText(){
        text_info = new Laya.Text();
        text_info.text = "选中项";
        text_info.fontSize = 20;
        text_info.pos(230,20);
        Laya.stage.addChild(text_info);
    }
})();

官网地址：https://ldc.layabox.com/doc/?nav=zh-js-2-3-4