Поля изображения

Поле изображения хранит строку в качестве своего значения и строку в качестве текста. Значением поля является источник изображения, а текстом — альтернативная строка, описывающая/представляющая изображение.

Поле изображения

Поле изображения на свернутом блоке

Создание

JSON

{
  "type": "example_image",
  "message0": "image: %1",
  "args0": [
    {
      "type": "field_image",
      "src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
      "width": 15,
      "height": 15,
      "alt": "*"
    }
  ]
}

JavaScript

Blockly.Blocks['example_image'] = {
  init: function() {
    this.appendDummyInput()
      .appendField("image:")
      .appendField(new Blockly.FieldImage(
        "https://www.gstatic.com/codesite/ph/images/star_on.gif",
        15,
        15,
        "*"));
  }
};

Конструктор изображений принимает:

Параметр	Описание
src	Строка, указывающая на файл растрового изображения .
width	Необходимо привести к ненулевому числу.
height	Необходимо привести к ненулевому числу.
opt_alt	(Необязательно) Строка, точно описывающая/представляющая изображение. Используется вместо изображения при свёртывании блока. Если значение null или undefined будет использована пустая строка.
opt_onClick	(Необязательно) Функция, вызываемая при щелчке по полю.
opt_flipRtl	(Необязательно) Логическое значение. Если true , изображение переворачивается по вертикальной оси при движении справа налево. Значение по умолчанию — false . Полезно для значков «поворот налево» и «поворот направо».

Сериализация

Поля изображения не подлежат сериализации.

Обработчик кликов

Примечание: Общую информацию о валидаторах см. в разделе Валидаторы .

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

Обработчик щелчков можно установить в конструкторе JavaScript или с помощью функции setOnClickHandler .

Вот пример обработчика щелчка, который сворачивает блок при вызове.

function() {
    this.getSourceBlock().setCollapsed(true);
}