mk_framework/assets/script/game/component/UIBG.ts

const { ccclass, property } = cc._decorator;
/**
 * 窗口遮罩
 * - 挂载到节点上
 * @author 薛鸿潇
 */
@ccclass//('UIBG')
export default class UIBG extends cc.Component {
    @property({ displayName: '背景颜色' })
    private color = new cc.Color(0, 0, 0, 180);
    @property({ displayName: '自定义屏蔽节点', type: cc.Node })
    private design_block_node: cc.Node = null!;
    @property({ displayName: '点击关闭' })
    private bClickClose: boolean = false;
    @property({ displayName: '完成回调', tooltip: "面板打开完成后触发", type: cc.Component.EventHandler })
    public onComplete: cc.Component.EventHandler[] = [];

    /** 背景节点 */
    private node_bg: cc.Node = null;

    onLoad() {
        this.initBG();
    }

    private initBG() {
        const width = mk.game.getWinSize().width;
        const height = mk.game.getWinSize().height;
        this.node_bg = this.drawColorRect(new cc.Rect(-width / 2, -height / 2, width, height));
        this.node_bg.parent = this.node;
        this.node_bg.zIndex = -10000;
        this.node_bg.addComponent(cc.Button);
        this.node_bg.on('click', this.initClick, this);
        // this.btn_close && this.btn_close.node.on('click', this.onClickClose, this);

        if (this.design_block_node) this.design_block_node.addComponent(cc.BlockInputEvents);
    }

    /**
     * 按钮回调
     */
    private initClick() {
        if (this.bClickClose) this.onClickClose();
    }

    private onClickClose() {
        mk.ui.closePanel(this.node.name);
        const c_count = this.onComplete.length;
        for (let i = 0; i < c_count; i++) {
            if (this.onComplete[i].handler) this.onComplete[i].emit([])
        }
    }
    /**
     * 创建背景蒙版 by 绘图组件
     * @param size 坐标及宽高
     * @returns 创建的节点
     */
    public drawColorRect(size: cc.Rect): cc.Node {
        let node = new cc.Node('colorRect');
        node.setContentSize(size);
        let graph = node.addComponent(cc.Graphics);
        graph.fillColor = this.color;
        graph.fillRect(size.x, size.y, size.width, size.height);
        return node;
    }

}