角度欄位

角度欄位會將數字儲存為數字，並將字串儲存為文字。這個值是介於 0 到 360 之間的數字 (這個範圍可以變更)，而其文字可以是在編輯器中輸入的任何字串。

角度欄位

含有編輯器的角度欄位

收合角度欄位

創作風潮

JSON

{
  "type": "example_angle",
  "message0": "angle: %1",
  "args0": [
    {
      "type": "field_angle",
      "name": "FIELDNAME",
      "angle": 90
    }
  ]
}

JavaScript

Blockly.Blocks['example_angle'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('angle:')
        .appendField(new Blockly.FieldAngle(90), 'FIELDNAME');
  }
};

角度建構函式會採用選用值和選用的validator。如未指定任何值，或指定的值未轉換為數字，系統會使用零做為預設值。

序列化

JSON

角度欄位的 JSON 如下所示：

{
  "fields": {
    "FIELDNAME": 0
  }
}

其中 FIELDNAME 是參照角度欄位的字串，值是套用至該欄位的值。這個值遵循與建構函式值相同的規則。

XML

角度欄位的 XML 如下所示：

<field name="FIELDNAME">0</field>

其中 name 屬性包含參照角度欄位的字串，內部文字是套用至該欄位的值。內部文字值遵循與建構函式值相同的規則。

自訂

貼齊

Blockly.FieldAngle.ROUND 屬性會將角度挑選器「snaps」的值變更為使用滑鼠時的值。

注意： 這麼做「不會影響」角度欄位的文字輸入部分，因此如要確保角度值能四捨五入，請使用validator。

以下是 ROUND 值為 70 的範例：

ROUND 屬性預設為 15。如要停用貼齊功能，請設為 0。

這是全域屬性，因此會在設定時修改所有角度欄位。

通行方向

Blockly.FieldAngle.CLOCKWISE 屬性會變更方向，讓角度值增加。如果將這個值設為 true，當選取器順時針移動時，角度會增加，設為 false 則會在逆時針移動角度增加角度。

將「CLOCKWISE」設為 true

CLOCKWISE 已設為 false

CLOCKWISE 屬性預設為 false，表示逆時針動作會增加角度。

這是全域屬性，因此會在設定時修改所有角度欄位。

零位置

Blockly.FieldAngle.OFFSET 屬性會設定 0 度的位置。根據預設，零度會與正 x 軸 (往右) 對齊，然後此屬性以一定度數「偏移」。

注意： 關閉方向「一律」逆時針方向，與 CLOCKWISE 屬性無關。

OFFSET 屬性預設為 0，表示零度與正 X 軸對齊。

這是全域屬性，因此會在設定時修改所有角度欄位。

範圍

Blockly.FieldAngle.WRAP 屬性會設定值的範圍。值的範圍等於 (-360 + WRAP, WRAP)。也就是說，WRAP 值 360 會得到 (0, 359.9) 的範圍，WRAP 值則是 (-179.9, 180)。

WRAP 屬性預設為 360，表示欄位的範圍是 (0, 359.9)。

這是全域屬性，因此會在設定時修改所有角度欄位。

角度挑選器大小

Blockly.FieldAngle.HALF 屬性會變更角度挑選器的大小。這個值會定義外部圓形的半徑 (以像素為單位)。

HALF 屬性預設為 50。

這是全域屬性，因此會在設定時修改所有角度欄位。

注意： 角度挑選器的大小不受工作區的縮放影響。

常見模式

您可以搭配使用方向 和零位置，創造一些有趣的組合。以下是兩種常見的做法：

量角器

0 度右側，上升 90 度。

Blockly.FieldAngle.CLOCKWISE = false;
Blockly.FieldAngle.OFFSET = 0;

指南針

0 度上升，右側為 90 度。

Blockly.FieldAngle.CLOCKWISE = true;
Blockly.FieldAngle.OFFSET = 90;

建立角度驗證工具

注意： 如需有關驗證工具的一般資訊，請參閱驗證工具。

角度欄位的值是數字，因此所有驗證工具都必須接受數字並傳回數字、null 或 undefined。

以下是強制將該值設為 30 的倍數的驗證工具範例：

function(newValue) {
    return Math.round(newValue / 30) * 30;
}

請注意，角度欄位的 [ROUND](#snapping) 屬性仍設為 15，因此欄位的圖形元素會顯示 15 的倍數，而非 30。