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

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

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

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

标签：