中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、效果展示

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

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

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

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

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

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

原型地址：https://1st41l.axshare.com/#g=1

二、制作教程

1. 材料準(zhǔn)備

1.1 圖譜部分

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

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

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

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

如下圖所示擺放。

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

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

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

1.2 其他部分

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

2. 設(shè)置交互

2.1 通過中繼器來控制圖譜

① 設(shè)置文本

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

② 設(shè)置圓的顏色

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

③ 移動圓到對應(yīng)位置

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

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

④ 移動水平線

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

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

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

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

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

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

這樣圖譜就出來了。

2.2 拖拉拽移動圓

我們把中繼器里圓組合（除了水平線）轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板有拖動時的事件。

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

一般我們會把拖動的組合置頂，這樣不會被其他圓擋住。

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

2.3 添加新節(jié)點

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

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

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

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

2.4 添加新子節(jié)點

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

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

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

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

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

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

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

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

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

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

這里要注意的是，在更新行之前，因為前面可能有些行是剛剛編輯完成的，就是已經(jīng)存在行bianji列的值為1，我們要先將他清空，我們可以先標(biāo)記所有行數(shù)據(jù)，然后更新全部標(biāo)記行，將bianji里的值更新為0,。然后再將當(dāng)前行bianji列的值更新為1。這樣處理后，biaoji列的就僅有選中圓對應(yīng)行是1。

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

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

2.6 刪除節(jié)點

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

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

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

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

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