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; } }