這篇文章里，作者介紹了如何在Axure里用中繼器制作制作一個(gè)動(dòng)態(tài)圖譜，想了解如何實(shí)現(xiàn)這一效果的同學(xué)們，可以來(lái)看一看。

知識(shí)圖譜是一種將知識(shí)以圖形方式組織和表示的方法。它由節(jié)點(diǎn)和邊組成，節(jié)點(diǎn)代表實(shí)體（如人物、地點(diǎn)、概念等），邊表示這些實(shí)體之間的關(guān)系。知識(shí)圖譜旨在捕獲豐富的語(yǔ)義信息，使得計(jì)算機(jī)能夠理解和推理出不同實(shí)體之間的關(guān)聯(lián)性，從而支持更智能的搜索、推薦、問答等任務(wù)。

所以今天作者就教大家怎么在Axure里用中繼器制作制作一個(gè)動(dòng)態(tài)圖譜，包括拖拉拽移動(dòng)、編輯、增刪改等效果，具體效果如下所示：

一、效果展示

1）拖拽移動(dòng)——鼠標(biāo)拖動(dòng)可以移動(dòng)節(jié)點(diǎn)，對(duì)應(yīng)連接線的長(zhǎng)度和角度會(huì)自動(dòng)調(diào)整。

2）修改節(jié)點(diǎn)內(nèi)容——鼠標(biāo)單擊可以選中對(duì)應(yīng)節(jié)點(diǎn)，選中后點(diǎn)擊編輯節(jié)點(diǎn)按鈕（也可以通過鼠標(biāo)雙擊來(lái)編輯），修改節(jié)點(diǎn)的文字內(nèi)容。

3）添加子節(jié)點(diǎn)——鼠標(biāo)單擊可以選中對(duì)應(yīng)節(jié)點(diǎn)，選中后點(diǎn)擊添加子節(jié)點(diǎn)按鈕，可以添加該節(jié)點(diǎn)的子節(jié)點(diǎn)。

4）刪除節(jié)點(diǎn)——鼠標(biāo)單擊可以選中對(duì)應(yīng)節(jié)點(diǎn)，選中后點(diǎn)擊刪除節(jié)點(diǎn)按鈕（也可以通過按鍵盤的delete鍵），確認(rèn)后可以刪除該節(jié)點(diǎn)。

5）刪除父級(jí)節(jié)點(diǎn)——鼠標(biāo)單擊可以選中對(duì)應(yīng)節(jié)點(diǎn)，選中后點(diǎn)擊刪除節(jié)點(diǎn)按鈕（也可以通過按鍵盤的delete鍵），確認(rèn)后可以刪除該節(jié)點(diǎn)以及對(duì)應(yīng)的子節(jié)點(diǎn)。

6）添加新節(jié)點(diǎn)——鼠標(biāo)點(diǎn)擊添加新節(jié)點(diǎn)按鈕），可以添加一個(gè)全新的節(jié)點(diǎn)。

二、制作教程

1. 材料準(zhǔn)備

1.1 圖譜部分

圖譜部分我們主要用到中繼器，中繼器里面放置圓形、水平線、輸入框，矩形。

圓形如果需要多種顏色的，可以將對(duì)應(yīng)顏色的圓形放置在同一個(gè)動(dòng)態(tài)面板不同的state里。

輸入框默認(rèn)隱藏，背景顏色為透明。

矩形的話一個(gè)是主要做背景矩形，選中效果，默認(rèn)隱藏，在頂部還要放置一個(gè)是默認(rèn)透明的圓，用于遮擋輸入框，后續(xù)通過雙擊或者編輯按鈕，才能修改內(nèi)容。

如下圖所示擺放。

中繼器表格我們需要一下幾列：

• text：對(duì)應(yīng)圖譜圓里的文字內(nèi)容
• x：該圓圓心對(duì)應(yīng)的x坐標(biāo)值
• y：該圓圓心對(duì)應(yīng)的y坐標(biāo)值
• bgcolor：圓的顏色
• fuji：該圓對(duì)應(yīng)的父級(jí)節(jié)點(diǎn)，例如廣州的父級(jí)節(jié)點(diǎn)填廣東
• fx：父節(jié)節(jié)點(diǎn)圓心的x坐標(biāo)值
• fy：父節(jié)節(jié)點(diǎn)圓心的y坐標(biāo)值
• bianji：默認(rèn)為空即可，后續(xù)用于選中編輯哪個(gè)圓的

