流程圖控件GoJS教程：設置面板屬性（一）

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

點擊下載GoJS最新試用版

Panel是GraphObject，它將其他GraphObject作為其元素。專家組負責確定其所有要素的大小和位置。每個小組都建立了自己的坐標系。按順序繪制面板的元素，從而建立這些元素的Z排序。

Position Panels

最簡單的Panel是“Position”（Panel.Position）。每個元素都獲得其正常大小，無論是其自然大小還是指定的GraphObject.desiredSize （或等效的GraphObject.width和GraphObject.height）。

每個元素的位置由GraphObject.position屬性給出。如果未指定位置，則元素位于（0,0）。所有位置都在Panel自己的坐標系中，而不是在文檔范圍的坐標系中。位置可能包括負坐標。

專家組的規模足以容納其所有要素。如果您希望它比它大一點，您可以設置Panel.padding屬性。

diagram.add(    // all Parts are Panels
    $(go.Part, go.Panel.Position,  // or "Position"
      { background: "lightgray" },
      $(go.TextBlock, "default, at (0,0)", { background: "lightgreen" }),
      $(go.TextBlock, "(100, 0)", { position: new go.Point(100, 0), background: "lightgreen" }),
      $(go.TextBlock, "(0, 100)", { position: new go.Point(0, 100), background: "lightgreen" }),
      $(go.TextBlock, "(55, 28)", { position: new go.Point(55, 28), background: "lightgreen" }),
      $(go.TextBlock, "(33, 70)", { position: new go.Point(33, 70), background: "lightgreen" }),
      $(go.TextBlock, "(100, 100)", { position: new go.Point(100, 100), background: "lightgreen" })
    ));

位置面板將始終在其自己的面板坐標系中包含（0,0）原點。因此，具有集合邊界不包括（0,0）的元素的位置面板總是擴展為包括原點。

diagram.add(
    $(go.Part, "Position",
      { background: "lightgray" },
      $(go.TextBlock, "(-50,50)", { position: new go.Point(-50, 50), background: "lightgreen" }),
      $(go.TextBlock, "(50, 50)", { position: new go.Point(50, 50), background: "lightgreen" }),
      $(go.TextBlock, "(0, 100)", { position: new go.Point(0, 100), background: "lightgreen" })
    ));

請注意，當您在位置面板中定位Shape時，將包含其筆劃的粗細 Shape.strokeWidth。如果您希望定位多個形狀以使它們的幾何形狀彼此對齊，而不管它們的筆劃有多厚，請在每個形狀上將Shape.isGeometryPositioned設置為true。

垂直面板

一種非常常見的Panel是“垂直”（Panel.Vertical）。在該面板中，所有面板元件從頂部到底部垂直布置。每個元素都獲得其正常高度和正常寬度，或者如果拉伸，則獲得面板的寬度。如果元素的GraphObject.stretch屬性具有任何垂直拉伸組件，則會將其忽略。

如果元素的寬度不與面板的寬度相同，則根據其GraphObject.alignment屬性水平對齊。

以下垂直面板顯示了水平對齊的窄對象以及如何水平拉伸窄對象。整個Panel的寬度由最寬物體的寬度決定，在這種情況下，它是第一個元素。請注意最后一個元素如何不設置所需的GraphObject.width屬性，以便GraphObject.stretch值有效。

