柯布西耶1. 遮罩与滚动视图的基础原理
在FairyGUI中，遮罩和滚动视图是UI开发中最常用的两种交互功能。它们都基于同一个核心组件GComponent的溢出处理机制。简单来说，当内容超出容器边界时，我们可以选择不同的处理方式来实现不同的视觉效果。
GComponent提供了三种溢出处理模式：
- 可见（Visible）：内容会直接显示在容器外
- 隐藏（Hidden）：超出部分会被直接裁剪掉
- 滚动（Scroll）：允许用户通过滑动查看被隐藏的内容
遮罩功能就是通过"隐藏"模式实现的。当我们将GComponent的溢出处理设置为"隐藏"并指定一个遮罩层时，超出容器的内容就会被优雅地裁剪掉，只显示容器范围内的部分。这就像给内容加了一个"相框"，只有框内的画面能被看到。
滚动视图则是"滚动"模式的产物。它不仅会隐藏超出部分，还会提供滑动条或触摸滑动功能，让用户可以查看被隐藏的内容。在实际项目中，我们经常用滚动视图来实现商品列表、聊天记录等需要滚动浏览的场景。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 遮罩功能的实现细节
2.1 基础遮罩设置
在FairyGUI编辑器中设置遮罩非常简单：
- 选中需要添加遮罩的组件
- 在属性面板中找到"溢出处理"选项
- 选择"隐藏"模式
- 勾选"遮罩"复选框
这样，一个基础的遮罩效果就完成了。但实际开发中，我们往往需要通过代码来动态控制遮罩。下面是一个典型的遮罩设置代码示例：
csharp复制// 获取组件
GComponent maskComponent = view.GetChild("maskArea").asCom;
// 设置溢出处理为隐藏
maskComponent.clipRect = new Rect(0, 0, 300, 200);
// 启用遮罩
maskComponent.clipSoftness = new Vector2(0, 0);
clipRect定义了遮罩的矩形区域，四个参数分别是x位置、y位置、宽度和高度。clipSoftness则可以设置边缘柔化效果，让裁剪边缘不那么生硬。
2.2 高级遮罩技巧
除了基本的矩形遮罩，FairyGUI还支持一些高级用法：
动态调整遮罩区域：我们可以根据需求实时改变遮罩范围。比如实现一个展开/收起动画