流程圖控件GoJS教程：如何創(chuàng)建分級面板（二）

---

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

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

刻度線外觀

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

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

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

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

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

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

設(shè)置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 })
  ));

設(shè)置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 })
  ));

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

設(shè)置segmentOffset標(biāo)簽可以使它們在刻度線附近更具可讀性：

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

設(shè)置segmentOrientation標(biāo)簽可以改變標(biāo)簽相對于主筆畫的繪制角度：

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

請注意，每個(gè)標(biāo)簽的頂部中心點(diǎn)正好位于該值沿路徑的點(diǎn)處。
結(jié)合這兩個(gè)屬性并重新對齊刻度線：

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

這些屬性的行為類似于“鏈接”標(biāo)簽，因?yàn)樗鼈冺憫?yīng)主筆劃的方向。例如，讓我們旋轉(zhuǎn)主要形狀，使其從左上角到右下角傾斜向下。

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

現(xiàn)在讓我們嘗試一條曲線：

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

這是另一個(gè)常見的配置：

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

對于垂直線，無需旋轉(zhuǎn)文本：

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變?yōu)?，-400，因?yàn)樨?fù)Y值在屏幕/頁面上更高。請注意，由于所有內(nèi)容都是相對于路徑的，因此刻度線和標(biāo)簽將在相反的一側(cè)，因此我們還更改了alignmentFocus和segmentOffset以具有與上一個(gè)示例相反的值。

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

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

如果選擇“無”，則標(biāo)簽始終為45度。使用“沿”時(shí)，標(biāo)簽始終比坡度高45度。使用“立式”時(shí)，標(biāo)簽始終比坡度高45度，然后在必要時(shí)旋轉(zhuǎn)立式。

未完待續(xù)......

---

想要購買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊【咨詢在線客服】