欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

GoJs中標題和縮略圖使用技巧

 更新時間：2023年05月05日 11:14:30   作者：沅芷湘蘭  
這篇文章主要為大家介紹了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標題縮略圖的資料請關注腳本之家其它相關文章！

相關文章

最新評論