Block colour
大多数区块应用程序使用各种区块颜色,以视觉方式将区块分类。Blockly附带的块包括八个类别,颜色由演示中的各种工具栏类别反映:
许多工具箱项还包括作为默认输入值的阴影块。例如,蓝色加法块的数字。阴影块的颜色来自于块的标准颜色,但不饱和。
Defining the block colour
块颜色可以用JSON或JavaScript中定义:
//json
{
// ...,
"colour": 160,
}
//javascript
init: function() {
// ...
this.setColour(160);
}
如果不设置颜色,将导致黑块。
颜色值可以采用几种形式之一。最简单的是0-360之间的数字,在色调饱和度值(HSV)颜色模型中定义块的色调。
对所有块颜色使用饱和度和固定值的HSV,可以方便地选择块颜色,同时确保所有块共享一个内聚调色板。
有几个颜色选择器提供HSV颜色空间,例如HSV选择器。输入Blockly的饱和度和值常量(默认值分别为45%和65%),然后根据需要滑动色调。将此色调数用作颜色值(JSON)或this.setColour(..)函数(JavaScript)的参数。
通过覆盖以下块常量,可以针对每个应用程序调整饱和度和值
Blockly.HSV_SATURATION // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.HSV_VALUE // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Colour references
通常,多个块共享同一颜色,集中颜色定义简化了对颜色的管理,并添加了正确颜色的新块。块颜色可以使用字符串表引用来做到这一点。
字符串表中包含9个颜色常量,对应于工具箱类别,外加一个用于动态变量的不同颜色:
'%{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表示法已经支持引用,这很方便。如果需要,它还允许颜色本地化。
工具箱XML还支持category colour属性中的颜色引用:
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
...
</category>
Customizing saturation and value
通过覆盖以下块常量,可以针对每个应用程序调整饱和度和值:
Blockly.HSV_SATURATION // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.HSV_VALUE // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Colour values in hex
强烈建议使用HSV颜色空间,但Buffy确实支持指定为γrRGGBB六进制的块颜色。虽然这可以促进与其他应用程序颜色(例如CSS中的样式)和设计应用程序(例如Photoshop)的协调,但如果不仔细选择,这是一种设计风险,很容易导致不协调的块。
除非您有专门的视觉设计资源,否则建议在HSV色彩空间的限制范围内工作。如果试图以这种方式重新定义所有颜色,请考虑谷歌的颜色材料设计资源。
Accessibility concerns
Blockly使用颜色作为每个块的角色的强烈提示,并将块分组在一起。对于包含的块,此功能是块上文本的次要功能,因此不是关键属性。然而,在选择块调色板时,色盲应该是一个考虑因素。
虽然BuBLY没有对色盲适应的具体支持,但该页面包括示例7, 12和15个颜色调色板,试图最大限度地跨越最常见的色盲形式。请注意,这不会映射到块中的7、12或15个块类别,因为某些阴影应保留给阴影块和字段。