xianyudefanji/assets/Scripts/DH/ScratchMask.ts

/**
 * Created by daichenxi on 2020/10/25
 */

import Common5 from "../../Platform/th/Common5";

const { ccclass, property, disallowMultiple, menu } = cc._decorator;
// cc.macro.ENABLE_WEBGL_ANTIALIAS = true;

@ccclass
@disallowMultiple()
@menu('对话剧情/ScratchMask')
export class ScratchMask extends cc.Component {

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

    @property({ tooltip: "圆角半径:\n具体像素值\n生成的圆会依赖此值", type: cc.Integer })
    radius = 66;

    @property({ tooltip: "分片后阈值:\n结果判断会依赖此值", type: cc.Integer })
    value = 40;

    @property(cc.Component.EventHandler)
    dismissCallBack: cc.Component.EventHandler = null;

    // @property(cc.Mask)
    protected mask: cc.Mask = null;
    protected pisitionProgress: Boolean[] = null;
    protected positions: cc.Vec2[] = null;

    protected onEnable(): void {
        this.mask = this.maskNode.getComponent(cc.Mask);
    }

    protected onLoad(): void {
        let position = cc.v2(0, 0)//this.node.position;
        let width = this.node.width / 3;
        let height = this.node.height / 3;

        this.positions = [
            cc.v2(position.x, position.y), // 中心点
            cc.v2(position.x - width, position.y), // 中心点偏左
            cc.v2(position.x + width, position.y), // 中心点偏右
            cc.v2(position.x, position.y + height), // 上
            cc.v2(position.x - width, position.y + height), // 上左
            cc.v2(position.x + width, position.y + height), // 上右
            cc.v2(position.x, position.y - height), // 下
            cc.v2(position.x - width, position.y - height), // 下左
            cc.v2(position.x + width, position.y - height), // 下右
        ];

        this.pisitionProgress = new Array(this.positions.length);

        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
    }

    private _onTouchBegin(event) {
        this._onDrawWithEvent(event);
    }

    private _onTouchMoved(event) {
        this._onDrawWithEvent(event);
    }

    private _onTouchEnd(event) {
        this._onDrawWithEvent(event);
        this._checkProgress();
    }

    private _onDrawWithEvent(event) {
        let point = event.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this.onDraw(point);
    }

    public onClearMask() {
        let graphics = this.mask._graphics;
        if (!graphics) {
            return;
        }
        graphics.clear();
    }

    public hideMask(callBack) {
        cc.tween(this.maskNode)
            .to(0.3, { opacity: 0 })
            .call(callBack)
            .start();
    }

    /**
     * mask 用于绘制罩子的函数.
     * this 指向mask 对象,需要特别注意.
     * @param point
     */
    protected onDraw(point: cc.Vec2) {
        let graphics = this.mask._graphics;
        if (!graphics) {
            return;
        }
        this.scheduleOnce(() => {
            Common5.playRemoteAudioEffect('remotesound/effect/擦东西')
        }, 0.1)
        this._checkPoint(point);
        let width = this.radius * 2;
        graphics.roundRect(point.x - this.radius, point.y - this.radius, width, width, this.radius || 0);
        if (cc.game.renderType === cc.game.RENDER_TYPE_CANVAS) {
            graphics.stroke();
        } else {
            graphics.fill();
        }
    }

    private _checkPoint(point: cc.Vec2) {
        for (let i = 0; i < 9; i++) {
            let p = this.positions[i];
            // 此点在关键点附近
            console.log("point=", point)
            console.log("this.value=", this.value)
            console.log("p.x + this.value", this.value)
            if (p.x + this.value > point.x && p.x - this.value < point.x && p.y + this.value > point.y && p.y - this.value < point.y) {
                this.pisitionProgress[i] = true;
            }
        }
    }

    private _checkProgress() {
        // let result = this.pisitionProgress.filter((value) => {
        //     return value;
        // }).length === 9;
        let result = this.pisitionProgress.filter((value) => {
            return value;
        }).length >= 5;
        if (result) {
            this.dismissCallBack && this.dismissCallBack.emit(null);
        }
    }
}