diagram.add(
    $(go.Part, go.Panel.Vertical,  // or "Vertical"
      { background: "lightgray" },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

約束寬度垂直面板

垂直面板通常具有其最寬元素的寬度，高度是其所有元素的總和。但是，您也可以將寬度和/或高度設置為大于或小于自然尺寸。或者，如果有一個包含此面板的Panel，則可能會對此面板施加大小限制。如果寬度和/或高度大于自然尺寸，則面板較大，留下可用背景刷填充的空白空間。如果寬度和/或高度小于自然尺寸，則可以剪裁內容元素。

下面的垂直面板將寬度設置為140，比所需寬度寬得多。您可以看到最后一個元素的寬度是如何拉伸的。

 diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", width: 140 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

這兩個垂直面板的寬度均為50，遠小于自然。后者也有一個有限的高度。請注意文本是如何自動換行以嘗試適合有限寬度的，因為TextBlock.wrap的默認值是允許換行。

diagram.add(
    $(go.Part, "Vertical",
      { position: new go.Point(0, 0), background: "lightgray", width: 50 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));
  diagram.add(
    $(go.Part, "Vertical",
      { position: new go.Point(70, 0), background: "lightgray", width: 50, height: 65 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

這是一個垂直面板，帶有GraphObject.Horizontal的默認GraphObject.stretch。因為沒有為整個面板指定寬度，所以寬度是最寬元素的寬度，在本例中是第二個寬度。請注意所有TextBlock具有相同的長寬度，如lightgreen背景所突出顯示的那樣。但是最后一個TextBlock的寬度有限，因此不會拉伸。可以通過提供高度值NaN或高度來限制寬度而不是Infinity高度。

diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock, "short", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "a much longer string", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "medium length", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "short2", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "max 50", { margin: 2, background: "lightgreen", maxSize: new go.Size(50, NaN) })
    ));

如果更改該示例以在一個或多個元素上設置GraphObject.width或GraphObject.desiredSize .width（在本例中僅為最后一個），則面板將獲得等于設置寬度的最大值的寬度。寬度減小將導致其他拉伸元素以有限寬度（在這種情況下為50）進行測量，這會導致這些TextBlock包裹以適合可用寬度。

  diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock, "short", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "a much longer string", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "medium length", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "short2", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "= 50", { margin: 2, background: "lightgreen", width: 50 })
    ));

水平面板

水平面板就像垂直面板，除了元素水平排列而不是垂直排列。元素永遠不會水平拉伸，但它們可以垂直拉伸。因為元件從未水平拉伸的拉伸值GraphObject.Fill相同GraphObject.Vertical。

請注意，兩個面板中的最后一個元素都沒有指定所需的GraphObject.height，因此GraphObject.stretch值可能有效。

 diagram.add(
    $(go.Part, go.Panel.Horizontal,  // or "Horizontal"
      { position: new go.Point(0, 0), background: "lightgray" },
      $(go.Shape, { width: 30, fill: "lightgreen", height: 100 }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Top }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Center }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Bottom }),
      $(go.Shape, { width: 30, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));
  diagram.add(
    $(go.Part, "Horizontal",
      { position: new go.Point(200, 0), background: "lightgray", height: 120 },
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Top }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Center }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Bottom }),
      $(go.Shape, { width: 30, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));

以相反方向填充水平和垂直面板

垂直和水平面板的元素可以按相反方向排列：垂直面板從下到上，水平面板從右到左。只需將Panel.isOpposite設置為true即可。

diagram.add(
    $(go.Part, "Horizontal",
      { background: "lightgray", isOpposite: true },
      $(go.TextBlock, "0", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "1", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "2", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "3", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "4", { margin: 5, background: "lightgreen" })
    ));

  diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", isOpposite: true },
      $(go.TextBlock, "0", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "1", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "2", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "3", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "4", { margin: 5, background: "lightgreen" })
    ));

默認對齊和拉伸

垂直和水平面板都支持Panel.defaultAlignment和Panel.defaultStretch屬性。這是一種方便，因此您無需在每個元素上設置GraphObject.alignment或GraphObject.stretch屬性。

這是一個水平面板，其默認GraphObject.alignment為Spot.Bottom。所有Shape都在底部對齊，即使默認對齊通常是Spot.Center。但是，最后一個Shape的高度被拉伸到面板的整個高度，90。在這種情況下，GraphObject.margin在對象周圍提供了一些額外的空間。