我們填寫的時(shí)候其實(shí)填寫前4列即可，后面三列fuji、fx、和fy，我們是復(fù)制對(duì)應(yīng)父節(jié)點(diǎn)前三列的數(shù)據(jù)。

1.2 其他部分

其他部分的話，主要包括按鈕，提示彈窗，新節(jié)點(diǎn)和新子節(jié)點(diǎn)的輔助圓（和圖譜一樣大小的，默認(rèn)隱藏），記錄文本（默認(rèn)隱藏），這種輔助類的元件，這些在擺放在中繼器外部即可，彈窗默認(rèn)隱藏。

2. 設(shè)置交互

2.1 通過中繼器來(lái)控制圖譜

① 設(shè)置文本

在中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將中繼器表格text列的值設(shè)置到頂部的透明圓，以及輸入框里。

② 設(shè)置圓的顏色

用設(shè)置面板狀態(tài)的交互，根據(jù)bgcolor列填寫的顏色，設(shè)置到對(duì)應(yīng)的動(dòng)態(tài)面板里。

③ 移動(dòng)圓到對(duì)應(yīng)位置

我們用移動(dòng)的交互，設(shè)置圓心到達(dá)x和y列對(duì)應(yīng)的坐標(biāo)值位置，這里需要注意的是：

1. 到達(dá)的位置不能直接是xy的位置，因?yàn)槟鞘菆A心坐標(biāo)，他的坐標(biāo)應(yīng)該要減去一般的寬度或高度；
2. 中繼器是一行行來(lái)的，如果是第二行要減去第一行的高度，第三行要減去前兩行的高度，所以我們需要用index函數(shù)獲取在第幾行，然后減去前面累計(jì)的高度即可。

④ 移動(dòng)水平線

用移動(dòng)的交互，根據(jù)xy列的坐標(biāo)值，設(shè)置線移動(dòng)到對(duì)應(yīng)的圓心為位置，這里需要的也是中繼器是一行行來(lái)的，如果是第二行要減去第一行的高度，第三行要減去前兩行的高度，所以我們需要用index函數(shù)獲取在第幾行，然后減去前面累計(jì)的高度即可。

⑤ 設(shè)置水平線的長(zhǎng)度

我們用兩點(diǎn)間距離公式d = √((x2 – x1)^2 + (y2 – y1)^2)，根據(jù)xy列和fxfy列兩個(gè)圓心的值，就可以求出線段的長(zhǎng)度，然后用設(shè)置尺寸的交互，設(shè)置水平線的長(zhǎng)度。

⑥ 設(shè)置水平線的角度

同樣我們，根據(jù)xy列和fxfy列兩個(gè)圓心的值，通過三角函數(shù)，可以用Math.atan2(y2-y1,x2-x1)*180/π來(lái)計(jì)算出兩個(gè)點(diǎn)之間的角度，然后用旋轉(zhuǎn)的交互，將線段設(shè)置到對(duì)應(yīng)的角度，這樣兩個(gè)圓之間的線段就連成線了。

這里要注意的是，第一個(gè)最高級(jí)的圓是沒有父節(jié)點(diǎn)的，所以我們要增加一個(gè)條件判斷，如果fx為空值時(shí)，就是沒有父節(jié)點(diǎn)，這個(gè)圓就不需要鏈接線，我們用隱藏的交互，將他隱藏即可。

這樣圖譜就出來(lái)了。

2.2 拖拉拽移動(dòng)圓

我們把中繼器里圓組合（除了水平線）轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板有拖動(dòng)時(shí)的事件。

鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板時(shí)，我們用移動(dòng)的交互，讓他跟隨移動(dòng)即可。

一般我們會(huì)把拖動(dòng)的組合置頂，這樣不會(huì)被其他圓擋住。

