Поле цвета хранит строку в качестве value
и строку в качестве text
. Его value
является строка в формате #rrggbb
, а его text
если возможно, может быть строкой в формате #rgb
.
Цветовое поле
Цветное поле с открытым редактором
Цветное поле в свернутом блоке
Создание
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "FIELDNAME",
"colour": "#ff4040",
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}
]
}
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
this.appendDummyInput()
.appendField('colour:')
.appendField(new Blockly.FieldColour('#ff4040',
{
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}), 'FIELDNAME');
}
};
Конструктор цвета принимает следующее:
- необязательное
value
- дополнительный валидатор
- дополнительная карта опций, в том числе:
-
colourOptions
-
colourTitles
-
columns
-
value
должно быть строкой в формате #rrggbb
. Если value
не указано или данное value
недопустимо, будет использоваться первая запись в массиве цветов по умолчанию.
В JSON также можно установить следующие параметры:
-
colourOptions
-
colourTitles
-
columns
Или их можно установить с помощью хуков JavaScript .
Сериализация
JSON
JSON для поля цвета выглядит так:
{
"fields": {
"FIELDNAME": "#ff0000"
}
}
Где FIELDNAME
— это строка, ссылающаяся на поле цвета, а значение — это значение, которое применяется к полю. Значение подчиняется тем же правилам, что и значение конструктора.
XML
XML-код поля цвета выглядит так:
<field name="FIELDNAME">#ff0000</field>
Атрибут name
узла field
содержит строку, ссылающуюся на поле цвета, а внутренний текст узла — это значение, которое следует применить к полю. Внутреннее текстовое значение подчиняется тем же правилам, что и значение конструктора.
Обратите внимание, что после десериализации и повторной сериализации все внутренние текстовые значения будут иметь формат #rrggbb
. Иногда это важно при различении рабочих пространств.
Кастомизация
Параметры редактора
Функцию setColours можно использовать для установки параметров цвета цветового поля. Он принимает массив цветовых строк, который должен быть определен в формате #rrggbb
, и необязательный массив всплывающих подсказок. Если массив подсказок не указан, будет использоваться массив подсказок по умолчанию.
Подсказки и цвета сопоставляются на основе индекса массива, а не значения. Если массив цветов длиннее массива подсказок, подсказками для дополнительных цветов будет их значение #rrggbb
.
Функция setColumns устанавливает количество столбцов в палитре цветов.
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "COLOUR",
"colour": "#ff4040"
}
],
"extensions": ["set_colours_extension"]
}
Blockly.Extensions.register('set_colours_extension',
function() {
var field = this.getField("COLOUR");
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
});
Это делается с помощью расширения JSON.
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
var field = new Blockly.FieldColour('#ff4040');
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
this.appendDummyInput()
.appendField('colour:')
.appendField(field, 'COLOUR');
}
};
При желании цвета, всплывающие подсказки и столбцы по умолчанию могут быть переопределены глобально. Это означает, что они будут влиять на все поля цветов, а не на конкретное поле.
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;
Создание валидатора цвета
Значением поля цвета является строка формата #rrggbb
, поэтому любые валидаторы должны принимать строку формата #rrggbb
и возвращать строку формата #rrggbb
, null
или undefined
.
Вот пример валидатора, который меняет цвет блока в соответствии с цветом поля.
function(newValue) {
this.getSourceBlock().setColour(newValue);
return newValue;
}