LayaBox:使得按钮控件变灰三种方法(gray、disabled、滤镜)

原位图效果:
原位图(activatedBtn).png

变灰效果:
变灰(activatedBtn).png

第一种方法:设置gray属性(只是变灰,还有鼠标点击事件)

this.activatedBtn.gray=true;

第二种方法:设置disabled属性(变灰,同时禁用了鼠标点击事件)

this.activatedBtn.disabled = true;

第三种方法:使用滤镜(只是变灰,还有鼠标点击事件)

//Filter.ts
class Filter {
        //使用单例模式创建实例,保证对象的唯一性和数据的正确维护
        private static _instance: Filter;
        constructor() { }
        public static getInstance(): Filter {
            if (this._instance == null) {
                this._instance = new Filter();
            }
            return this._instance;
        }
        /**创建灰色滤镜位图**/
        public  createGrayFilter(obj: Laya.Sprite): void {
            //颜色滤镜矩阵,灰色
            var colorMatrix: any =
                [
                    0.3086, 0.6094, 0.0820, 0, 0,  //R
                    0.3086, 0.6094, 0.0820, 0, 0, //G
                    0.3086, 0.6094, 0.0820, 0, 0,  //B
                    0, 0, 0, 1, 0, //A
                ];
            //创建灰色颜色滤镜
            var GrayFilter: Laya.ColorFilter = new Laya.ColorFilter(colorMatrix);
            //添加灰色颜色滤镜效果
            obj.filters = [GrayFilter];
        }

        /**为滤镜设置空颜色,可达到还原原位图效果 */
        public  emptyFilter(obj: Laya.Sprite): void {           
            obj.filters = [];
        }
    }
}

//main.ts
//设置滤镜
Filter.getInstance().createGrayFilter(this.activatedBtn);
//还原位图
Filter.getInstance(). emptyFilter(this.activatedBtn);

你可能感兴趣的:(LayaBox:使得按钮控件变灰三种方法(gray、disabled、滤镜))