拖動(dòng)的時(shí)候我們還要實(shí)時(shí)更新中繼器表格里記錄圓心的坐標(biāo)值，我們用更新行的交互就可以了，更新的話要更新兩部分內(nèi)容，第一個(gè)這個(gè)圓是父節(jié)點(diǎn)，我們要更新他的子節(jié)點(diǎn)的fx和fy列的值，更新為現(xiàn)在圓心的坐標(biāo)即可；其次是更新當(dāng)前行圓心x和y列的值，同樣是更新為現(xiàn)在圓心的實(shí)時(shí)坐標(biāo)即可。

2.3 添加新節(jié)點(diǎn)

鼠標(biāo)單擊添加新節(jié)點(diǎn)的時(shí)候，我們用顯示的交互，顯示輔助圓，然后用移動(dòng)的交互，將輔助圓移動(dòng)到圓心對(duì)應(yīng)鼠標(biāo)指針的位置，這里鼠標(biāo)指針的坐標(biāo)值可以用cursor函數(shù)獲取.

鼠標(biāo)在新節(jié)點(diǎn)圓里移動(dòng)時(shí)，我們用移動(dòng)的交互，將始終保持圓心跟隨鼠標(biāo)指針的位置，這里和上面的交互是一樣的，這樣新的圓就可以跟隨鼠標(biāo)移動(dòng)了。

這里有時(shí)候鼠標(biāo)移動(dòng)的太快，圓可能跟不上，導(dǎo)致鼠標(biāo)移出了圓無(wú)法繼續(xù)跟隨，我們?cè)陧?yè)面鼠標(biāo)移動(dòng)時(shí)增加移動(dòng)圓的交互，就可以避免這樣的情況。

當(dāng)鼠標(biāo)單擊圓時(shí)，就是我們想把圓放在這個(gè)位置，所以我們用添加行的交互，在中繼器里增加一行，里面填寫對(duì)應(yīng)列的內(nèi)容即可，text可以填寫默認(rèn)文字例如新節(jié)點(diǎn)，然后xy是填寫圓心的位置，就是鼠標(biāo)指針的x和y坐標(biāo)值。因?yàn)槭切鹿?jié)點(diǎn)，所以后面的fuji、fx、fy都不用填寫。

2.4 添加新子節(jié)點(diǎn)

添加新的子節(jié)點(diǎn)和上面大體相同，不同的是，添加之前，你要先選擇并記錄父節(jié)點(diǎn)。

鼠標(biāo)單擊父節(jié)點(diǎn)時(shí)，我們用要將底部的選中框顯示出來(lái)，這樣才知道哪個(gè)被選中，并且記錄下選中元的x、y和對(duì)應(yīng)的文本值，這個(gè)直接用設(shè)置文本的交互即可。

這里因?yàn)檫x中的圓只能有一個(gè)，選中下一個(gè)的時(shí)候，上一個(gè)就應(yīng)該取消選中，我們要通過選中的交互串聯(lián)上面的交互，我們先把頂部透明圓設(shè)置一個(gè)選項(xiàng)組，這樣就只能選中一個(gè)了。鼠標(biāo)單擊節(jié)點(diǎn)時(shí)選中這個(gè)圓，然后顯示選中框，記錄對(duì)應(yīng)的文本；取消選中時(shí)，就隱藏選中框即可。

鼠標(biāo)單擊添加子節(jié)點(diǎn)按鈕時(shí)，我們首先要判斷，有沒有文本被選中，我們可以根據(jù)記錄文本的值是否為空來(lái)判斷，這里最后在中繼器每項(xiàng)加載時(shí)的第一行一開始的時(shí)候，我們用設(shè)置文本的交互將他設(shè)置為空。那后面選中之后，就會(huì)記錄下文字。

如果文字等于空，就是沒有選擇父節(jié)點(diǎn)，我們顯示的交互，顯示提示彈窗即可；

