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

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

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

01 教程

第一步

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

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

第二步

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

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

第三步

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

文字說(shuō)明：

1）載入時(shí)：

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

2）拖動(dòng)開(kāi)始時(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è)畫(huà)線的效果就完成了。