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

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

點擊下載GoJS最新試用版

坐標系統

一圖使用兩個主要的坐標系繪制時部分：文檔和查看坐標。此外，每個小組一個內部分具有它的元素使用其自己的坐標系。

GoJS中的所有坐標系都具有Point，其中X的值向右遞增，而Y的值向下遞減。

文件和檢視座標

零件的Part.location和GraphObject.actualBounds和GraphObject.position在文檔坐標中。因此，可以保存在模型的節點數據中的Point通常位于文檔坐標中：

diagram.model.nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
  ];

但是，在文檔坐標中Part.location為（0，0）的Part 并不總是繪制在用戶在頁面中看到的HTML Div元素的左上角。當用戶滾動圖時，將需要在畫布上的其他位置繪制該零件。并且，如果用戶放大以使零件看起來更大，則零件將在畫布中的不同點繪制。但是，隨著用戶滾動或縮放圖表，Part.location不會更改值。

畫布中的點位于視圖坐標中：距左上角的距離（與設備無關的像素）。文檔坐標和視圖坐標之間的差異主要由兩個Diagram屬性控制： Diagram.position和Diagram.scale。滾動和平移更改Diagram.position。放大或縮小將更改Diagram.scale。您還可以通過調用Diagram.transformDocToView和Diagram.transformViewToDoc在坐標系之間進行轉換。但是，視圖坐標中很少有屬性和方法參數或返回值-幾乎所有內容都在文檔坐標或面板坐標中。

該視口是在畫布上可見的文檔的區域。該區域可作為Diagram.viewportBounds使用。請注意，視口邊界在文檔坐標中，而不在視圖坐標中！視口的左上角在視圖坐標中為（0,0），但在文檔坐標中為Diagram.position。視口的右下角在視圖坐標中位于畫布的（寬度，高度）處。文檔坐標中視口的右下角取決于Diagram.scale。

作為在整個文檔的上下文中顯示視口的示例，“ 概述 ”正是這樣做的。看一下組織結構圖樣本中的概述。概述顯示了主圖的整個文檔。洋紅色框顯示了整個文檔中主圖的視口。滾動或平移主圖時，視口將移動。縮小時，視口會變大。

為了更好地理解文檔坐標和視口坐標之間的區別，請查看以下圖表：

坐標系示例

本示例顯示了文檔坐標中三個不同位置的三個零件。將鼠標移到每個零件上，以查看這些位置在視圖坐標中的位置。最初，您將看到文檔和視圖坐標之間的唯一區別是恒定偏移量。該偏移量是由于Diagram.padding導致的，它在畫布的邊緣和圖對象所在的邊緣之間留了一些空間。這也是由于Part.locationSpot的位置位于“ +”形狀的中心，而不是整個Part的左上角。

// read-only to avoid accidentally moving any Part in document coordinates
  diagram.isReadOnly = true;
 
  diagram.nodeTemplate =
    $(go.Part,  // no links or grouping, so use the simpler Part class instead of Node
      {
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        layerName: "Background",
        mouseOver: function (e, obj) { showPoint(obj.part.location); },
        click: function (e, obj) { showPoint(obj.part.location); }
      },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "PlusLine",
        { name: "SHAPE", width: 8, height: 8 }),
      $(go.TextBlock,
        { position: new go.Point(6, 6), font: "8pt sans-serif" },
        new go.Binding("text", "loc"))
    );
 
  diagram.model.nodeDataArray = [
    { loc: "0 0" },
    { loc: "100 0" },
    { loc: "100 50" }
  ];
 
  function showPoint(loc) {
    var docloc = diagram.transformDocToView(loc);
    var elt = document.getElementById("Message1");
    elt.textContent = "Selected node location,\ndocument coordinates: " + loc.x.toFixed(2) + " " + loc.y.toFixed(2) +
                      "\nview coordinates: " + docloc.x.toFixed(2) + " " + docloc.y.toFixed(2);
  }
 
  myDiagram = diagram;  // make accessible to the HTML buttons

