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

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

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

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

Творение

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);
}