112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { _decorator, Component, UITransform, Graphics, Color, Mask } from 'cc';
|
||
const { ccclass, property } = _decorator;
|
||
|
||
/**
|
||
* 圆角矩形遮罩组件
|
||
* 使用 Graphics + Mask 绘制圆角矩形作为遮罩
|
||
*
|
||
* 使用方法：
|
||
* 1. 将此组件添加到需要圆角的节点上
|
||
* 2. 设置圆角半径
|
||
* 3. 该节点及其子节点会被裁剪为圆角矩形
|
||
*/
|
||
@ccclass('RoundedRectMask')
|
||
export class RoundedRectMask extends Component {
|
||
|
||
@property({
|
||
tooltip: '圆角半径（像素）'
|
||
})
|
||
radius: number = 20;
|
||
|
||
private _graphics: Graphics | null = null;
|
||
private _mask: Mask | null = null;
|
||
private _uiTransform: UITransform | null = null;
|
||
|
||
onLoad() {
|
||
this._uiTransform = this.getComponent(UITransform);
|
||
this.setupComponents();
|
||
}
|
||
|
||
/**
|
||
* 设置组件
|
||
*/
|
||
private setupComponents() {
|
||
// 获取或添加 Graphics 组件
|
||
this._graphics = this.getComponent(Graphics);
|
||
if (!this._graphics) {
|
||
this._graphics = this.addComponent(Graphics);
|
||
}
|
||
|
||
// 获取或添加 Mask 组件
|
||
this._mask = this.getComponent(Mask);
|
||
if (!this._mask) {
|
||
this._mask = this.addComponent(Mask);
|
||
}
|
||
|
||
// 设置 Mask 使用 Graphics 类型
|
||
this._mask.type = Mask.Type.GRAPHICS_STENCIL;
|
||
|
||
this.drawRoundedRect();
|
||
}
|
||
|
||
/**
|
||
* 绘制圆角矩形
|
||
*/
|
||
private drawRoundedRect() {
|
||
if (!this._graphics || !this._uiTransform) return;
|
||
|
||
const width = this._uiTransform.width;
|
||
const height = this._uiTransform.height;
|
||
const r = Math.min(this.radius, Math.min(width, height) / 2);
|
||
|
||
// 清除之前的绘制
|
||
this._graphics.clear();
|
||
|
||
// 设置填充颜色
|
||
this._graphics.fillColor = new Color(255, 255, 255, 255);
|
||
|
||
// 绘制圆角矩形路径
|
||
const halfW = width / 2;
|
||
const halfH = height / 2;
|
||
|
||
// 使用 lineTo 和 arc 绘制圆角矩形
|
||
// 从左下角开始，逆时针绘制
|
||
this._graphics.moveTo(-halfW + r, -halfH);
|
||
|
||
// 下边
|
||
this._graphics.lineTo(halfW - r, -halfH);
|
||
|
||
// 右下角圆角 (90度弧，从 -90度 到 0度)
|
||
this._graphics.arc(halfW - r, -halfH + r, r, -Math.PI / 2, 0, false);
|
||
|
||
// 右边
|
||
this._graphics.lineTo(halfW, halfH - r);
|
||
|
||
// 右上角圆角 (90度弧，从 0度 到 90度)
|
||
this._graphics.arc(halfW - r, halfH - r, r, 0, Math.PI / 2, false);
|
||
|
||
// 上边
|
||
this._graphics.lineTo(-halfW + r, halfH);
|
||
|
||
// 左上角圆角 (90度弧，从 90度 到 180度)
|
||
this._graphics.arc(-halfW + r, halfH - r, r, Math.PI / 2, Math.PI, false);
|
||
|
||
// 左边
|
||
this._graphics.lineTo(-halfW, -halfH + r);
|
||
|
||
// 左下角圆角 (90度弧，从 180度 到 270度)
|
||
this._graphics.arc(-halfW + r, -halfH + r, r, Math.PI, Math.PI * 1.5, false);
|
||
|
||
// 填充
|
||
this._graphics.fill();
|
||
}
|
||
|
||
/**
|
||
* 设置圆角半径
|
||
*/
|
||
setRadius(radius: number) {
|
||
this.radius = radius;
|
||
this.drawRoundedRect();
|
||
}
|
||
}
|