颜色字段

颜色字段将字符串存储为其 value，并将字符串存储为其 text。其 value 是一个格式为 #rrggbb 的字符串；如果可能，其 text 可能是格式为 #rgb 的字符串。

颜色字段

颜色字段，编辑器处于打开状态

收起块上的颜色字段

恣意创作

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

颜色构造函数包含以下内容：

  • 一个可选的 value
  • 可选的validator
  • 可选的选项映射，包括：
    • colourOptions
    • colourTitles
    • columns

value 应该是格式为 #rrggbb 的字符串。如果未指定 value 或者给定的 value 无效，系统将使用默认颜色数组中的第一个条目。

也可以在 JSON 中设置以下选项：

  • colourOptions
  • colourTitles
  • columns

或者，您也可以使用 JavaScript 钩子对其进行设置。

序列化

JSON

颜色字段的 JSON 代码如下所示：

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

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

XML

颜色字段的 XML 应如下所示：

<field name="FIELDNAME">#ff0000</field>

field 节点的 name 属性包含一个引用颜色字段的字符串，节点的内部文本是应用于该字段的值。内部文本值遵循与构造函数值相同的规则。

请注意，在反序列化和重新序列化后，所有内部文本值都将采用 #rrggbb 格式。在对工作区进行差异比较时，这有时很重要。

自定义

编辑器选项

setColours 函数可用于设置颜色字段的颜色选项。它接受一系列颜色字符串（必须以 #rrggbb 格式定义）和一个可选的提示数组。如果未提供提示数组，系统将使用默认的提示数组。

提示和颜色根据数组索引（而不是值）进行匹配。如果颜色数组比提示数组长，则额外颜色的提示将为其 #rrggbb 值。

setColumns 函数用于设置颜色选择器中的列数。

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

可以使用 JSON 扩展程序完成此操作。

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

自定义颜色字段编辑器

（可选）默认颜色、提示和列可以全局替换。这意味着它们将影响所有颜色字段，而不是特定字段。

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

创建颜色验证程序

颜色字段的值是 #rrggbb 格式字符串，因此任何验证器都必须接受 #rrggbb 格式字符串，并返回 #rrggbb 格式字符串、null 或 undefined。

下面是一个验证程序示例，该验证程序会更改块的颜色以匹配字段的颜色。

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

禁止根据颜色字段更改颜色