角度字段

角度字段存储数字作为值,存储字符串作为文本。其值是一个 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');
  }
};

angle 构造函数带有一个可选值和一个可选的validator。如果未指定任何值或给定值未转换为数字,则使用零作为默认值。

序列化

JSON

angle 字段的 JSON 如下所示:

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

其中,FIELDNAME 是引用角度字段的字符串,值是要应用于该字段的值。该值遵循的规则与构造函数值相同。

XML

angle 字段的 XML 如下所示:

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

其中,name 属性包含引用角度字段的字符串,内部文本是要应用于该字段的值。内部文本值遵循与构造函数值相同的规则。

自定义

贴靠

Blockly.FieldAngle.ROUND 属性可更改使用鼠标时角度选择器“贴靠”的值。

以下是 ROUND 值为 70 的示例:

ROUND 值为 70 的角度字段

ROUND 属性默认为 15。如果要停用贴靠功能,请将其设置为 0。

这是一个全局属性,因此它会在设置后修改所有角度字段。

方向

Blockly.FieldAngle.CLOCKWISE 属性用于更改使角度值增大的方向。将此值设置为 true 会随着选择器顺时针移动而增加角度;将其设置为 false 则角度会在其逆时针移动时增大。

“CLOCKWISE”已设为 true

将“CLOCKWISE”设为 true 的角度字段

“CLOCKWISE”已设为“false”

将 CLOCKWISE 设为 false 的角度字段

CLOCKWISE 属性默认为 false,这意味着逆时针运动将使角度增加。

这是一个全局属性,因此它会在设置后修改所有角度字段。

零位置

Blockly.FieldAngle.OFFSET 属性用于设置 0 度所在位置。默认情况下,零度会与正 x 轴对齐(朝右侧),然后此属性会将该位置“偏移”一定度数。

右侧的角度选择器 0

顶部的角度选择器 0

OFFSET 属性默认为 0,表示零度与 x 轴正值对齐。

这是一个全局属性,因此它会在设置后修改所有角度字段。

范围

Blockly.FieldAngle.WRAP 属性用于设置值的范围。值的范围等于 (-360 + WRAP, WRAP)。也就是说,WRAP 值为 360 时的范围为 (0, 359.9)WRAP 值为 180 时的范围为 (-179.9, 180)

环绕值为 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;

配置为罗盘的角度选择器

创建角度验证程序

角度字段的值是一个数字,因此任何验证程序都必须接受数字并返回数字、nullundefined

下面是一个验证器示例,该验证程序将值设置为 30 的倍数:

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

带有验证工具的角度选择器

请注意,角度字段的 [ROUND](#snapping) 属性仍设置为 15,因此字段的图形元素会显示 15 的倍数,而不是 30。