本文將詳細(xì)指導(dǎo)您如何在設(shè)計(jì)知識圖譜或流程圖時(shí)實(shí)現(xiàn)連線效果，通過簡單的步驟和配置，使您的設(shè)計(jì)更加直觀和高效。

在設(shè)計(jì)知識圖譜或者流程圖的時(shí)候，我們經(jīng)常需要用到連接功能，或者是畫線效果：

連線模式演示：http://usrsky.axshare.com/#id=uvavuf&g=1

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

01 教程

第一步

設(shè)置3個(gè)全局變量：

這里startX為了記錄起始點(diǎn)的x坐標(biāo)，startY為了記錄起始點(diǎn)的y坐標(biāo)，PI是為了省事。

第二步

元件目錄結(jié)構(gòu)非常簡單，一個(gè)動(dòng)態(tài)面板，內(nèi)部放一個(gè)名稱為Line的隱藏矩形即可：

注意要選中“100%寬度”，這樣就無需要更改動(dòng)態(tài)面板的寬度了。

第三步

設(shè)置動(dòng)態(tài)面板的交互：

文字說明：

1）載入時(shí)：

• 設(shè)置尺寸為[[Window.Height]]高，因?yàn)閷挾纫褳?00%了，無需設(shè)置。

2）拖動(dòng)開始時(shí)：

• 設(shè)置變量startX、startY為鼠標(biāo)位置
• 設(shè)置Line的尺寸為1×1
• 移動(dòng)Line動(dòng)態(tài)鼠標(biāo)位置
• 顯示Line

3）拖動(dòng)結(jié)束時(shí)：

• 重置變量startX、startY的值
• （這里可以增加中繼器的添加行交互）

4）拖動(dòng)時(shí)：

• 重置旋轉(zhuǎn)角度
• 勾股定理計(jì)算Line的尺寸
• 三角函數(shù)旋轉(zhuǎn)Line到正確位置

這樣，一個(gè)畫線的效果就完成了。