流程圖控件GoJS教程：如何創建分級面板（二）

---

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

點擊下載GoJS最新版

刻度線外觀

刻度線相對于主要形狀路徑的出現由一些屬性控制：

• Shape.graduatedStart / TextBlock.graduatedStart- 沿主筆劃的小數距離，在該筆劃或標簽處開始繪制
• Shape.graduatedEnd / TextBlock.graduatedEnd- 沿主筆觸的小數距離，超出該距離將不會繪制此刻度或標簽
• GraphObject.alignmentFocus- 刻度線或標簽上與計算的路徑點對齊的點，默認為頂部中心
• GraphObject.segmentOffset- 從主筆畫偏移TextBlock標簽的程度-Y值指定距路徑的距離
• GraphObject.segmentOrientation- 如何相對于主筆畫旋轉TextBlock標簽

僅TextBlock標簽應設置GraphObject.segmentOffset或GraphObject.segmentOrientation。它們對主要形狀或刻度形狀沒有影響。這些GraphObject屬性也通常用于放置“鏈接”標簽，如“鏈接”標簽上“ 簡介”頁面所示，并且由“分級面板”以類似方式使用。

設置graduatedStart和/或graduatedEnd僅允許沿主筆劃的一部分繪制刻度線：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", graduatedStart: .25, graduatedEnd: .75 })
  ));

在這種情況下，現在僅在主體形狀的中部繪制刻度線。

設置alignmentFocus為go.Spot.Bottom將會使刻度線的底部與主筆劃對齊：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom })
  ));

設置alignmentFocus為go.Spot.Center將會使刻度線在路徑中居中：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10 M0 20 V30", alignmentFocus: go.Spot.Center })
  ));

注意形狀的幾何形狀中的間隙。

設置segmentOffset標簽可以使它們在刻度線附近更具可讀性：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    // offset to display below ticks
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
  ));

設置segmentOrientation標簽可以改變標簽相對于主筆畫的繪制角度：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    // change the angle of the text
    $(go.TextBlock, { segmentOrientation: go.Link.OrientMinus90 })
  ));

請注意，每個標簽的頂部中心點正好位于該值沿路徑的點處。
結合這兩個屬性并重新對齊刻度線：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

這些屬性的行為類似于“鏈接”標簽，因為它們響應主筆劃的方向。例如，讓我們旋轉主要形狀，使其從左上角到右下角傾斜向下。

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 L285 285" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

現在讓我們嘗試一條曲線：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, "Curve1", { desiredSize: new go.Size(285, 285) }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

這是另一個常見的配置：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 A120 120 0 0 1 200 0" }),  // an arc
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      {
        segmentOffset: new go.Point(0, 12),
        segmentOrientation: go.Link.OrientAlong
      }
    )
  ));

對于垂直線，無需旋轉文本：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 A120 120 0 0 1 200 0" }),  // an arc
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      {
        segmentOffset: new go.Point(0, 12),
        segmentOrientation: go.Link.OrientAlong
      }
    )
  ));

我們也可以從下到上：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 V-400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Top }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, 12)
      }
    )
  ));

請注意幾何圖形如何從0變為0，-400，因為負Y值在屏幕/頁面上更高。請注意，由于所有內容都是相對于路徑的，因此刻度線和標簽將在相反的一側，因此我們還更改了alignmentFocus和segmentOffset以具有與上一個示例相反的值。

最后，如果方向是Link.OrientNone， Link.OrientAlong或Link.OrientUpright之一，則將考慮標簽上指定的任何角度。對于“沿”和“垂直”，將在TextBlock的點將角度添加到主路徑的坡度。

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "None")
    ));

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOrientation: go.Link.OrientAlong,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "Along")
    ));

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOrientation: go.Link.OrientUpright,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "Upright")
    ));

如果選擇“無”，則標簽始終為45度。使用“沿”時，標簽始終比坡度高45度。使用“立式”時，標簽始終比坡度高45度，然后在必要時旋轉立式。

未完待續......

---

想要購買GoJS正版授權，或了解更多產品信息請點擊