然后把这个节点挂载到ts中 需要自己创建个工具类来给节点设置圆角
直接在TS中 使用工具类 设置圆角就行了
这个节点中加个sprite 当背景(先设置背景sprite的 widget 在设置需要切圆角节点的Graphics 不然背景不会充满)
'''
import { _decorator, Color, Component, Graphics, Mask, Node, Sprite, UITransform } from 'cc';
import { RadiusTool } from './Utils/RadiusTool';
const { ccclass, property } = _decorator;
@ccclass('BottomBtn')
export class BottomBtn extends Component {
start() {
}
protected onLoad(): void {
let width = this.node.getComponent(UITransform).width;
let height = this.node.getComponent(UITransform).height;
RadiusTool.setRound(width,height,15,this.node.getComponent(Graphics))
}
}
'''
工具类代码 CV大法就行了
'''
import { _decorator, Component, Graphics, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('RadiusTool')
export class RadiusTool {
static 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();
}
}
'''
