流程图控件GoJS教程：如何创建分级面板（三）-控件新闻-慧都网

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

翻译|使用教程|编辑：杨鹏连|2020-09-02 10:33:12.333|阅读 136 次

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

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

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