前言

在可視化圖形中為了方便區(qū)分，需要給圖形一個(gè)標(biāo)題?？梢栽诋?huà)布外面用html調(diào)整位置之后作為圖形的標(biāo)題，當(dāng)然也可以在畫(huà)布內(nèi)部進(jìn)行一個(gè)標(biāo)題的繪制。在畫(huà)布上的節(jié)點(diǎn)數(shù)據(jù)量比較大的時(shí)候，也需要用到縮略圖對(duì)圖形進(jìn)行一個(gè)縮略顯示并且拖動(dòng)縮略圖的框選來(lái)重點(diǎn)的畫(huà)布中的部分?jǐn)?shù)據(jù)。

標(biāo)題的使用

還是以前面的數(shù)據(jù)為例，在原有數(shù)據(jù)的基礎(chǔ)上給圖形增加一個(gè)標(biāo)題代碼示例如下

//data
nodes: [
    { key: "1", color: "#99FFFF", text: "三國(guó)", 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"))
  );

隨圖形變化的標(biāo)題

增加一個(gè)隨圖形變化的標(biāo)題，可以通過(guò)location給標(biāo)題一個(gè)廚師的定位

this.myDiagram.add(
    $$(go.Part, { location: new go.Point(0, -80) },
    $$(go.TextBlock, "三國(guó)爭(zhēng)霸", { font: "bold 24pt sans-serif", stroke: "#67B73C" }))
);

由上面圖形可以看出，在圖像的滾動(dòng)以及整體的放大縮小的過(guò)程中。圖形的標(biāo)題都會(huì)隨著圖形的本身進(jìn)行同樣的放大和縮小。相當(dāng)于把標(biāo)題當(dāng)做了一個(gè)游離的文本節(jié)點(diǎn)。當(dāng)然你也可以設(shè)置go.Part的屬性selectable:false。這樣你在拖動(dòng)標(biāo)題的時(shí)候，整個(gè)圖形都會(huì)隨著拖動(dòng)。因此標(biāo)題無(wú)法單獨(dú)移動(dòng)，刪除。

不隨圖形變化的標(biāo)題

實(shí)現(xiàn)不隨圖形變化的標(biāo)題，最簡(jiǎn)單的方法是用修改html的樣式和位置來(lái)實(shí)現(xiàn)圖形的標(biāo)題。此處我們要說(shuō)到的是通過(guò)gojs來(lái)實(shí)現(xiàn)一個(gè)不隨圖形變化的標(biāo)題。

this.myDiagram.add(
    $$(
      go.Part,
      { _viewPosition: new go.Point(900, 120), layerName: "Grid" },
      $$(go.TextBlock, "三國(guó)爭(zhēng)霸", {
        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;
        }
      });
    });
});

由上面圖形可以看出，在圖像滾動(dòng)和放大縮小的過(guò)程中。圖形的標(biāo)題位置和大小都不會(huì)發(fā)生改變。這樣就可以始終在一個(gè)位置進(jìn)行顯示。其位置的展示類(lèi)似于css的絕對(duì)定位。但是在圖形滑動(dòng)和放大縮小的過(guò)程中，可以看到標(biāo)題雖然位置和大小沒(méi)有發(fā)生變化。但是好像在過(guò)程中會(huì)發(fā)生閃爍。這是因?yàn)楫?huà)布的底層為H5新增標(biāo)簽canvas，在canvas中是通過(guò)獲取2d渲染上下文。在中間的內(nèi)部元素發(fā)生變化的時(shí)候，不是部分元素的替換。其內(nèi)部元素變化的過(guò)程是每次都會(huì)把畫(huà)布中的所有元素擦掉，重繪。一直循環(huán)這個(gè)過(guò)程來(lái)實(shí)現(xiàn)畫(huà)布中顯示元素的變化。

縮略圖的使用

在畫(huà)布中的節(jié)點(diǎn)數(shù)量比較多的時(shí)候，我們又想著重的觀看到某些重點(diǎn)的內(nèi)容顯示。這個(gè)時(shí)候我們就會(huì)對(duì)畫(huà)布的整體進(jìn)行放大，這樣我們的可視區(qū)域就只能顯示部分的畫(huà)布內(nèi)容。如果我們需要從左上角的可視圖形展示切換到右下角的可視圖形展示的過(guò)程中，如果用鼠標(biāo)點(diǎn)擊畫(huà)布逐步拖動(dòng)非常慢，效率很低。這個(gè)時(shí)候就需要使用到縮略圖，在縮略圖內(nèi)部展示選擇框就是我們可視區(qū)域的圖形。我們可以拖動(dòng)框選的矩形就可以看到畫(huà)布的人和位置了。非常的方便。縮略圖的使用方法如下

//html
<div id="myOverviewDiv"></div>
//methods
let myOverview =
    $$(go.Overview, "myOverviewDiv",
    { observed: this.myDiagram }
)

縮略圖是使用go.Overview來(lái)實(shí)現(xiàn)的,因?yàn)槠淅^承go.Diagram。所以使用方法基本一致。都是需要一個(gè)div容器進(jìn)行初始化，然后其observed屬性為圖形的實(shí)例,在本例中是this.myDiagram。

總結(jié)

在一個(gè)畫(huà)布中，標(biāo)題和縮略圖的使用非常的普遍。一個(gè)能表述中可視化圖形的功能。另外一個(gè)則是方便我們重點(diǎn)觀察畫(huà)布的某些元素。增加對(duì)可視化圖形信息提取的效率。

以上就是GoJs中標(biāo)題和縮略圖使用技巧的詳細(xì)內(nèi)容，更多關(guān)于GoJs標(biāo)題縮略圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！