> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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/zi-you-hua-xian-zu-jian.md).

# 自由画线组件

✨模板自由制作入口：作品预览区>>>自由画线按钮 或 图层区>>>Draw Lines Component

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

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

<div align="left"><figure><img src="/files/FdlGfmtjeNKdrxMHHcv5" 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/zi-you-hua-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%252F20001312%252F13021%252Fpv%252F24%252F06%252F03%252F665d8362e6f54%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E4%B8%B4%E6%91%B9%E7%94%BB%E5%9B%BE\&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%252F20001166%252F12705%252Fpv%252F24%252F04%252F03%252F660ccbecb1ce3%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%E9%80%9A%E8%BD%A6\&language=undefined)
* [示例3 - 画线砸它](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%252F20001138%252F12638%252Fpv%252F24%252F08%252F12%252F66b9a925b825c%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%E7%A0%B8%E5%AE%83\&language=undefined)
* [示例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%252F20001137%252F12633%252Fpv%252F24%252F04%252F08%252F6613b8d975a19%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%95%91%E5%AE%83\&language=undefined)

####

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

「自由画线组件」可调整的参数分三部分：「外观」、「线条」、「事件」

我们将结合模板[【画线救它】](http://tinyurl.com/bdcm78r2)进行「自由画线组件」的使用说明

### 1. 外观

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

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

### 2.线条

「线条」参数包含“线条样式”和“刚体类型”两部分

#### 1）线条样式

* 可以设置画出的线条颜色及粗细
* 点击「预览线条」可在画布中预览所设置的线条样式

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

#### 2）刚体类型(暂不支持调整)

「刚体类型」可以决定画出的线条，是否具有刚体属性。共有四种类型可以选择：

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

* 非刚体：不具有物理性质，仅作为图片展示
* 静态刚体：具有物理性质，会与其他的刚体发生碰撞，但静态刚体本身始终静止不动。如墙壁、地面等
* 动力学刚体：有一定质量并在外力作用下运动，遵循牛顿定律的物体，会与其他类型的刚体发生碰撞并改变其速度。如自由下落的小球
* 运动学刚体：不考虑物体受力情况和质量，以恒定的速度运动的物体，会与「动力学刚体」发生碰撞。如始终匀速运动的小球

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

### 3.事件

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

和「自由画线组件」相关的**响应事件**包含：「抹除画线线条」、「修改画线线条样式」、「启用/禁用自由画线组件」、「已画线条生成刚体」

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

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

设置「开始画线」，并添加所需的响应事件

**触发时机为：**<mark style="color:red;">**当玩家开始画线时**</mark>

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

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

设置「画线完成」，并添加所需的响应事件

**触发时机为：**<mark style="color:red;">**当玩家完成画线时**</mark>

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

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

该事件的响应结果为：所有已画完成的线条会被抹除

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

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

该事件的响应结果为：画出的线条将被修改为指定样式

<mark style="color:red;">**注意：该响应事件仅对未画出的线生效，对已画出的不生效**</mark>

<div align="left"><figure><img src="/files/mY5czsuNJ2wLXWEdokP9" 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>

需要选择启用/禁用：

* 若选择「禁用」，该事件的响应结果为：该组件不再能够开始画线和完成画线
* 若选择「启用」，该事件的响应结果为：取消「禁用」事件

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

<mark style="background-color:orange;">**2-4）响应事件：已画线条生成刚体**</mark>

该事件的响应结果为：线条根据所选的「刚体类型」，变为刚体

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