前言

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

標(biāo)題的使用

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

//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"))
  );

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

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

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

由上面圖形可以看出，在圖像的滾動(dòng)以及整體的放大縮小的過程中。圖形的標(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)題無法單獨(dú)移動(dòng)，刪除。

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

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

this.myDiagram.add(
    $$(
      go.Part,
      { _viewPosition: new go.Point(900, 120), layerName: "Grid" },
      $$(go.TextBlock, "三國爭(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)和放大縮小的過程中。圖形的標(biāo)題位置和大小都不會(huì)發(fā)生改變。這樣就可以始終在一個(gè)位置進(jìn)行顯示。其位置的展示類似于css的絕對(duì)定位。但是在圖形滑動(dòng)和放大縮小的過程中，可以看到標(biāo)題雖然位置和大小沒有發(fā)生變化。但是好像在過程中會(huì)發(fā)生閃爍。這是因?yàn)楫嫴嫉牡讓訛镠5新增標(biāo)簽canvas，在canvas中是通過獲取2d渲染上下文。在中間的內(nèi)部元素發(fā)生變化的時(shí)候，不是部分元素的替換。其內(nèi)部元素變化的過程是每次都會(huì)把畫布中的所有元素擦掉，重繪。一直循環(huán)這個(gè)過程來實(shí)現(xiàn)畫布中顯示元素的變化。

縮略圖的使用

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

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

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

總結(jié)

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

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

最新評(píng)論