刮刮乐 没有找到可用的自己撸了个

https://s31.aconvert.com/convert/p3r68-cdx67/4wbga-wdzb1.gif

研究下代码怎么传~

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

import property = cc._decorator.property;
import ccclass = cc._decorator.ccclass;
import disallowMultiple = cc._decorator.disallowMultiple;
import menu = cc._decorator.menu;
cc.macro.ENABLE_WEBGL_ANTIALIAS = true;

@ccclass()

@disallowMultiple(true)
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);
        this.mask.enabled = false;
    }

    protected onLoad(): void {
        let position = this.node.position;
        let width = this.node.width / 3;

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

        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: cc.Event) {
        let point = event.touch.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) {
        if (!this.enabled) {
            return;
        }
        let graphics = this.mask._graphics;
        if (!graphics) {
            return;
        }
        this._checkPoint(point);
        this.mask.enabled = true;
        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];
            // 此点在关键点附近
            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;
        if (result) {
            this.dismissCallBack && this.dismissCallBack.emit(null);
        }
    }
}
1赞

很实用,mark