# 遮罩组件

✨模板自由制作入口：作品预览区>>>遮罩组件按钮 或 图层区>>>Mask Component

<figure><img src="/files/2Rusr1yC1G93dTdKsoPB" alt=""><figcaption></figcaption></figure>

✨空白制作入口：玩法模板>>>组件库>>>遮罩组件

<div align="left"><figure><img src="/files/Pkc4cDfsjZKMWZPZ1ghl" alt="" width="403"><figcaption></figcaption></figure></div>

相关案例教学可查阅 [遮罩组件-空白制作教程](/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/hui-zhi-wan-fa-an-li/zhe-zhao-zu-jian-kong-bai-zhi-zuo-jiao-cheng.md)

####

## <mark style="color:blue;">一、遮罩组件通俗介绍</mark>

* 组件使用底层逻辑：通过「遮罩形状」来控制「被遮罩组」显示的部分，即「被遮罩组」内的图像，在「遮罩形状」覆盖范围内的部分会显示，覆盖范围外的部分会隐藏
* 当前，【**模板自由制作**】和【**空白制作**】都支持使用"遮罩组件"。使用【模板自由制作】，您可以基于原模板的玩法对组件进行调整；使用【空白制作】或新增遮罩组件，最少需完成遮罩组件的 「外观」、「遮罩形状」、「被遮罩组」等参数设置，遮罩组件才可正式生效
* <mark style="color:red;">注意：同个场景仅支持添加一个组件，但可跨场景添加组件或复制组件</mark>

####

## <mark style="color:blue;">二、遮罩组件适用玩法示例</mark>

"遮罩组件"适用于 通过点击/拖拽等交互方式，调整遮罩蒙层，展示目标图片 的玩法

