Campos de imagem

Um campo de imagem armazena uma string como valor e outra como texto. O valor é o src da imagem, e o texto é uma string alt que descreve/representa a imagem.

Campo de imagem

Campo de imagem em bloco fechado

Criação

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,
        "*"));
  }
};

O construtor de imagem recebe:

Parâmetro	Descrição
src	Uma string que aponta para um arquivo de imagem de varredura.
width	Precisa ser convertido em um número diferente de zero.
height	Precisa ser convertido em um número diferente de zero.
opt_alt	(Opcional) Uma string que descreve/representa com precisão a imagem. Ele é usado em vez da imagem quando o bloco está fechado. Se for null ou undefined, uma string vazia será usada.
opt_onClick	(Opcional) Uma função a ser chamada quando o campo receber um clique.
opt_flipRtl	(Opcional) Um booleano. Se true, a imagem é invertida no eixo vertical quando está no modo da direita para a esquerda. O padrão é false. Útil para ícones de "virar à esquerda" e "virar à direita".

Serialização

Os campos de imagem não são serializáveis.

Gerenciador de cliques

Observação: para informações sobre validadores em geral, consulte Validadores.

O campo de imagem não aceita um validador. Em vez disso, ele aceita explicitamente uma função que é chamada sempre que o campo é clicado. Isso significa que as imagens podem funcionar como botões que existem em blocos.

O gerenciador de cliques pode ser definido no construtor JavaScript ou usando a função setOnClickHandler.

Confira um exemplo de gerenciador de cliques que reduz o bloco quando chamado.

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