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

流程图控件GoJS教程:如何创建分级面板(三)


GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

功能外观属性

还有一些功能属性,可以进一步自定义刻度线和标签的外观。

  • Shape.graduatedSkip / TextBlock.graduatedSkip- 一个可选函数,对于绘制特定刻度或标签时应跳过的值返回true
  • TextBlock.graduatedFunction- 一个可选函数,该函数将值转换为要以该值显示的字符串-如果未定义,则默认值将四舍五入到最多两位小数
设置graduatedSkip允许在提供的函数返回true时跳过刻度线:
  diagram.add(
    $(go.Part, "Graduated",
      $(go.Shape, { geometryString: "M0 0 H400" }),
      $(go.Shape,
        { // skip drawing tick at 30
          graduatedSkip: function (v) { return v === 30; },
          geometryString: "M0 0 V10"
        }
      ),
      $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
    ));
设置graduatedFunction允许更改标签的显示方式:
  diagram.add(
    $(go.Part, "Graduated",
      $(go.Shape, { geometryString: "M0 0 H400" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        { // always display two decimals
          graduatedFunction: function(val) { return val.toFixed(2); },
          segmentOffset: new go.Point(0, 12)
        }
      )
	
));


渐进式价值计算

有一些方法可用于计算渐变路径上的点:

  • Panel.graduatedPointForValue- 以Panel坐标中的gradedMin和gradedMax之间的某个值返回沿着主形状的Point
  • Panel.graduatedValueForPoint- 返回最接近给定Point的主形状上的值
在下面的示例中,红色标记使用Part.dragComputation函数,该函数使用上述函数将其沿渐变面板的路径保留。
var gauge =
  $(go.Part, "Auto",
    { location: new go.Point(10, 20) },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Graduated",
      { name: "SCALE", margin: 10 },
      $(go.Shape, { name: "PATH", geometryString: "M0 0 A120 120 0 0 1 200 0" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        { segmentOffset: new go.Point(0, 12), segmentOrientation: go.Link.OrientAlong })
    )
  );
diagram.add(gauge);

var marker =
  $(go.Part, "Spot",
    { locationSpot: go.Spot.Center, selectionAdorned: false },
    $(go.Shape, "Circle", { fill: "transparent", strokeWidth: 0, cursor: "pointer" }),
    $(go.Shape, "Circle", { fill: "red", strokeWidth: 0, width: 8, height: 8 }),
    {
      dragComputation: function(node, pt) {
        var scale = gauge.findObject("SCALE");
        var loc = scale.getLocalPoint(pt);
        var val = scale.graduatedValueForPoint(loc);
        var gpt = scale.graduatedPointForValue(val);
        return scale.getDocumentPoint(gpt);
      }
    }
  );
diagram.add(marker);

// once everything has been positioned, give the marker its location
diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
  var scale = gauge.findObject("SCALE");
  var gpt = scale.graduatedPointForValue(0);
  marker.location = scale.getDocumentPoint(gpt);
});


拖动红色圆圈时,您会注意到它始终停留在主要形状的笔触上。计算将点转换为面板的坐标系,计算最接近的分度值,为该值计算形状几何上的点,最后将其转换回文档坐标以用作标记的位置。

请注意,出于演示目的,此示例将标记与“量规”零件分开。真正的量规会将标记作为特定值的指示符作为量规的一部分,可以由用户任意拖动。请参见“ 仪器控件:仪表和仪表”中的一些示例。其他注意事项

默认情况下,只能使用“渐变面板”的主要形状来拾取面板。与网格面板一样,background如果需要对整个面板进行拾取,则渐变面板应为非空。您不能设置或绑定带刻度面板的Panel.itemArray。可以像其他任何GraphObject属性一样,在tick Shape和TextBlock标签上设置和绑定属性。

diagram.add(
  $(go.Part, "Graduated",  // or "Graduated"
    { background: "white" },
    $(go.Shape, { geometryString: "M0 0 H150", stroke: "blue", strokeWidth: 2 }),
    $(go.Shape, { geometryString: "M0 0 V20", stroke: "blue", strokeDashArray: [2, 2] })
  ));


勾号Shapes和TextBlock标签上的事件将被忽略。旋转主要形状不会旋转刻度线,就像旋转Spot Panel的主要元素不会旋转其子元素一样。轮换通常应在专家组一级进行。与Spot Panel的另一个相似之处在于,通常应在主要形状上调整渐变面板的大小。TextBlock标签无法编辑。


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】