diagram.add(
    $(go.Part, "Horizontal",
      { background: "lightgray", height: 90, defaultAlignment: go.Spot.Bottom },
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 60 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 30 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 40 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));

垂直和水平面板是排列一列或一排對象的相對簡單的方法。對于更多選項，您可能需要使用表格面板，即使使用相同的對象集也是如此。當您想要更多地控制一個或多個元素的拉伸時，尤其如此。

 Spots

在我們討論其他類型的Panel之前，我們應該詳細說明一下spot的概念。Spots是一種提供相對和絕對定位信息的方法。

您已經看到了Spots的許多最常見用法，用于指定面板中對象的對齊方式，作為Spot類的常量值：

但Spots比這更普遍。的Spot.x和Spot.y屬性可以是零和一，包括之間的任何數。這些值是從任意矩形的左上角沿X軸和Y軸的小數距離。因此，Spot.TopLeft與新的go.Spot（0,0）相同， Spot.BottomRight與新的go.Spot（1,1）相同，而Spot.Right與新的go.Spot相同（1， 0.5）。

以下是矩形形狀上標準的九個Spots。

 diagram.add(
    $(go.Part, go.Panel.Spot,  // or "Spot"
      $(go.Shape, "Rectangle",
        { fill: "lightgreen", stroke: null, width: 100, height: 50 }),
      $(go.TextBlock, "0,0",     { alignment: new go.Spot(0, 0) }),
      $(go.TextBlock, "0.5,0",   { alignment: new go.Spot(0.5, 0) }),
      $(go.TextBlock, "1,0",     { alignment: new go.Spot(1, 0) }),
      $(go.TextBlock, "0,0.5",   { alignment: new go.Spot(0, 0.5) }),
      $(go.TextBlock, "0.5,0.5", { alignment: new go.Spot(0.5, 0.5) }),
      $(go.TextBlock, "1,0.5",   { alignment: new go.Spot(1, 0.5) }),
      $(go.TextBlock, "0,1",     { alignment: new go.Spot(0, 1) }),
      $(go.TextBlock, "0.5,1",   { alignment: new go.Spot(0.5, 1) }),
      $(go.TextBlock, "1,1",     { alignment: new go.Spot(1, 1) })
    ));

除了相對于某個矩形區域的點的小數位置，您還可以指定絕對偏移。Spot.offsetX和Spot.offsetY屬性決定的點是從由下式給出的小數點的距離Spot.x和Spot.y。這里我們在左下角附近顯示三個TextBlocks，在右下角附近顯示三個TextBlocks。左邊的那些沿著X軸偏移或減去40個單位; 右邊的那些沿著Y軸偏移或減去20個單位。TextBlocks還有一個半透明的紅色背景，以幫助區分它們的邊界。

var pink = "rgba(255,0,0,.2)";
  diagram.add(
    $(go.Part, "Spot",
      $(go.Shape, "Rectangle",
        { fill: "lightgreen", stroke: null, width: 200, height: 50 }),      // Near bottom-left corner:
      $(go.TextBlock, "(-40,0)",  { background: pink, alignment: new go.Spot(0, 1, -40, 0) }),
      $(go.TextBlock, "(0,0)",    { background: pink, alignment: new go.Spot(0, 1, 0, 0) }),
      $(go.TextBlock, "(40,0)",   { background: pink, alignment: new go.Spot(0, 1, 40, 0) }),      // Near bottom-right corner:
      $(go.TextBlock, "(0,-20)",  { background: pink, alignment: new go.Spot(1, 1, 0, -20) }),
      $(go.TextBlock, "(0,0)",    { background: pink, alignment: new go.Spot(1, 1, 0, 0) }),
      $(go.TextBlock, "(0,20)",   { background: pink, alignment: new go.Spot(1, 1, 0, 20) })
    ));

更多教程內容，請點擊查看“流程圖控件GoJS教程：設置面板屬性（二）”

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

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