logo GoJS教程2020 我也要发布文档

流程图控件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正版授权,或了解更多产品信息请点击【咨询在线客服】