编码示例

Clip 切片

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

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

Package	laya.ui
类	public class Clip
Inheritance	Clip Component Sprite Node EventDispatcher Object
子类	FontClip

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

Property（属性）
autoPlay : Boolean ,表示是否自动播放动画，若自动播放值为true,否则值为false; 可控制切片动画的播放、停止。
clipHeight : Number ,竖向分割时每个切片的高度，与 clipY 同时设置时优先级高于 clipY
clipWidth : Number ,横向分割时每个切片的宽度，与 clipX 同时设置时优先级高于 clipX 。
clipX : int ,X轴（横向）切片数量。
clipY : int ,Y轴(竖向)切片数量。
height : Number ,[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
index : int ,当前帧索引。
interval : int ,表示动画播放间隔时间(以毫秒为单位)。
isPlaying : Boolean ,表示动画的当前播放状态。如果动画正在播放中，则为true，否则为flash。
skin : String 对象的皮肤地址，以字符串表示。如果资源未加载，则先加载资源，加载完成后应用于此对象。注意：资源加载完成后，会自动缓存至资源库中。
total : int ,[read-only] 切片动画的总帧数。
width : Number ,[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

Method（方法）
Clip(url:String = null, clipX:int = 1, clipY:int = 1) ，创建一个新的 Clip 示例。
destroy(destroyChild:Boolean = true):void [override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。
dispose():void ，销毁对象并释放加载的皮肤资源。
play():void ，播放动画。
stop():void ，停止动画。

更多 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

Package	laya.ui
类	public class ComboBox
Inheritance	ComboBox Component Sprite Node EventDispatcher Object

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

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

Property（属性）
height : Number ，[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
isOpen : Boolean ，表示下拉列表的打开状态。
itemColors : String ，下拉列表项颜色。格式："悬停或被选中时背景颜色,悬停或被选中时标签颜色,标签颜色,边框颜色,背景颜色"
itemSize : int ，下拉列表项标签的字体大小。
labelBold : Boolean ，表示按钮文本标签是否为粗体字。（按钮表示未下拉时的按钮）
labels : String ，标签集合字符串。也可以通过构造器直接设置
labelSize : int ，获取或设置对 ComboBox 组件所包含的 Button 组件的标签字体大小。
selectedIndex : int ，表示选择的下拉列表项的索引。从0开始
selectedLabel : String ，表示选择的下拉列表项的的标签。
selectHandler : Handler ，改变下拉列表的选择项时执行的处理器(默认返回参数index:int)。
skin : String ，对象的皮肤资源地址。支持单态，两态和三态，用 stateNum 属性设置对象的皮肤地址，以字符串表示。
stateNum : int ，表示按钮的状态值。
visibleNum : int ，获取或设置没有滚动条的下拉列表中可显示的最大行数。
width : Number ，[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

更多 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

LayaAir UI 组件 # Clip 切片、ComboBox 下拉框

Clip 切片

默认Clip 资源

自定义Clip 资源

ComboBox

编码示例

猜你喜欢