块颜色

大多数 Blockly 应用都使用多种不同的区块颜色,直观地将区块分组为不同的类别。Blockly 的功能块包含八个类别,其颜色在演示中通过各种工具栏类别进行镜像:

包含每种块颜色示例的工作区屏幕截图。

块上的其他颜色派生自主颜色。例如,阴影块是主颜色的饱和度较低的版本,而边框颜色是颜色较深的版本。

指定方块的颜色

块颜色可以用 JSON 或 JavaScript 表示法定义:

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

请注意英式拼写。颜色设置失败会导致出现黑色块。

colour 值可以采用多种形式之一。最简单的是 0 到 360 之间的数字,用于在 hue-saturation-value (HSV) 颜色模型中定义块的色相。

通过为所有方块颜色使用饱和度和值固定的 HSV,您可以轻松选择块颜色,同时确保所有方块使用统一的调色板。

多种颜色选择器提供 HSV 颜色空间,例如 HSV 选择器。输入 Blockly 的饱和度常量和值常量(默认值为 45% 和 65%),然后根据需要滑动色调。使用此色调编号作为 colour 值 (JSON) 或 this.setColour(..) 函数 (JavaScript) 的参数。

通过调用以下函数,可以针对每个应用调整饱和度和值:

Blockly.colour.setHsvSaturation() // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly..colour.setHsvValue() // 0 (inclusive) to 1 (exclusive), defaulting to 0.65

颜色参考

通常,多个块会采用同一种颜色,集中颜色定义可以简化颜色的管理以及添加包含正确颜色的新块。块颜色可以使用字符串表引用来实现这一点。

Blockly 包含与工具箱类别对应的九个颜色常量,外加一种不同的动态变量颜色:

'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'

这些字符串值可以用在 JSON 定义和 block.setColour(..) 中。

您可以通过添加到 Blockly.Msg 来添加自己的颜色常量:

// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

将颜色存储在本地化字符串表中似乎有异常,但这很方便,因为 JSON 表示法已支持相关引用。如果需要,它还允许本地化颜色

自定义饱和度和值

通过调用以下函数,可以针对每个应用调整饱和度和值:

Blockly.colour.setHsvSaturation() // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly..colour.setHsvValue() // 0 (inclusive) to 1 (exclusive), defaulting to 0.65

十六进制的颜色值

强烈建议使用 HSV 颜色空间,但 Blockly 确实支持以 #RRGGBB 十六进制形式指定的块颜色。虽然这有助于协调其他应用颜色(例如 CSS 中的样式)和设计应用(例如使用 Photoshop 时的设计风险),如果不小心选择,则很容易导致出现不协调的块。

选择不当颜色的示例。

除非您拥有专用的视觉设计资源,否则建议在 HSV 颜色空间的限制范围内执行操作。如果尝试以这种方式重新定义所有颜色,请考虑 Google 关于颜色的 Material Design 资源

无障碍功能问题

Blockly 使用颜色来明确提示每个分块的作用,并将各分块组合在一起。对于包含的块,此可供性 (affordance) 对块上的文本而言是次要的,因此不是关键属性。不过,在选择块调色板时,应考虑色盲。

Blockly 提供了多个主题,旨在适应某些类型的色觉缺陷。此页面包含示例 7、12 和 15 种调色板,旨在最大限度地区分最常见的色盲。请注意,这不会映射到 Blockly 中的 7、12 或 15 个块类别,因为某些阴影应为阴影块和字段预留。