然后嘗試滾動或放大，然后在視圖坐標中查看那些零件的位置。放大將Diagram.scale放大一小部分。即使文檔坐標中的位置沒有更改，這也會更改視圖坐標中的位置。

要“移動”節點，必須在文檔坐標中更改其GraphObject.position或Part.location。要“滾動”圖，必須更改Diagram.position。無論哪種方式，都會導致節點出現在視口的不同點。

文件范圍

圖的所有Part都在文檔坐標中具有位置和大小（即GraphObject.actualBounds）。所有這些部件actualBounds的聯盟構成了Diagram.documentBounds。如果所有部分都靠近在一起，則文檔邊界可能很小。如果某些或所有部分彼此相距較遠，則文檔邊界可能會很大，即使只有兩個部分或只有一個真正很大的部分也是如此。該Diagram.documentBounds值是獨立的Diagram.viewportBounds。前者僅取決于零件的界限；前者僅取決于零件的界限。后者僅取決于畫布的大小以及圖的位置和比例。

Diagram.computeBounds，它負責的范圍計算，還增加了Diagram.padding保證金使得沒有零件時滾動到一側直接出現靠在圖的邊緣。您可能希望保留某些部分，尤其是背景裝飾，使其不包含在文檔邊界計算中。只需將Part.isInDocumentBounds設置為false即可。

更改任何零件或添加或刪除零件后， 該圖不會立即為Diagram.documentBounds計算新值。因此，直到事務完成之后，Diagram.documentBounds屬性值才可能是最新的。

Diagram.documentBounds和Diagram.viewportBounds 的相對大小控制是否需要滾動條。您可以將Diagram.hasHorizontalScrollbar和/或Diagram.hasVerticalScrollbar設置為false，以確保即使在需要時也不會出現滾動條。

如果您不希望Diagram.documentBounds始終反映所有節點和鏈接的大小和位置，則可以設置Diagram.fixedBounds屬性。但是，如果有任何節點位于fixedBounds之外，則用戶可能無法滾動圖表以查看它們。

如果希望在文檔邊界發生更改時得到通知，則可以注冊“ DocumentBoundsChanged” DiagramEvent偵聽器。

視口范圍

該Diagram.viewportBounds總是有X和Y值由給定Diagram.position。它始終具有從畫布大小和Diagram.scale計算得出的width和height值。

用戶可以使用鍵盤命令，滾動條或平移來滾動文檔內容。您可以通過編程方式使用以下幾種方式進行滾動：

• 設置Diagram.position

• 調用Diagram.scrollToRect或Diagram.centerRect或Diagram.scroll

• 調用Diagram.alignDocument

• 設置Diagram.contentAlignment

• 調用CommandHandler.scrollToPart

此外，隨著節點或鏈接被添加到圖中或從圖中刪除或更改圖中的可見性，滾動可能會自動發生。同樣，縮放通常也會導致滾動。

滾動時，Diagram.position通常將限制在Diagram.documentBounds指定的范圍內。短或“行”滾動距離由Diagram.scrollHorizontalLineChange和Diagram.scrollVerticalLineChange控制。長或“頁面”滾動距離由視口的大小控制。如果要控制Diagram.position可能具有的精確值，則可以指定Diagram.positionComputation函數。請參見下面的示例。

用戶可以使用鍵盤命令，鼠標滾輪或捏合來放大或縮小。您可以通過編程方式使用幾種方法進行縮放：

• 設置Diagram.scale

• 調用Diagram.zoomToFit或Diagram.zoomToRect

• 設置Diagram.autoScale

• 調用CommandHandler.decreaseZoom，CommandHandler.increaseZoom，CommandHandler.resetZoom或 CommandHandler.zoomToFit

放大或縮小時，Diagram.scale通常將限制在Diagram.minScale和Diagram.maxScale給出的范圍內。如果要控制Diagram.scale可能具有的精確值，則可以指定Diagram.scaleComputation函數。請參見下面的示例。

