流程圖控件GoJS教程：坐標(biāo)系統(tǒng)

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

GoJS現(xiàn)已更新至最新版本2.0.17發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

坐標(biāo)系統(tǒng)

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

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

文件和檢視座標(biāo)

零件的Part.location和GraphObject.actualBounds和GraphObject.position在文檔坐標(biāo)中。因此，可以保存在模型的節(jié)點數(shù)據(jù)中的Point通常位于文檔坐標(biāo)中：

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

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

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

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

作為在整個文檔的上下文中顯示視口的示例，“ 概述 ”正是這樣做的?？匆幌陆M織結(jié)構(gòu)圖樣本中的概述。概述顯示了主圖的整個文檔。洋紅色框顯示了整個文檔中主圖的視口。滾動或平移主圖時，視口將移動?？s小時，視口會變大。

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

坐標(biāo)系示例

本示例顯示了文檔坐標(biāo)中三個不同位置的三個零件。將鼠標(biāo)移到每個零件上，以查看這些位置在視圖坐標(biāo)中的位置。最初，您將看到文檔和視圖坐標(biāo)之間的唯一區(qū)別是恒定偏移量。該偏移量是由于Diagram.padding導(dǎo)致的，它在畫布的邊緣和圖對象所在的邊緣之間留了一些空間。這也是由于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

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

要“移動”節(jié)點，必須在文檔坐標(biāo)中更改其GraphObject.position或Part.location。要“滾動”圖，必須更改Diagram.position。無論哪種方式，都會導(dǎo)致節(jié)點出現(xiàn)在視口的不同點。

文件范圍

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

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

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

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

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

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

視口范圍

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

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

• 設(shè)置Diagram.position

• 調(diào)用Diagram.scrollToRect或Diagram.centerRect或Diagram.scroll

• 調(diào)用Diagram.alignDocument

• 設(shè)置Diagram.contentAlignment

• 調(diào)用CommandHandler.scrollToPart

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

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

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

• 設(shè)置Diagram.scale

• 調(diào)用Diagram.zoomToFit或Diagram.zoomToRect

• 設(shè)置Diagram.autoScale

• 調(diào)用CommandHandler.decreaseZoom，CommandHandler.increaseZoom，CommandHandler.resetZoom或 CommandHandler.zoomToFit

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

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

滾動邊距

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

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

以下是scrollMargin設(shè)置為的圖表100。拖動到邊界時，您會發(fā)現(xiàn)由邊距創(chuàng)建的額外空間。

滾動模式

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

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

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

啟用無限滾動，設(shè)置Diagram.scrollMode

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

啟用Diagram.positionComputation函數(shù)

 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函數(shù)

 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;
  }

面板坐標(biāo)

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

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

GraphObject.actualBounds將告訴您元素在面板中的位置和大小。如果要獲取某個節(jié)點內(nèi)某個對象的文檔位置，請調(diào)用GraphObject.getDocumentPoint。

嵌套面板坐標(biāo)

面板中每個元素的轉(zhuǎn)換與該面板的轉(zhuǎn)換混合在一起。

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

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

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