Цветовые форматы

Значения цвета могут быть заданы в формате HSV или RGB или с использованием названия цвета.

Цветовой тон-Насыщенность-Значение

Самый простой способ определить цвет — это число от 0 до 360, определяющее оттенок в цветовой модели значения оттенка-насыщенности (HSV).

Цветовой спектр HSV

Использование HSV с насыщенностью и фиксированным значением для всех цветов блока позволяет выбрать цвет блока, гарантируя при этом, что все блоки имеют единую палитру.

Насыщенность и значения можно адаптировать для каждого приложения, вызвав следующие функции:

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

Некоторые средства выбора цвета предлагают цветовое пространство HSV, например средство выбора цвета HSV . Введите константы насыщенности и значения Blockly (по умолчанию — 45% и 65% соответственно), затем измените оттенок до выбранного цвета. Используйте этот номер оттенка в качестве значения colour .

RGB

Настоятельно рекомендуется использовать цветовое пространство HSV, но Blockly поддерживает цвета, указанные в виде шестнадцатеричных строк #RRGGBB . Хотя это может облегчить координацию с другими цветами приложений (например, стилями в CSS) и дизайнерскими приложениями (например, Photoshop), это риск проектирования, который может привести к нескоординированным блокам, если их не подобрать тщательно.

Пример неудачно подобранного цвета.

Если у вас нет выделенных ресурсов для визуального дизайна, рекомендуется работать в рамках ограничений цветового пространства HSV. Если вы попытаетесь переопределить все цвета таким образом, обратите внимание на ресурсы Google Material Design, посвященные цвету .

Названия цветов

Вы также можете указать цвета, используя имена цветов, определенные W3C .

Ссылки на цвета

Часто несколько блоков имеют один и тот же цвет, а централизация определений цветов упрощает управление цветами и добавление новых блоков правильного цвета. Для этого цвета блоков и категории наборов инструментов могут использовать токены локализации .

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 уже есть поддержка ссылок. Это также позволяет локализовать цвета , если это необходимо.