目錄

Clip 切片

預設Clip 資源

自定義Clip 資源

ComboBox

編碼示例

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元件均不支援非同步載入。

 更多 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 元件很像。

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