流程图控件GoJS教程：如何创建分级面板（二）

本教程介绍如何创建分级面板，在“刻度”面板Panel.Graduated，平定期刻度/文字标签沿主子图的行程形状。刻度面板可以视为显示一系列值的比例尺。

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

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

标签：