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

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

點(diǎn)擊下載GoJS最新試用版

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

Position Panels

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

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

專家組的規(guī)模足以容納其所有要素。如果您希望它比它大一點(diǎn)，您可以設(shè)置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" })
    ));

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

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

請(qǐng)注意，當(dāng)您在位置面板中定位Shape時(shí)，將包含其筆劃的粗細(xì) Shape.strokeWidth。如果您希望定位多個(gè)形狀以使它們的幾何形狀彼此對(duì)齊，而不管它們的筆劃有多厚，請(qǐng)?jiān)诿總€(gè)形狀上將Shape.isGeometryPositioned設(shè)置為true。

垂直面板

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

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

以下垂直面板顯示了水平對(duì)齊的窄對(duì)象以及如何水平拉伸窄對(duì)象。整個(gè)Panel的寬度由最寬物體的寬度決定，在這種情況下，它是第一個(gè)元素。請(qǐng)注意最后一個(gè)元素如何不設(shè)置所需的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 })
    ));

約束寬度垂直面板

垂直面板通常具有其最寬元素的寬度，高度是其所有元素的總和。但是，您也可以將寬度和/或高度設(shè)置為大于或小于自然尺寸?；蛘撸绻幸粋€(gè)包含此面板的Panel，則可能會(huì)對(duì)此面板施加大小限制。如果寬度和/或高度大于自然尺寸，則面板較大，留下可用背景刷填充的空白空間。如果寬度和/或高度小于自然尺寸，則可以剪裁內(nèi)容元素。

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

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

這兩個(gè)垂直面板的寬度均為50，遠(yuǎn)小于自然。后者也有一個(gè)有限的高度。請(qǐng)注意文本是如何自動(dòng)換行以嘗試適合有限寬度的，因?yàn)門extBlock.wrap的默認(rèn)值是允許換行。

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

這是一個(gè)垂直面板，帶有GraphObject.Horizontal的默認(rèn)GraphObject.stretch。因?yàn)闆]有為整個(gè)面板指定寬度，所以寬度是最寬元素的寬度，在本例中是第二個(gè)寬度。請(qǐng)注意所有TextBlock具有相同的長寬度，如lightgreen背景所突出顯示的那樣。但是最后一個(gè)TextBlock的寬度有限，因此不會(huì)拉伸?？梢酝ㄟ^提供高度值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) })
    ));

如果更改該示例以在一個(gè)或多個(gè)元素上設(shè)置GraphObject.width或GraphObject.desiredSize .width（在本例中僅為最后一個(gè)），則面板將獲得等于設(shè)置寬度的最大值的寬度。寬度減小將導(dǎo)致其他拉伸元素以有限寬度（在這種情況下為50）進(jìn)行測(cè)量，這會(huì)導(dǎo)致這些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 })
    ));

水平面板

水平面板就像垂直面板，除了元素水平排列而不是垂直排列。元素永遠(yuǎn)不會(huì)水平拉伸，但它們可以垂直拉伸。因?yàn)樵奈此嚼斓睦熘礕raphObject.Fill相同GraphObject.Vertical。

請(qǐng)注意，兩個(gè)面板中的最后一個(gè)元素都沒有指定所需的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設(shè)置為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" })
    ));

默認(rèn)對(duì)齊和拉伸

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

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

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

垂直和水平面板是排列一列或一排對(duì)象的相對(duì)簡(jiǎn)單的方法。對(duì)于更多選項(xiàng)，您可能需要使用表格面板，即使使用相同的對(duì)象集也是如此。當(dāng)您想要更多地控制一個(gè)或多個(gè)元素的拉伸時(shí)，尤其如此。

 Spots

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

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

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

以下是矩形形狀上標(biāo)準(zhǔn)的九個(gè)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) })
    ));

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

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

更多教程內(nèi)容，請(qǐng)點(diǎn)擊查看“流程圖控件GoJS教程：設(shè)置面板屬性（二）”

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

更多精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