blockly -- 颜色(Block colour)

Block colour

大多数区块应用程序使用各种区块颜色,以视觉方式将区块分类。Blockly附带的块包括八个类别,颜色由演示中的各种工具栏类别反映:

A screenshot of a workspace with an example of each block color.

 许多工具箱项还包括作为默认输入值的阴影块。例如,蓝色加法块的数字。阴影块的颜色来自于块的标准颜色,但不饱和。

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)的协调,但如果不仔细选择,这是一种设计风险,很容易导致不协调的块。

An example of poorly selected colors.

除非您有专门的视觉设计资源,否则建议在HSV色彩空间的限制范围内工作。如果试图以这种方式重新定义所有颜色,请考虑谷歌的颜色材料设计资源。

Accessibility concerns

Blockly使用颜色作为每个块的角色的强烈提示,并将块分组在一起。对于包含的块,此功能是块上文本的次要功能,因此不是关键属性。然而,在选择块调色板时,色盲应该是一个考虑因素。

虽然BuBLY没有对色盲适应的具体支持,但该页面包括示例7, 12和15个颜色调色板,试图最大限度地跨越最常见的色盲形式。请注意,这不会映射到块中的7、12或15个块类别,因为某些阴影应保留给阴影块和字段。

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值