* [示例1 - 选图滑动上色](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001531%252F13444%252Fpv%252F24%252F08%252F12%252F66b9cfbc1d266%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E9%80%89%E5%9B%BE%E6%BB%91%E5%8A%A8%E4%B8%8A%E8%89%B2\&language=undefined)
* [示例2 - 放大镜谜题](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001595%252F13516%252Fpv%252F24%252F11%252F13%252F673416fe361eb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%94%BE%E5%A4%A7%E9%95%9C%E8%B0%9C%E9%A2%98\&language=undefined)
* [示例3- 点击涂色](https://tinyurl.com/ykrebstj)
* [示例4 - 点击涂色](https://tinyurl.com/2eemxpa9)

####

## <mark style="color:blue;">三、遮罩组件使用说明</mark>

「遮罩组件」可调整的参数分四部分：外观、动画、遮罩设置、事件

### 1.外观

* 组件是否启用：可在「外观」参数下通过调节此开关来启用/禁用遮罩组件（默认启用）
* 其他参数的使用同常规图层一样，在此不作说明。需注意：当调整遮罩组件的外观参数(如位置大小)时，遮罩组件内的所有图层会跟着一起变化

<figure><img src="/files/8xAjyLgTvkaqlKvlF8Ui" alt=""><figcaption></figcaption></figure>

### 2.动画

在此处设置的动画是对整个遮罩组件生效的，具体的使用同常规图层一样，在此不作说明

### 3.遮罩设置

一个「遮罩组件」最少包含一个「遮罩组」。遮罩组(遮罩设置)包含三部分：遮罩形状、被遮罩组、自定义分组（选做）

<mark style="color:red;">注意：「遮罩设置」为遮罩组件最核心的参数，请务必将各部分设置完成</mark>

<div align="left"><figure><img src="/files/9zTsyBaTkrhaaLQEWGEB" alt=""><figcaption></figcaption></figure></div>

#### 3.1 遮罩组

新增：支持新增遮罩组，点击后输入新遮罩组名称即可创建遮罩组

添加动画：可为遮罩组添加动画，添加后动画对组内所有元素生效

显示/隐藏：可调整遮罩组的显示/隐藏，对组内所有元素生效（默认显示）

<div align="left"><figure><img src="/files/NPSGie781kzkvcuoRRfy" alt=""><figcaption></figcaption></figure></div>

#### 3.2 遮罩形状

<mark style="background-color:red;">**形状**</mark>：「遮罩形状」覆盖到「被遮罩组」的部分会显示，未覆盖到的部分会隐藏

* 形状支持设置「矩形」或「圆形」，并可调整其「外观」、「动画」、「事件」参数
  * 外观：可调整该形状的位置尺寸、缩放比例、旋转角度
  * 动画：可对该形状设置动画
  * 事件：可对遮罩形状设置事件(可设置「拖拽」事件，使遮罩在实际试玩中可拖动)
* 可点击「预览遮罩效果」，在画布内预览当前遮罩形状的位置大小

<div align="left"><figure><img src="/files/aboIbtFi3EWmhykgNqpn" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**跟随元素**</mark>（非必须添加）：设置跟随元素后，需为形状添加「拖拽」事件。设置完成后，跟随元素将会跟随形状的拖拽同步移动

* 支持添加多个跟随元素，点击右侧"+"按钮即可从资产库中添加
* 点击可调整「跟随元素」的「外观」、「动画」、「事件」参数（使用同常规图层一样）

<div align="left"><figure><img src="/files/V97BMcv6jahkeuhZVYPj" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.3 被遮罩组</mark>

「被遮罩组」内的图像，在「遮罩形状」覆盖范围内的部分会显示，覆盖范围外的部分会隐藏

* 支持添加多个 被遮罩元素，点击右侧"+"按钮即可从资产库中添加
* 点击可调整「被遮罩元素」的「外观」、「动画」、「事件」参数（使用同常规图层一样）

<div align="left"><figure><img src="/files/AKUw4eB5oyiiLwSZ21OC" alt=""><figcaption></figcaption></figure></div>

#### 3.4 自定义分组

<mark style="color:red;">「自定义分组」</mark>作为遮罩组件的一部分，可随着遮罩组件一起缩放和调整位置，但<mark style="color:red;">不受遮罩的影响，不会被遮罩</mark> （如下图所示，将"被遮罩组"对应的黑白底图加入到自定义分组中，当"遮罩形状"覆盖"被遮罩组"时，展示"被遮罩组"的彩色图片，其他部分则展示该黑白底片）

**用户可根据自身创意，决定是否要添加「自定义分组」**

<div align="left"><figure><img src="/files/tEmJqW0xjvEtYeR2ydV5" alt=""><figcaption></figcaption></figure></div>

### 4.事件

「遮罩组件」独特的**响应事件**包含：启用/禁用遮罩组件、启用/禁用遮罩组、显示/隐藏遮罩组、显示/隐藏遮罩分组、启用/禁用遮罩效果

<div align="left"><figure><img src="/files/6rGzEfv9kXZcq8v0YwAw" alt=""><figcaption></figcaption></figure></div>

#### 4.1 启用/禁用遮罩组件

需选择启用/禁用

若被禁用，等同于禁用所有的遮罩组。遮罩组下的所有遮罩层、被遮罩层事件将不再生效

<div align="left"><figure><img src="/files/fdoNdSS25ZDl89tX7kP3" alt="的" width="314"><figcaption></figcaption></figure></div>

#### 4.2 启用/禁用遮罩组

需选择启用/禁用和某个遮罩组

若被禁用，遮罩组下的所有遮罩层、被遮罩层事件将不再生效

<div align="left"><figure><img src="/files/yeWSFJwHP04riWgBJtTT" alt=""><figcaption></figcaption></figure></div>

#### 4.3 显示/隐藏遮罩组

需选择显示/隐藏和某个遮罩组

选择后，将显示/隐藏某个遮罩组内的所有元素

<div align="left"><figure><img src="/files/yn5KLwBZzsWaEbsyxd2m" alt=""><figcaption></figcaption></figure></div>

#### 4.4 显示/隐藏遮罩分组

需选择显示/隐藏和某个遮罩分组

选择后，将显示/隐藏某个遮罩分组内的所有元素

<div align="left"><figure><img src="/files/APGYyiAyhwietcjWdUsw" alt=""><figcaption></figcaption></figure></div>

#### 4.5 启用/禁用遮罩效果

需选择启用/禁用和某个遮罩组

若启用，则「被遮罩组」会受「遮罩形状」的影响而展示；若禁用，则「被遮罩组」不受「遮罩形状」影响，直接展示

<div align="left"><figure><img src="/files/23yMmD1vTiGpxYmysC6r" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/te-shu-gong-neng-zu-jian-ku-kuai-jie-pai-ban/zhe-zhao-zu-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.