流程圖控件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正版授權，或了解更多產品信息請點擊