如果不為空就是已經(jīng)選擇了父節(jié)點(diǎn)，我們和上面添加新節(jié)點(diǎn)的交互是一樣的，首先顯示新子節(jié)點(diǎn)對(duì)應(yīng)的圓，讓圓跟隨鼠標(biāo)移動(dòng)，鼠標(biāo)單擊時(shí)隱藏圓，添加新行，這里跟前面的內(nèi)容都是一樣的，就不重復(fù)了。

我們只講不同點(diǎn)，不同點(diǎn)是添加行的時(shí)候，前面添加新節(jié)點(diǎn)因?yàn)闆]有父節(jié)點(diǎn)，所以fuji、fx、fy都不用填寫，這里添加子節(jié)點(diǎn)有父級(jí)，我們要把父級(jí)對(duì)應(yīng)的文字，圓心的xy坐標(biāo)填寫進(jìn)去。上面我們用設(shè)置文本的交互，記錄在三個(gè)文本標(biāo)簽里，這里用變量獲取就可以了。

2.5 編輯節(jié)點(diǎn)內(nèi)容子節(jié)點(diǎn)

鼠標(biāo)點(diǎn)擊編輯按鈕時(shí)，其實(shí)和前面添加子節(jié)點(diǎn)一樣，先要判斷是否已經(jīng)選擇了節(jié)點(diǎn)，如果沒有選擇，就顯示提示彈窗；

如果選擇了，我們用更新行的交互，將bianji列的值更新為1，我們要通過bianji列的值來(lái)控制輸入框是否顯示。在中繼器每項(xiàng)加載時(shí)，如果編輯列的值等于1，就顯示輸入框，隱藏頂部遮擋的圓。

這里要注意的是，在更新行之前，因?yàn)榍懊婵赡苡行┬惺莿倓偩庉嬐瓿傻模褪且呀?jīng)存在行bianji列的值為1，我們要先將他清空，我們可以先標(biāo)記所有行數(shù)據(jù)，然后更新全部標(biāo)記行，將bianji里的值更新為0,。然后再將當(dāng)前行bianji列的值更新為1。這樣處理后，biaoji列的就僅有選中圓對(duì)應(yīng)行是1。

另外，我們也可以在鼠標(biāo)雙擊圓時(shí)進(jìn)入編輯模式，交互和上面的是一樣的。

輸入框失去焦點(diǎn)時(shí)，就是編輯完成了，我們用更新行的交互將輸入框里的值更新回中繼器表格里即可，這里和上面一樣，更新的話要更新兩部分內(nèi)容，第一個(gè)這個(gè)圓是父節(jié)點(diǎn)，我們要更新他的子節(jié)點(diǎn)的fuji列的值，例如廣東改名為廣東省，廣州那行里fuji記錄的還是廣東，所以要先把對(duì)應(yīng)的fuji列的內(nèi)容更新為現(xiàn)在輸入框里最新的值；然后是更新當(dāng)前行text列值，同樣是更新為現(xiàn)在輸入框里最新的值即可。

2.6 刪除節(jié)點(diǎn)

鼠標(biāo)單擊刪除按鈕時(shí)，其實(shí)和前面添加子節(jié)點(diǎn)一樣，先要判斷是否已經(jīng)選擇了節(jié)點(diǎn)，如果沒有選擇，就顯示提示彈窗；

如果選擇了節(jié)點(diǎn)，就顯示確認(rèn)彈窗，鼠標(biāo)點(diǎn)擊確認(rèn)按鈕時(shí)，用刪除行的交互刪除，這里我們也是和上面一樣，首先要?jiǎng)h除fuji列的和記錄要?jiǎng)h除的節(jié)點(diǎn)名稱，其實(shí)就是子節(jié)點(diǎn)；然后再刪除當(dāng)前節(jié)點(diǎn)。

最后如果希望按鍵盤的delete鍵也可以刪除，我們只需要在頁(yè)面按鈕按下時(shí)，用觸發(fā)的交互，觸發(fā)上面刪除的交互即可。

這樣我們就完成了中繼器制作動(dòng)態(tài)知識(shí)圖譜的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里維護(hù)圖譜的相關(guān)信息，預(yù)覽時(shí)就可以自動(dòng)生成包括拖拉拽移動(dòng)、編輯、增刪改等交互效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。