# 连线组件

✨模板自由制作入口：作品预览区>>>连线组件按钮 或 图层区>>>Match Line Component

<figure><img src="/files/9W4AkSML3VSeLwKygoxA" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="/files/9Bk3Vhxk7aqku4QNEzbi" alt="" width="416"><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/lian-xian-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%252F20001189%252F12768%252Fpv%252F24%252F04%252F24%252F66286b4e9e1d2%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%BF%9E%E7%BA%BF%E8%A7%A3%E9%A2%98\&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%252F20001381%252F13098%252Fpv%252F24%252F07%252F03%252F6684c9341dc65%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E6%8A%93%E5%8F%96\&language=undefined)
* [示例3 - 画线回家取东西](https://tinyurl.com/ywtd6nt4)
* [示例4 - 画线回家](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%252F20001222%252F12848%252Fpv%252F24%252F04%252F25%252F662a2368babcb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E5%9B%9E%E5%AE%B6\&language=undefined)

####

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

「连线组件」可调整的参数分3部分：「外观」、「起止区域」、「事件」

我们将结合模板[【画线回家】](http://tinyurl.com/5vsrhwjn)进行「连线组件」的使用说明

### 1.外观

* \[显示隐藏参数]横竖屏拆分：和各图层的外观参数相同，可分别调整该连线组件在横/竖屏下是否显示
* 位置尺寸：可以修改该连线组件的宽高、位置。其宽高位置，决定了能够画出线的范围（如下图，绿色覆盖范围即是在试玩过程中可画出线的范围）
* 屏幕适配方式：和各图层的外观参数相同，可调整该连线组件的屏幕适配方式
* 缩放比例：和各图层的外观参数相同，可调整该连线组件的比例

<figure><img src="/files/cmaXVf39tsNWZbCd4Bzi" alt=""><figcaption></figcaption></figure>

### 2.起止区域

「起止区域」是连线组件独有的参数，一个连线组件有若干个起止区域和配对关系

<figure><img src="/files/J5i8bQ0QA88tfw9cquy9" alt=""><figcaption></figcaption></figure>

#### **1）起止区域**

在该组件中设置若干个任意大小和位置的区域，该区域会和「配对关系」搭配使用，以产生具体的画线效果

在【画线回家】模板中，共有4个起止区域：

* 支持修改已有「起止区域」的线条样式：包含颜色及线条粗细
* 支持将某一起止区域的线条样式应用到当前全部起止区域
* 支持添加新的起止区域
* 对于每个起止区域，可在画布中调整其大小和位置
* 支持删除某一起止区域（但不建议这么操作，可能会导致素材无法正常试玩）
* <mark style="color:red;">注意：起止区域的线条样式，代表的是从该区域画出的线条的样式</mark>

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

#### **2）配对关系**

<mark style="color:red;">配对关系决定了某个区域是否能画出线：添加了配对关系的才可以画出线，未添加配对关系的即使有起止区域也画不出线</mark>

在【画线回家】模板中，共有4组配对关系：

* 每组配对关系需设置「开始区域」和「结束区域」，以及「配对类别」
  * 「开始区域」只能选择一个，「结束区域」支持单选或多选
  * 「配对类别」分为true和false两种类别（空白制作支持自定义创建，后面详细说明）
* 支持修改每组配对关系的名称
* 支持删除配对关系（但不建议这么操作，可能会导致素材无法正常试玩）
* 支持预览已完成配对关系的所有连线线条
* <mark style="color:red;">注意：已完成连线的起始区域无法再画线</mark>

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

<mark style="background-color:yellow;">以模板【画线回家】为例：</mark>

<mark style="background-color:yellow;">共有4组配对关系：1->3、2->4、1->4、2->3</mark>

<mark style="background-color:yellow;">其中1->3、2->4被设置为「True」配对；1->4、2->3被设置为「False」配对</mark>

<mark style="background-color:yellow;">通过以上配对关系，素材可以从区域1、2拖拽画出线，若最终手指松开的位置在区域3、4内，则画线被保留，并触发相应的事件，否则画线不保留</mark>

<figure><img src="/files/I7EJgWIMHbBHGgsWueKJ" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**注意：**</mark><mark style="color:red;">【空白制作】使用连线组件时，【配对类别】需自行添加。可根据实际制作情况添加多种配对类别。</mark>

点击图示设置按钮，调起【配对类别】弹窗，点击【添加配对类别】，输入名称即设置完成。成功添加后，可选择配对类别

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

#### **3）连线配对**

影响配对关系

* 若选择「单向」，仅能从每个配对的前一个区域开始画线，后一个区域无法画出线。<mark style="background-color:yellow;">以模板【画线回家】的第一组配对关系为例，只能由区域1开始画线，到区域3结束，是无法从区域3开始画线的</mark>
* 若选择「双向」，则能从每组配对关系的任一区域开始画线。<mark style="background-color:yellow;">以模板【画线回家】的第一组配对关系为例，可从区域1开始画线到区域3，也可从区域3开始画线到区域1，两种都能成功完成画线</mark>

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

#### **4）连线类型**

决定画出的线条类型

* 自由绘制：简单来说，自由绘制就是跟随手指的画线轨迹所出现的曲线
* 直线：不受手指在画线过程中的轨迹影响，最终只形成直线

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

### 3.事件

「连线组件」包含两种**触发事件**：「开始画线」、「画线完成」

和「连线组件」相关的**响应事件**包含：「抹除连线线条」、「修改连线线条样式」、「启用/禁用配对关系」、「修改已连线配对的线条样式」、「启用/禁用起止区域」

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

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

#### <mark style="background-color:orange;">1-1）</mark><mark style="background-color:orange;">**触发事件：开始画线**</mark>

需要选择开始画线的区域（支持单选或多选）并设置响应事件

**触发时机为：**<mark style="color:red;">**从已选择的「起止区域」开始画线时**</mark>

<mark style="background-color:yellow;">以模板【画线回家】为例，起止区域选择1和2，响应事件选择从头播放音效。则实现的效果是：当玩家从区域1或区域2任一位置开始画线时，会开始播放音效</mark>

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

#### <mark style="background-color:orange;">1-2）</mark><mark style="background-color:orange;">**触发事件：画线完成**</mark>

需选择「是否匹配」以及「配对方式」下的「配对关系」或「配对类别」

* 若选择「匹配」-「配对关系」（支持单选或多选），还需选择具体是哪一组或哪几组配对关系
* 若选择「匹配」-「配对类别」，还需选择配对类别是true或者false

<mark style="color:red;">**注意:**</mark><mark style="color:red;">这里的true/false对应的是我们在前面「起止区域」部分所设置的配对关系的属性。</mark>在【画线回家】模板中，「配对1 -> 3」和「配对2-> 4」的类别为true，「配对1 -> 4」和「配对2-> 3」的类别为false

<figure><img src="/files/MmcZjy91foJrDTlqhzeZ" alt=""><figcaption></figcaption></figure>

**触发时机为：**<mark style="color:red;">**当已选择的配对关系或配对类别画线完成时**</mark>

**注意：**&#x5F53;我们多选了「配对关系」或者选择了某一「配对类别」时，只要<mark style="color:red;">其中任意一组「配对关系」完成画线</mark>，响应事件即会生效

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

<mark style="background-color:yellow;">以模板【画线回家】为例：</mark>

<mark style="background-color:yellow;">当设置「匹配」→「配对关系」→「配对1 -> 3」，响应事件为「跳转下一场景」时：则在区域1开始画线到区域3成功完成画线后，会跳转到下一场景</mark>

<mark style="background-color:yellow;">当设置「匹配」→「配对类别」→「true」，响应事件为「跳转下一场景」时：则在成功完成类别为true 的「1->3」</mark><mark style="color:red;background-color:yellow;">**或**</mark><mark style="background-color:yellow;">「2->4」</mark> <mark style="background-color:yellow;"></mark><mark style="background-color:yellow;">**任意**</mark><mark style="background-color:yellow;">一组画线时，都会跳转到下一场景</mark>

<figure><img src="/files/iWVsRM2eKAdJ0ulmp6rA" alt=""><figcaption></figcaption></figure>

* 若选择「不匹配」，直接添加对应响应事件即可

**触发时机为：当开始画线后，手指在**<mark style="color:red;">**所有配对关系以外的区域**</mark>**松开时，都属于不匹配**

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

<mark style="background-color:yellow;">以模板【画线回家】为例：</mark>

<mark style="background-color:yellow;">当设置「不匹配」，响应事件为「跳转下一场景」时：从区域1开始画线，在区域3或区域4之外松开画线，则视为「不匹配」，会跳转到下一场景；同理，从区域2开始画线，在区域3或区域4之外松开画线，则视为「不匹配」，会跳转到下一场景</mark>

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

<mark style="color:red;">**注意：**</mark>「画线类别-false」和「不匹配」的区别：

「画线类别-false」 ：属于「配对关系」的一种（如模板中的配对1 -> 4）

「不匹配」：不包含任意一种「配对关系」（如模板中的配对1 -> 2）

#### <mark style="background-color:orange;">2-1）</mark><mark style="background-color:orange;">**响应事件：抹除连线线条**</mark>

需要选择抹除的「配对关系」。

该事件的响应结果为：所选择的配对关系中，**已画完的线条**会被抹除。

<mark style="color:red;">**注意：该响应事件仅对「直线」生效，对「自由绘制」不生效**</mark>

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

#### <mark style="background-color:orange;">2-2）</mark><mark style="background-color:orange;">**响应事件：修改连线线条样式**</mark>

需要选择修改的「起止区域」并设置线条样式。

该事件的响应结果为：所选择区域**开始画出的线及已经画完的线**，样式会修改为指定样式。

<mark style="color:red;">**注意：该响应事件**</mark>

* <mark style="color:red;">**针对「直线」：已画的和未画的线都生效**</mark>
* <mark style="color:red;">**针对「自由绘制」：已画的线不生效，未画的线生效**</mark>

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

#### <mark style="background-color:orange;">2-3）</mark><mark style="background-color:orange;">**响应事件：**</mark><mark style="background-color:orange;">修改已连线配对的线条样式</mark>

需要选择修改的「配对关系」并设置线条样式。

该事件的响应结果为：所选择的配对关系中，**已画完的线条**会被修改为指定样式

<mark style="color:red;">**注意：该响应事件仅对「直线」生效，对「自由绘制」不生效**</mark>

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

#### <mark style="background-color:orange;">2-4）</mark><mark style="background-color:orange;">**响应事件：启用/禁用配对关系**</mark>

需要选择启用或禁用的「配对关系」。

* 若选择「禁用」，该事件的响应结果为：该配对关系，不再能够开始画线和结束画线
* 若选择「启用」，该事件的响应结果为：取消该配对关系的「禁用」事件

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

#### <mark style="background-color:orange;">2-5）</mark><mark style="background-color:orange;">**响应事件：启用/禁用起止区域**</mark>

需要选择启用或禁用的「起止区域」。

* 若选择「禁用」，该事件的响应结果为：该起止区域，不再能够开始画线
* 若选择「启用」，该事件的响应结果为：取消该区域的「禁用」事件

<div align="left"><figure><img src="/files/J98NnqeMMhna488ZdDnd" 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/lian-xian-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.