记录cocoscreater3.8.x设置2d卡牌圆角

引擎版本：Cocos Creater3.8.3版本

1.在Card节点上添加Mask组件，类型选择

2.在Card节点上绑定CardController.ts脚本

3.在CardController.ts编写圆角脚本，其实就是动态绘制Graphics组件

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

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

    _cardWidth: number = 0 // 卡牌宽度
    _cardHeight: number = 0 // 卡牌高度
    space: number = 10 // 卡牌圆角曲度

    start() {
        this._cardWidth = this.node.getComponent(UITransform).width
        this._cardHeight = this.node.getComponent(UITransform).height
        // 卡牌背景
        this.setRound(this._cardWidth, this._cardHeight, this.space, this.node.getComponent(Graphics))
    }

    // 设置圆角
    setRound(width: number, height: number, space: number, g: Graphics) {
        g.lineWidth = 1;
        g.moveTo(-(width / 2 - space), height / 2)
        g.lineTo((width / 2 - space), height / 2);
        g.quadraticCurveTo(width / 2, height / 2, width / 2, (height / 2 - space))
        g.lineTo(width / 2, -(height / 2 - space));
        g.quadraticCurveTo(width / 2, -height / 2, (width / 2 - space), -(height / 2))
        g.lineTo(-(width / 2 - space), -(height / 2));
        g.quadraticCurveTo(-width / 2, -height / 2, -(width / 2), -(height / 2 - space))
        g.lineTo(-(width / 2), (height / 2 - space));
        g.quadraticCurveTo(-width / 2, height / 2, -(width / 2 - space), (height / 2))
        g.close();
        g.stroke();
        g.fill();
    }

    update(deltaTime: number) {
        
    }
}

4.效果图