流程圖控件GoJS教程：初始視圖

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現已更新至最新版本2.0.17發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

初始，自動和程序化視圖管理

創建并分配模型以使某些零件出現在圖表中后，您可以控制零件最初在視口中出現的位置，還可以控制在修改圖表后它們在何處顯示。

初始視圖

您甚至可以在分配模型之前隨時輕松地設置Diagram.initialPosition和/或Diagram.initialScale屬性。 一旦創建了所有零件并執行了任何初始布局，這將導致Diagram.position和/或Diagram.scale屬性被設置為指定的初始值。

但是，如果您不知道圖表文檔有多大怎么辦？如果要顯示文檔的特定區域，您將不知道要設置的位置。如果要以最大的比例顯示一個大型文檔，以顯示所有文檔，則將不知道要設置的比例。

解決此問題的一種方法是將Diagram.initialDocumentSpot和Diagram.initialViewportSpot屬性設置為特定的Spot值。例如，如果您正在顯示樹狀圖，并且希望樹水平居中，但垂直放置在頂部，則在創建圖時可以執行以下操作：

 $（go.Diagram，“ myDiagramDiv”，
    {
      initialDocumentSpot：go.Spot.TopCenter，
      initialViewportSpot：go.Spot.TopCenter
    }）

這樣可以確保在圖的初始布局之后，圖內容的中間最高點位于視口的中間最高點。

解決此問題的另一種方法是設置Diagram.initialContentAlignment或Diagram.initialAutoScale屬性。例如，它是相當普遍希望確保小文件出現頂部為中心的圖表窗口內-剛剛成立Diagram.initialContentAlignment到現貨，TopCenter。或者，如果您要“縮放以適合”圖表，只需將Diagram.initialAutoScale設置為Diagram，Uniform即可。

 $（go.Diagram，“ myDiagramDiv”，
    {
      initialAutoScale：go.Diagram.Uniform
    }）

一般而言，您可能想嘗試將特定Node居中。這是您可以執行的操作：

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc"),
      $(go.Shape, { fill: "lightyellow" }),
      $(go.TextBlock, { margin: 5 },
        // show the location as text in the node
        new go.Binding("text", "loc",
                       function (p) { return p.x.toFixed() + ", " + p.y.toFixed(); }))
    );
 
  // initialize the model with random nodes:
  var nodeDataArray = [];
  for (var i = 0; i < 20; i++ ) {
    nodeDataArray.push({ loc: new go.Point(Math.random() * 600, Math.random() * 300) });
  }
  diagram.model.nodeDataArray = nodeDataArray;
 
  // this event handler is called when the diagram is first ready
  diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
    // pick a random node data
    var data = nodeDataArray[Math.floor(Math.random()*nodeDataArray.length)];
    // find the corresponding Node
    var node = diagram.findNodeForData(data);
    // and center it and select it
    diagram.centerRect(node.actualBounds);
    diagram.select(node);
  });

注意：由于默認情況下無法滾動到文檔的任何邊緣，因此如果所選節點恰好位于邊緣或邊緣附近，則該節點實際上無法在視口中居中。

自動視圖管理

有時，每次更改圖表后，您都希望控制視口（即Diagram.position和Diagram.scale）。例如，如果你總是希望保持文檔為中心的用戶已經移動或刪除或插入節點，集之后Diagram.contentAlignment（而不是Diagram.initialContentAlignment）到Spot.Center。

或者，如果您始終希望文檔保持“縮放到適合狀態”，請將Diagram.autoScale （而不是Diagram.initialAutoScale）設置為Diagram.Uniform。例如，概述圖可以做到這一點。

程序化視圖管理

如果您不想連續更改圖的位置或縮放比例，但是有時確實想要更改Diagram.position和/或Diagram.scale，則可以將這些屬性設置為所需的任何值。但是，請注意，Diagram.position的最終值通常受Diagram.documentBounds 以及視口的大小和圖的比例的限制。該Diagram.scale被限制Diagram.minScale和Diagram.maxScale。

但是，更常見的是在Diagram上調用方法來獲得所需的結果。例如，要得到的效果Diagram.initialDocumentSpot和Diagram.initialViewportSpot當“InitialLayoutCompleted” DiagramEvent發生時，調用使用性能 Diagram.alignDocument與你想有重合的兩個期望的斑點。

正如上面已經證明，如果你想嘗試在視口中居中特定節點，你可以調用Diagram.centerRect與節點的GraphObject.actualBounds。

如果要確保特定節點在視口內，但不一定居中，請調用Diagram.scrollToRect。

如果只想以與用戶通過滾動條或鼠標滾輪相同的方式滾動圖，請調用帶有指定滾動量和方向的參數的Diagram.scroll。

剛剛提到的Diagram方法不會更改Diagram.scale。如果要重新縮放圖以顯示整個文檔范圍，請調用Diagram.zoomToFit。更一般而言，如果希望以適合其視口的任意比例顯示圖的特定區域，請調用Diagram.zoomToRect。

=====================================================

想要購買GoJS正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