如果希望在視口邊界發生變化時得到通知，則可以注冊“ ViewportBoundsChanged” DiagramEvent偵聽器。

滾動邊距

當文檔邊界（加上邊距）大于視口邊界時，Diagram.scrollMargin允許用戶滾動到視口邊緣的空白區域。當用戶在圖的邊緣需要額外的空間時（例如，有一個區域可以使用ClickCreatingTool創建新節點），這將非常有用。

Diagram.padding就像文檔邊界的一部分一樣被添加，但是scrollMargin確保您可以滾動到文檔邊界之外的空白區域。因此，scrollMargin如果不需要滾動邊緣距離，例如在視口中文檔邊界很小時，則不會創建額外的可滾動空白空間。

以下是scrollMargin設置為的圖表100。拖動到邊界時，您會發現由邊距創建的額外空間。

滾動模式

Diagram.scrollMode允許用戶使用Diagram.DocumentScroll（默認值）滾動到文檔綁定的邊界，或者使用Diagram.InfiniteScroll無限滾動。

Diagram.positionComputation和Diagram.scaleComputation允許您確定可以滾動到哪些位置和比例。例如，您可以只允許整數位置值，或者僅允許縮放到0.5、1或2的值。

在滾動模式樣品顯示下面的例子中，其用于切換這三個屬性的所有代碼。

啟用無限滾動，設置Diagram.scrollMode

 myDiagram.scrollMode = checked ? go.Diagram.InfiniteScroll : go.Diagram.DocumentScroll;

啟用Diagram.positionComputation函數

 function positionfunc(diagram, pos) {
    var size = diagram.grid.gridCellSize;
    return new go.Point(
      Math.round(pos.x / size.width) * size.width,
      Math.round(pos.y / size.height) * size.height);
  }

啟用Diagram.scaleComputation函數

 function scalefunc(diagram, scale) {
    var oldscale = diagram.scale;
    if (scale > oldscale) {
      return oldscale + 0.25;
    } else if (scale < oldscale) {
      return oldscale - 0.25;
    }
    return oldscale;
  }

面板坐標

GraphObject這不是一個零件，但是一個的元件面板具有在面板坐標測量，而不是在文件坐標。這意味著GraphObject.position，GraphObject.actualBounds，GraphObject.maxSize， GraphObject.minSize，GraphObject.measuredBounds，GraphObject.margin和 RowColumnDefinition屬性適用于使用同一坐標系的面板的所有元素。

某些GraphObject屬性使用具有值的單位，然后對其進行轉換以供包含Panel的坐標系使用。特別是，在按GraphObject的值縮放和旋轉對象之前，GraphObject.desiredSize（即GraphObject.width和GraphObject.height）， GraphObject.naturalBounds，Shape.geometry和Shape.strokeWidth位于“局部”坐標中。 scale和GraphObject.angle。

GraphObject.actualBounds將告訴您元素在面板中的位置和大小。如果要獲取某個節點內某個對象的文檔位置，請調用GraphObject.getDocumentPoint。

嵌套面板坐標

面板中每個元素的轉換與該面板的轉換混合在一起。

作為“底部” 的TextBlock具有默認的GraphObject.angle為零，以便將文本豎直繪制。但是該TextBlock是綠色“ Spot” 面板中的一個元素，其GraphObject.angle為30，因此它及其文本應顯示為有些傾斜。但是，藍色“垂直”面板本身的GraphObject.angle為165。由于每個面板都有自己的坐標系，并且由于嵌套元素的變換是復合的，因此綠色面板的有效角度為195度，即這些單獨角度的總和（30 + 165），幾乎是顛倒的。

該GraphObject.scale屬性也會影響到一個物體是如何它的容器面板中的大小。棕色的“位置” 面板相對于其容器的比例為0.8。但是，由于“垂直”面板的縮放比例為1.5，因此其有效比例總體為1.2，即這些單獨比例的乘積（0.8 x 1.5）。

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

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

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