GoJs中標題和縮略圖使用技巧
前言
在可視化圖形中為了方便區(qū)分，需要給圖形一個標題?？梢栽诋嫴纪饷嬗?code>html調整位置之后作為圖形的標題，當然也可以在畫布內部進行一個標題的繪制。在畫布上的節(jié)點數(shù)據(jù)量比較大的時候，也需要用到縮略圖對圖形進行一個縮略顯示并且拖動縮略圖的框選來重點的畫布中的部分數(shù)據(jù)。
標題的使用
還是以前面的數(shù)據(jù)為例，在原有數(shù)據(jù)的基礎上給圖形增加一個標題代碼示例如下
//data
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.nodeTemplate = $$(
go.Node,
"Vertical",
$$(
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"))
);
隨圖形變化的標題
增加一個隨圖形變化的標題，可以通過location給標題一個廚師的定位
this.myDiagram.add(
$$(go.Part, { location: new go.Point(0, -80) },
$$(go.TextBlock, "三國爭霸", { font: "bold 24pt sans-serif", stroke: "#67B73C" }))
);
由上面圖形可以看出，在圖像的滾動以及整體的放大縮小的過程中。圖形的標題都會隨著圖形的本身進行同樣的放大和縮小。相當于把標題當做了一個游離的文本節(jié)點。當然你也可以設置go.Part的屬性selectable:false。這樣你在拖動標題的時候，整個圖形都會隨著拖動。因此標題無法單獨移動，刪除。
不隨圖形變化的標題
實現(xiàn)不隨圖形變化的標題，最簡單的方法是用修改html的樣式和位置來實現(xiàn)圖形的標題。此處我們要說到的是通過gojs來實現(xiàn)一個不隨圖形變化的標題。
this.myDiagram.add(
$$(
go.Part,
{ _viewPosition: new go.Point(900, 120), layerName: "Grid" },
$$(go.TextBlock, "三國爭霸", {
font: "bold 24pt sans-serif",
stroke: "green",
})
)
);
this.myDiagram.addDiagramListener("ViewportBoundsChanged", function (e) {
e.diagram.commit(function (obj) {
obj.parts.each(function (part) {
if (part._viewPosition) {
part.position = obj.transformViewToDoc(part._viewPosition);
part.scale = 1 / obj.scale;
}
});
});
});
由上面圖形可以看出，在圖像滾動和放大縮小的過程中。圖形的標題位置和大小都不會發(fā)生改變。這樣就可以始終在一個位置進行顯示。其位置的展示類似于css的絕對定位。但是在圖形滑動和放大縮小的過程中，可以看到標題雖然位置和大小沒有發(fā)生變化。但是好像在過程中會發(fā)生閃爍。這是因為畫布的底層為H5新增標簽canvas，在canvas中是通過獲取2d渲染上下文。在中間的內部元素發(fā)生變化的時候，不是部分元素的替換。其內部元素變化的過程是每次都會把畫布中的所有元素擦掉，重繪。一直循環(huán)這個過程來實現(xiàn)畫布中顯示元素的變化。
縮略圖的使用
在畫布中的節(jié)點數(shù)量比較多的時候，我們又想著重的觀看到某些重點的內容顯示。這個時候我們就會對畫布的整體進行放大，這樣我們的可視區(qū)域就只能顯示部分的畫布內容。如果我們需要從左上角的可視圖形展示切換到右下角的可視圖形展示的過程中，如果用鼠標點擊畫布逐步拖動非常慢，效率很低。這個時候就需要使用到縮略圖，在縮略圖內部展示選擇框就是我們可視區(qū)域的圖形。我們可以拖動框選的矩形就可以看到畫布的人和位置了。非常的方便?？s略圖的使用方法如下
//html
<div id="myOverviewDiv"></div>
//methods
let myOverview =
$$(go.Overview, "myOverviewDiv",
{ observed: this.myDiagram }
)
縮略圖是使用go.Overview來實現(xiàn)的,因為其繼承go.Diagram。所以使用方法基本一致。都是需要一個div容器進行初始化，然后其observed屬性為圖形的實例,在本例中是this.myDiagram。
總結
在一個畫布中，標題和縮略圖的使用非常的普遍。一個能表述中可視化圖形的功能。另外一個則是方便我們重點觀察畫布的某些元素。增加對可視化圖形信息提取的效率。
以上就是GoJs中標題和縮略圖使用技巧的詳細內容，更多關于GoJs標題縮略圖的資料請關注腳本之家其它相關文章！
相關文章
為一個字符串進行URL編碼很容易,只需要調用encodeURI,傳入要編碼的字符串即可,而且實現(xiàn)的方法不止這一個,下面這篇文章主要給大家介紹了關于js對url進行編碼解碼的三種方式,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了詳解http訪問解析流程原理的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了js根據(jù)后綴判斷文件文件類型的代碼，原來是獲取文件的擴展名然后再判斷屬于什么類型，對于圖片多個后綴的判斷的實現(xiàn)也不是不錯的思路，大家可以參考一下2020-05-05
這篇文章主要為大家介紹了JavaScript?BOM，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本文主要介紹了原生js實現(xiàn)選項卡功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
layui 數(shù)據(jù)表格 點擊分頁按鈕 監(jiān)聽事件的實例
今天小編就為大家分享一篇layui 數(shù)據(jù)表格 點擊分頁按鈕 監(jiān)聽事件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關于echarts提示框tooltip被遮擋的解決辦法, 在制作圖表中,發(fā)現(xiàn)有時候tooltip會被線條遮擋或者被柱子折線遮擋,這種情況會偶爾出現(xiàn),需要的朋友可以參考下2023-08-08
javascript中innerHTML 獲取或替換html內容的實現(xiàn)代碼
這篇文章主要介紹了javascript中innerHTML 獲取或替換html內容,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
JavaScript 動態(tài)將數(shù)字金額轉化為中文大寫金額
JavaScript 將數(shù)字金額轉化為中文大寫金額的函數(shù)2009-05-05
這篇文章主要給大家介紹了關于利用Javascript防止圖片拉伸的自適應處理方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12