用10分钟搞定H5连线题

看过那么多H5，大概你也发现了，连线题这种交互形式几……乎……没……人……做

为什么呢？

其一，系统要记录下用户绘制的直线（这个不难）；

其二，系统要划出范围，即用户只能以这个为起点，那个为终点，进行连线操作（这个有点难度了）；

其三，要做出判断，从这个为起点，那个为终点的连线才算通过，从这个为起点，别的为终点的连线不算数，从别的为起点，那个为终点的连线也不算数（这个……看完就懵逼了！）

其实试过各家H5工具，发现还是可以做的。下面来展示我用10分钟搞定的H5连线题，而且是不用代码的那种。

一、前期准备：

H5工具：Mugeda（www.mugeda.com）

浏览器：下载Chrome浏览器，这是对H5支持最好的，方便边做边调试

最近mugeda出了一个新功能——连线，连线这个功能可以让大家又多了一种交互的方式，那么用它可以具体做什么呢？

举个例子
1、做测试题

2、做连线小游戏

二、具体操作步骤

顾名思义，连线这种东西，就是把一个东西通过线连接到另一个东西上。所以首先我们要拉出一个东西：

有了这个之后，我们在舞台上就能拖动这根线了，给它命个名字：

这时候，我们已经建立好一个东西了，那么我们再建立另一个东西给它命名：

这时候，我们可以在连线的那根线上，找到这个属性，点+号：

现在，这根线就能连到另一个东西上了，快试试把~！

——————————高深的分割线——————————

如果我们需要判断这根线到底连到了什么上面可以在连线的那根线上加任何行为，都会有触发条件：连线完成跟连线断开：

如果想要它连到某个物体上执行某一条行为呢，那么点编辑进入参数设置时，会有一个停靠物体的判断条件：

加了这个触发条件以及判断条件之后逻辑是这样：
如果连线成功，并连接到这个物体上，那么执行这个行为。

这样，就可以随心所欲做任何事情了
还听不懂疙瘩宝宝就帮不了你了！

————————————更高深的分界线————————————
如果你不满足那么还有更高深的，还有高手案例课供你修炼！

案例教学：《网易：5点连线画一个爱》

扫描下方二维码查看案例

扫描下方二维码开始学习