Skip to content

简介

遮罩(Mask)控件类型不是可见的控件类型,而是一种修改子级 UI 对象(UI Object)外观的功能性控件。

遮罩控件类型用于规定子级 UI 对象可渲染的范围,该控件类型的 UI 对象会其遮罩类型和属性创建一个渲染遮罩,该 UI 对象的所有子级 UI 对象都会依据这个遮罩进行裁剪,遮罩范围外的部分将不会渲染。而且如果子级 UI 对象的尺寸比遮罩控件类型的 UI 对象尺寸大,则仅包含在遮罩控件类型 UI 对象内的部分才会被渲染。

【UIEditor_Mask001.png】

左侧为图片遮罩类型的 UI 对象(UI 对象名:Mask_Image)裁剪图片控件类型的 UI 对象(UI 对象名:Image_Logo)效果,右侧为多边形遮罩类型的 UI 对象(UI 对象名:Mask_Polygon)裁剪图片控件类型的 UI 对象(UI 对象名:Image_Logo)效果。

属性

遮罩(Mask)控件类型的 UI 对象根据不同的遮罩类型有不同的可设置属性。遮罩 类型(Type)属性可定义遮罩的渲染依据,包括:图片(Image)、多边形(Polygon)。

【UIEditor_Mask002.png】

  • 图片(Image)遮罩类型下,遮罩控件类型的 UI 对象。图片遮罩类型下 UI 对象会读取引用的图片资源,读取图片每个像素点的 Alpha 值,进而依据图片的 Alpha 通道对子级 UI 对象进行裁剪。

【UIEditor_Mask003.png】

图片(Image)遮罩类型下还包含以下可设置属性。

【UIEditor_Mask004.png】

名称描述
图片(Image)图片(Image)属性可用于分配给此 UI 对象用作裁剪基准的 2D 贴图资产,可从 项目窗口(Project)将 2D 贴图资产拖入,或点击打开列表选择 2D 贴图资产。2D 纹理属性支持 PNG,JPG,TGA,TIF 格式图片导入而生成的 2D 贴图资产,具体导入方法和限制请参阅 导入资产 章节。
逆向(Reverse)设置是否进行反向遮罩。勾选,根据图片属性引用的 2D 贴图资产的 Alpha 通道反向裁剪子级 UI 对象。即 2D 贴图资产透明的地方子级 UI 对象将显示,2D 贴图资产显示的地方子级 UI 对象将被裁剪。不勾选,根据图片属性引用的 2D 贴图资产的 Alpha 通道裁剪子级 UI 对象。
填充(Fill)设置从上下左右四个方向分别填充(裁剪)子级 UI 对象的像素值。该属性下有 左侧(Left),右侧(Right),顶部(Top),底部(Bottom)四个子属性,可以分别配置对应方向填充(裁剪)的像素值。
柔和(Soft)控件从内向外的整体淡出的程度。
· X 属性表示从中间向左右两侧淡出的程度,属性值可以输入 0 至 999 的整数。
· Y 属性表示从中间向顶部和底部淡出的程度,属性值可以输入 0 至 999 的整数。
  • 多边形(Polygon)遮罩类型下,遮罩控件类型的 UI 对象。多边形遮罩类型下 UI 对象会根据 检视窗口(Inspector)中设置的多边形样式和具体参数,对子级 UI 对象进行裁剪。

【UIEditor_Mask005.png】

多边形(Polygon)遮罩类型下还包含以下可设置属性。

【UIEditor_Mask006.png】

名称描述
逆向(Reverse)设置是否进行反向遮罩。
True.png 勾选,子级 UI 对象只显示遮罩控件类型的 UI 对象多边形外部和矩形变换框相交的内容。
False.png 不勾选,子级 UI 对象只显示遮罩控件类型的 UI 对象多边形内部的内容。
启用填充(Enable Fill)设置是否对遮罩控件类型的 UI 对象在多边形内部进行全色填充。
True.png 勾选,UI 对象在多边形内部进行全色填充。
False.png 不勾选,UI 对象多边形内不进行全色填充。
填充颜色(Fill Color)当 启用填充(Enable Fill)属性被勾选(True)时,此属性将会显示且可设置。用于设置遮罩控件类型的 UI 对象在多边形内部的填充颜色。
启用边框(Enable Border)设置是否对遮罩控件类型的 UI 对象在多边形上进行描边。
True.png 勾选,UI 对象在多边形上进行描边。
False.png 不勾选,UI 对象在多边形上不进行描边。
边框颜色(Border Color)当 启用边框(Enable Border)属性被勾选(True)时,此属性将会显示且可设置。用于设置遮罩控件类型的 UI 对象在多边形上进行描边的颜色。
边框宽度(Border Width)当 启用边框(Enable Border)属性被勾选(True)时,此属性将会显示且可设置。用于设置遮罩控件类型的 UI 对象在多边形上进行描边的宽度。单位是像素值。当属性编辑为 0 时代表不设置边框。
边数(Side Count)设置正多边形的边数。属性值可输入大于 3 的正整数。
顶点 (Vertex)顶点属性列表的元素数量会随 边数(Side Count)属性的值变化而一致变化,其属性值决定了多边形几何中心到默认顶点位置的百分比,属性值可输入 0 至 1 之间的浮点数。
点击列表下方的 追加(Append) 按钮会增加列表的元素数量,同时也会同步改变 边数(Side Count)属性的值。