詳解GoJs節(jié)點的選中高亮實現(xiàn)示例
前言
上文中我們說到了，節(jié)點之間的文字描述。在有些時候我們要看兩個節(jié)點之間的關系，在數(shù)據(jù)量比較大的時候就需要給兩個節(jié)點給一個選中的樣式。在使用的過程中，gojs默認給了一個節(jié)點的選中樣式，就是一個藍色的邊框。
gojs節(jié)點選中高亮的使用
//data
myDiagram: null,
nodes:[
{ key: "1", color: "#99FFFF",text:"三國",figure:"Rectangle" },
{ key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
{ key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
{ key: "1-3", color: "#0000FF",text:"吳",figure:"Circle" },
],
links:[
{
from:"1",
to:"1-1"
},
{
from:"1",
to:"1-2"
},
{
from:"1",
to:"1-3"
},
]
//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
layout: $$(go.TreeLayout),
});
this.myDiagram.nodeTemplate =
$$(go.Node, "Vertical",
$$(go.Shape, "Circle",
{ width: 30, height: 30 },
new go.Binding("fill", "color"),
new go.Binding("figure", "figure"),
),
$$(go.TextBlock,
new go.Binding("text", "text"))
);
this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);
上圖是沒有經(jīng)過選中樣式的配置，默認顯示的樣式。
只選中節(jié)點內部分元素的選中樣式
this.myDiagram.nodeTemplate =
$$(go.Node, "Vertical",
{ selectionObjectName: "ICON" },
$$(go.Shape, "Circle",
{ width: 30, height: 30,name:"ICON" },
new go.Binding("fill", "color"),
new go.Binding("figure", "figure"),
),
$$(go.TextBlock,
new go.Binding("text", "text"))
);
選中節(jié)點內部元素的選中樣式只需要給內部的繪圖模板的屬性加上name，然后給go.Node的屬性設置屬性selectionObjectName，然后保證selectionObjectName的屬性值和節(jié)點內部元素的name的值保持一致，就可以在點擊節(jié)點選中的時候只是對部分圖形進行一個選中框選。
定制的選中樣式
如果根據(jù)自己的可視化圖形的顏色風格，選中的顏色等樣式和圖形色調不搭配的話。就需要對圖形的選中樣式進行一個定制的配置，其使用方式和提示信息(toolTip)和右鍵菜單(contextMenu)一樣。都是和go.Node同級進行一個配置，其配置屬性為selectionAdornmentTemplate，代碼示例如下
{
selectionAdornmentTemplate:
$$(go.Adornment, "Auto",
$$(go.Shape, "Rectangle",
{ fill: null, stroke: "#67B73C", strokeWidth: 8 }),
$$(go.Placeholder)
)
}
如果需要對不同的集合圖形顯示不同的選中幾何圖形的話，例如上方正方向選中為正方向，圓形選中為圓形。也可以在模板中增加new go.Binding("figure"),進行圖形的動態(tài)配置。
節(jié)點選中時候增加操作按鈕
在節(jié)點的被選中的額時候，有的時候需要對選中的節(jié)點直接進行的操作。所以在選中的模板中增加配置，可以在上下左右的中心位置增加按鈕。其顯示位置可以參考toolTip或者contextMenu中的位置。
{
selectionAdornmentTemplate:
$$(go.Adornment, "Spot",
$$(go.Panel, "Auto",
$$(go.Shape, { fill: null, stroke: "#67B73C", strokeWidth: 5 }),
$$(go.Placeholder)
),
$$(go.Panel, "Vertical",{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, },
$$("Button",
$$(go.TextBlock, "增加新的子節(jié)點",
{ font: "bold 6pt sans-serif" })
),
$$("Button",
$$(go.TextBlock, "刪除此節(jié)點",
{ font: "bold 6pt sans-serif" })
),
$$("Button",
$$(go.TextBlock, "查看節(jié)點信息詳情",
{ font: "bold 6pt sans-serif" })
),
$$("Button",
$$(go.TextBlock, "修改節(jié)點信息",
{ font: "bold 6pt sans-serif" })
)
),
)
}
由上圖可以知道，在節(jié)點的右面可以配置很多的按鈕，并且可以根據(jù)自己的需求對菜單的寬度進行一個統(tǒng)一，然后給不同的按鈕綁定對應的點擊事件的回調函數(shù)，就可以實現(xiàn)選中時候的右面菜單的交互功能。
修改選中節(jié)點的內部樣式
對于節(jié)點的選中,不僅可以給選中的節(jié)點加上不同樣式的框選樣式。并且可以對選中的節(jié)點更改一下節(jié)點內部的樣式因為是調整了節(jié)點的內部結構，因此我們可以通過selectionAdorned: false來禁用默認的選中樣式，這樣就不會在選中的節(jié)點有框選元素了。然后根據(jù)節(jié)點選中狀態(tài)變化之后的鉤子函數(shù)selectionChanged綁定回調函數(shù)進行節(jié)點樣式的修改。我們以修改選中節(jié)點的背景顏色為例，代碼如下
this.myDiagram.nodeTemplate =
$$(go.Node, "Vertical",
{ selectionAdorned: false,selectionChanged: this.onSelectionChanged },
$$(go.Shape, "Circle",
{ width: 30, height: 30,name:"ICON" },
new go.Binding("fill", "color"),
new go.Binding("figure", "figure"),
),
$$(go.TextBlock,
new go.Binding("text", "text")),
)
onSelectionChanged(node){
let icon = node.findObject("ICON");
if (icon !== null) {
if (node.isSelected)
icon.fill = "#67B73C";
else
icon.fill = node.data.color;
}
}
由上面代碼和圖形可以知道，onSelectionChanged則是節(jié)點選中變化綁定的回調函數(shù)。其參數(shù)node則是節(jié)點的對象信息，可以通過node.data來獲取到節(jié)點的數(shù)據(jù)。然后通過節(jié)點的對象信息node.findObject獲取到的是節(jié)點內的一個元素對象，其查找規(guī)則是通過節(jié)點元素的name來進行查找，然后通過node.isSelected來判斷節(jié)點是否選中，所以在選中的節(jié)點給修改一個顏色，沒有選中的節(jié)點依然配置之前節(jié)點中的數(shù)據(jù)顏色。
總結
在可視化圖形的使用中.如果節(jié)點數(shù)據(jù)過多，我們就需要著重對研究的節(jié)點一個突出的樣式來和其他節(jié)點進行一個區(qū)分。因此這個時候我們點擊選中修改選中的樣式就顯得比較重要，可以根據(jù)需求進行拓展。
以上就是詳解GoJs節(jié)點的選中高亮實現(xiàn)示例的詳細內容，更多關于GoJs節(jié)點選中高亮的資料請關注腳本之家其它相關文章！
相關文章
最近沒有項目做，有點空余時間，小編把日常比較常用的js表單驗證代碼整理分享到腳本之家平臺，供大家學習，需要的朋友參考下吧2016-04-04
JavaScript?對象新增方法defineProperty與keys的使用說明
這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了JS中數(shù)組Array的用法,需要的朋友可以參考下2014-02-02
淺談js函數(shù)三種定義方式 & 四種調用方式 & 調用順序
下面小編就為大家?guī)硪黄獪\談js函數(shù)三種定義方式 & 四種調用方式 & 調用順序。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
最近做了一個項目，涉及到某寶購物支付密碼的輸入框功能，下面小編把實現(xiàn)思路分享到腳本之家平臺供大家參考2016-12-12
基于JavaScript實現(xiàn)移動端點擊圖片查看大圖點擊大圖隱藏
最近接了個項目，項目需求是這樣的，當點擊圖片查看圖片，再次點擊大圖被隱藏，在移動端用的比較多，因為移動端屏幕小，需要查看大圖。具體代碼實現(xiàn)過程本文給大家介紹，需要的朋友可以參考下2015-11-11
JavaScript實現(xiàn)頁面5秒后自動跳轉的方法
這篇文章主要介紹了JavaScript實現(xiàn)頁面5秒后自動跳轉的方法,涉及javascript遞歸調用與計時函數(shù)setTimeout的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
理解返回函數(shù)的JavaScript函數(shù)是什么意思，通過幾個簡短的例子真正理解返回函數(shù)的JavaScript函數(shù)到底是什么？感興趣的小伙伴們可以參考一下2016-06-06
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要介紹了JavaScript事件監(jiān)聽器詳細介紹,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-09-09