Blockly 中文文档

# 颜色字段

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

# 颜色字段

# 打开编辑器时显示的颜色字段

# 收起的块上的颜色字段

# 创建

颜色构造函数接受以下内容：

  • 可选的 value
  • 可选的 校验器
  • 可选的选项映射，包括：
    • colourOptions
    • colourTitles
    • columns

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

您还可以在 JSON 中设置以下选项：

  • colourOptions
  • colourTitles
  • columns

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

# 序列化

# 自定义

# 编辑器选项

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

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

setColumns (opens new window) 函数会设置颜色选择器中的列数。

Customized colour field editor

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

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;

# 创建颜色校验器

TIP

注意：如需查看有关校验器的一般信息，请参阅 校验器。

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

下面是一个校验器示例，它会更改代码块的颜色以匹配字段的颜色。

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

# 根据颜色字段阻止更改颜色

← 日期 →