Unity2017.1官方UGUI文档翻译——Mask

Mask

遮罩

A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.

Mask不是一个可视的UI控件,它是一种改变控件子元素显示的方法。Mask会把子元素限制在他们父元素的形状中。因此,如果孩子比父节点还大,那么只有在父节点内的部分是可见的。

Section of a large Image masked by a Panel (Scrollbars are separate controls)

一张大图被Panel遮罩后的部分(ScrollBars是单独的控件)

Properties

属性

Property: Function:
Show Graphic Should the graphic of the masking (parent) object be drawn with alpha over the child object?
属性 功能
显示图像 遮罩对象的图形是否应该包含alpha绘制在子对象上

Description

描述

A common use of a Mask is to show a small section of a large Image, using say a Panel object (menu: GameObject > Create UI > Panel) as a “frame”. You can achieve this by firstly making the Image a child of the Panel object. You should position the Image so that the area that should be visible is directly behind the Panel area.

Mask的一个常用用法是显示一张大图的一小部分,用一个Panel对象(菜单:GameObject> Create UI> Panel)作为“框架”。您可以通过首先使图像成为Panel对象的子项来实现此目的。您应该调整图片的位置,使应该可见的区域在面板区域的正后面。

Panel area shown in red with child Image behind

Panel的区域用红色表示,图片在它的后面

Then, add a Mask component to the Panel. The areas of the child Image outside the panel will become invisible since they are masked by the shape of the Panel.

然后,添加一个Mask组件到Panel上。子图片在Panel外的区域会变得不可见,因为他们被Panel的形状遮罩了。

Masked areas shown faint, but would really be invisible

被掩盖的地方显得微弱,但实际上是隐形的

If the image is then moved around then only the part revealed by the Panel will be visible. The movement could be controlled by Scrollbars to create a scrollable viewer for a map, say.

如果图像移动了,则只有面板透出来的部分可见。 比方说,这个运动可以通过滚动条来控制,为地图创建一个可滚动的查看器。

Implementation

实现

Masking is implemented using the stencil buffer of the GPU.

Masking是使用GPU的模板缓冲区实现的。

The first Mask element writes a 1 to the stencil buffer All elements below the mask check when rendering, and only render to areas where there is a 1 in the stencil buffer *Nested Masks will write incremental bit masks into the buffer, this means that renderable children need to have the logical & of the stencil values to be rendered.

第一个Mask元素向模板缓冲区写入1,当渲染时,Mask下面的所有元素会检查,只有模板缓冲是1的区域才会被渲染(这边是按位标记的,由于模板缓冲只有一个字节,所以最多只能嵌套8层)。

*嵌套Mask会写入其他的位,这意味着可渲染的子元素需要拿到模板缓冲的值,根据一定得逻辑进行渲染。

原文地址:https://www.cnblogs.com/SolarWings/p/8178898.html

时间: 2024-08-30 07:26:20

Unity2017.1官方UGUI文档翻译——Mask的相关文章

Unity2017.1官方UGUI文档翻译——Interaction Components

Interaction Components 交互组件 This section covers components in the UI system that handles interaction, such as mouse or touch events and interaction using a keyboard or controller. The interaction components are not visible on their own, and must be c

Unity2017.1官方UGUI文档翻译——RectMask2D

RectMask2D 矩形2D遮罩 A RectMask2D is a masking control similar to the Mask control. The mask restricts the child elements to the rectangle of the parent element. Unlike the standard Mask control it has some limitations, but it also has a number of perfo

Unity2017.1官方UGUI文档翻译——Canvas

Canvas 画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas. Creating a new UI element, such as an Image using the menu GameO

Unity2017.1官方UGUI文档翻译——Animation Integration

Animation Integration 动画集成 Animation allows for each transition between control states to be fully animated using Unity’s animation system. This is the most powerful of the transition modes due the the number of properties that can be animated simult

Unity2017.1官方UGUI文档翻译——Rich Text

Rich Text 富文本 The text for UI elements and text meshes can incorporate multiple font styles and sizes. Rich text is supported both for the UI System and the legacy GUI system. The Text, GUIStyle, GUIText and TextMesh classes have a Rich Text setting

Unity2017.1官方UGUI文档翻译——Canvas Scaler

Canvas Scaler 画布缩放器 The Canvas Scaler component is used for controlling the overall scale and pixel density of UI elements in the Canvas. This scaling affects everything under the Canvas, including font sizes and image borders. “画布缩放器”组件用于控制画布中UI元素的整

Unity2017.1官方UGUI文档翻译——Text

Text 文本 The Text control displays a non-interactive piece of text to the user. This can be used to provide captions or labels for other GUI controls or to display instructions or other text. 文本控件向用户显示一个非交互式的文本片段. 它可以作为其他GUI控件提供标题或标签,或作为说明文本,或者其他用途. P

Unity2017.1官方UGUI文档翻译——Raw Image

Raw Image 原生图片 The Raw Image control displays a non-interactive image to the user. This can be used for decoration, icons, etc, and the image can also be changed from a script to reflect changes in other controls. The control is similar to the Image 

Unity2017.1官方UGUI文档翻译——Position as UV1

Position as UV1 This adds a simple Position as UV1 effect to text and image graphics. 把Canvas空间下的顶点坐标设置到UV1中,用于在Text和Image这样的图形组件中实现一些特效(特效要自定义shader实现) Properties 属性 原文地址:https://www.cnblogs.com/SolarWings/p/8182972.html