xsdmx-CocosCreator/assets/Script/plot/GuideMask.ts

const { ccclass, property } = cc._decorator;
/**
 * 引导的全局遮罩
 */
@ccclass
export default class GuideMask extends cc.Component {

    @property(cc.Node)
    mLayout0: cc.Node = null;

    @property(cc.Mask)
    mMask: cc.Mask = null;

    @property(cc.Node)
    mShadow: cc.Node = null;//背景阴影

    @property(cc.Node)
    guideMark: cc.Node = null;//引导提示标识

    /**
     * 当前目标对象
     */
    private pTargetNode: cc.Node = null;

    onLoad() {
        this.node.active = false;
    }

    public show() {
        this.node.active = true;
        this.mLayout0.on(cc.Node.EventType.TOUCH_START, (event) => {
            if (event.target == this.pTargetNode) {
            } else {
                event.stopPropagation();
            }
        }, true)
        this.mLayout0.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
            if (event.target == this.pTargetNode) {
            } else {
                event.stopPropagation();
            }
        }, true)
        this.mLayout0.on(cc.Node.EventType.TOUCH_END, (event) => {
            if (event.target == this.pTargetNode) {
            } else {
                event.stopPropagation();
            }
        }, true)
    }
    public close() {
        this.node.active = false
        this.mLayout0.off(cc.Node.EventType.TOUCH_START);
        this.mLayout0.off(cc.Node.EventType.TOUCH_MOVE);
        this.mLayout0.off(cc.Node.EventType.TOUCH_END);
    }
    /**
     * 设置按钮
     * @param node 
     */
    public setTargetNode(targetNode: cc.Node) {
        this.pTargetNode = targetNode;
        cc.tween(this).sequence(
            cc.delayTime(0.01),
            cc.callFunc(()=>{
                // cc.log('pos 1',targetNode.getPosition().x, targetNode.getPosition().y)
                let pos = this.pTargetNode.convertToWorldSpaceAR(cc.v2(0,0));
                // cc.log('pos 2',pos.x, pos.y)
                let width = cc.winSize.width
                let height = cc.winSize.height
                pos.x -= width / 2;
                pos.y -= height / 2;

                this.guideMark.x = pos.x;
                this.guideMark.y = pos.y;

                this.mMask.node.x = pos.x;
                this.mMask.node.y = pos.y;
                this.mMask.node.width = this.pTargetNode.width;
                this.mMask.node.height = this.pTargetNode.height;

                this.mShadow.x = -pos.x;
                this.mShadow.y = -pos.y;
            })
        ).start()
    }
}