流程圖控件GoJS教程：如何創(chuàng)建分級面板（三）

---

GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

功能外觀屬性

還有一些功能屬性，可以進(jìn)一步自定義刻度線和標(biāo)簽的外觀。

• Shape.graduatedSkip / TextBlock.graduatedSkip- 一個可選函數(shù)，對于繪制特定刻度或標(biāo)簽時應(yīng)跳過的值返回true
• TextBlock.graduatedFunction- 一個可選函數(shù)，該函數(shù)將值轉(zhuǎn)換為要以該值顯示的字符串-如果未定義，則默認(rèn)值將四舍五入到最多兩位小數(shù)

設(shè)置graduatedSkip允許在提供的函數(shù)返回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) })
    ));

設(shè)置graduatedFunction允許更改標(biāo)簽的顯示方式：

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

		 ));
	

漸進(jìn)式價值計算

有一些方法可用于計算漸變路徑上的點(diǎn)：

• Panel.graduatedPointForValue- 以Panel坐標(biāo)中的gradedMin和gradedMax之間的某個值返回沿著主形狀的Point
• Panel.graduatedValueForPoint- 返回最接近給定Point的主形狀上的值

在下面的示例中，紅色標(biāo)記使用Part.dragComputation函數(shù)，該函數(shù)使用上述函數(shù)將其沿漸變面板的路徑保留。

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

拖動紅色圓圈時，您會注意到它始終停留在主要形狀的筆觸上。計算將點(diǎn)轉(zhuǎn)換為面板的坐標(biāo)系，計算最接近的分度值，為該值計算形狀幾何上的點(diǎn)，最后將其轉(zhuǎn)換回文檔坐標(biāo)以用作標(biāo)記的位置。

請注意，出于演示目的，此示例將標(biāo)記與“量規(guī)”零件分開。真正的量規(guī)會將標(biāo)記作為特定值的指示符作為量規(guī)的一部分，可以由用戶任意拖動。請參見“ 儀器控件：儀表和儀表”中的一些示例。其他注意事項(xiàng)

默認(rèn)情況下，只能使用“漸變面板”的主要形狀來拾取面板。與網(wǎng)格面板一樣，background如果需要對整個面板進(jìn)行拾取，則漸變面板應(yīng)為非空。您不能設(shè)置或綁定帶刻度面板的Panel.itemArray?？梢韵衿渌魏蜧raphObject屬性一樣，在tick Shape和TextBlock標(biāo)簽上設(shè)置和綁定屬性。

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標(biāo)簽上的事件將被忽略。旋轉(zhuǎn)主要形狀不會旋轉(zhuǎn)刻度線，就像旋轉(zhuǎn)Spot Panel的主要元素不會旋轉(zhuǎn)其子元素一樣。輪換通常應(yīng)在專家組一級進(jìn)行。與Spot Panel的另一個相似之處在于，通常應(yīng)在主要形狀上調(diào)整漸變面板的大小。TextBlock標(biāo)簽無法編輯。

---

想要購買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊【咨詢在線客服】