指標管理工具

指標管理工具會收集並回報 Blockly 工作區的所有指標。本指南說明指標管理工具傳回的各組指標意義。如要進一步瞭解指標管理工具,請觀看 2021 年指標深入探討

指標

工具箱指標

workspace.getMetricsManager().getToolboxMetrics();

工具箱指標是由類別工具箱的 heightwidthposition 組成。這不包括工具箱隨附的彈出式視窗資訊。

Blockly 工作區,箭頭顯示工具箱的寬度和高度。

工具箱的 position 屬於 Blockly.utils.toolbox.Position 類型。

飛出式選單指標

workspace.getMetricsManager().getFlyoutMetrics();

飛出式指標是由飛出式工具箱的 heightwidthposition 組成。請注意,這並非附加至類別工具箱的飛出視窗。這只適用於彈出式工具箱,如下圖所示。

Blockly 工作區,箭頭顯示暫時性面板的寬度和高度。

飛出視窗的 position 類型為 Blockly.utils.toolbox.Position

SVG 指標

workspace.getMetricsManager().getSvgMetrics();

SVG 指標是由工作區父項 SVG 的 widthheight 組成。如果是主要工作區,這是具有 blocklySvg 類別的 SVG。這個 SVG 包含可見的工作區和工具箱。

Blockly 工作區,周圍有藍色矩形。

查看指標

workspace.getMetricsManager().getViewMetrics(opt_getWorkspaceCoordinates);

瀏覽指標由可視區域的 heightwidthtopleft 組成。可視區域是指工作區中可見的部分。這不包括任何類型的工具箱。

Blockly 工作區,不含工具箱的區域周圍有藍色矩形。

左上角是相對於工作區原點的位置。在工作區中拖曳時,可視區域的頂端和左側位置會更新。

Blockly 工作區,工具箱以外的區域周圍有藍色矩形,原點顯示在左上角偏移處。

絕對指標

workspace.getMetricsManager().getAbsoluteMetrics();

絕對指標是由可視區域的 topleft 偏移量 (來自父項 SVG) 組成。視工具箱在工作區的位置而定,這通常是工具箱的寬度或高度。

Blockly 工作區,工具箱右側和工作區頂端有藍線。 Blockly 工作區,工具箱位於水平位置。工作區左側和工具箱下方會顯示藍線。

內容指標

workspace.getMetricsManager().getContentMetrics(opt_getWorkspaceCoordinates);

內容指標由任何區塊或工作區註解周圍的 heightwidthtopleft 構成。

Blockly 工作區,內容周圍有藍色方塊。

捲動指標

workspace.getMetricsManager().getScrollMetrics(opt_getWorkspaceCoordinates);

捲動指標由可捲動區域的 heightwidthtopleft 組成。如果是可移動的工作區,可捲動區域是內容區域加上一些邊框間距。

Blockly 工作區,周圍環繞著大型藍色方塊。

座標系統

根據預設,指標管理工具計算的所有指標都會以像素座標的形式傳回。在適用的情況下,您可以將 true 傳遞至指標方法,取得工作區座標中的特定指標。例如 metricsManager.getViewMetrics(true)

workspaceCoordinate = pixelCoordinates / workspace.scale

工作區座標通常用於工作區上的項目,例如區塊和工作區註解。使用者放大及縮小時,工作區座標不會變更。

覆寫指標

如要為工作區提供自己的指標,開發人員可以註冊替代指標管理工具物件,該物件會實作 IMetricsManager 介面或擴充 Blockly.MetricsManager

如需相關範例,請參閱持續工具箱外掛程式固定邊緣外掛程式