Games/daishutiaotiao/assets/Common/Scripts/SelfMask.ts

import { _decorator, Component, game, Graphics, Mask, Node, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SelfMask')
export class SelfMask extends Component {

    @property()
    private _radius: number = 50;

    @property({ tooltip: "圆角半径:\n0-1之间为最小边长比例值, \n>1为具体像素值" })

    public get radius(): number {
        return this._radius;
    }

    //    public radius: number = 50;
    public set radius(r: number) {
        this._radius = r;
        this.updateMask(r);
    }

    // @property(cc.Mask)
    protected mask: Mask = null;

    protected onEnable(): void {
        this.mask = this.getComponent(Mask);
        this.updateMask(this.radius);
    }

    private updateMask(r: number) {
        let _radius = r >= 0 ? r : 0;
        if (_radius < 1) {
            _radius = Math.min(this.node.getComponent(UITransform).width, this.node.getComponent(UITransform).height) * _radius;
        }
        this.mask["radius"] = _radius;
        this.mask["onDraw"] = this.onDraw.bind(this.mask);
        this.mask["_updateGraphics"] = this._updateGraphics.bind(this.mask);
        this.mask.type = Mask.Type.GRAPHICS_STENCIL;
    }

    private _updateGraphics() {

        // @ts-ignore.
        let graphics = this._graphics;
        if (!graphics) {
            return;
        }
        this.onDraw(graphics);
    }

    /**
     * mask 用于绘制罩子的函数.
     * this 指向mask 对象,需要特别注意.
     * @param graphics
     */
    protected onDraw(graphics: Graphics) {
        // Share render data with graphics content
        graphics.clear();
        let node = this.node;
        let width = node.getComponent(UITransform).width;
        let height = node.getComponent(UITransform).height;
        let x = -width * node.getComponent(UITransform).anchorX;
        let y = -height * node.getComponent(UITransform).anchorY;
        graphics.roundRect(x, y, width, height, this.radius || 0);
        graphics.stroke();
        graphics.fill();
    }
}