Campos de imagem

Um campo de imagem armazena uma string como valor e uma string 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 um bloco recolhido

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 imagens usa:

Parâmetro	Descrição
src	Uma string que aponta para um arquivo de imagem rasterizada.
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 a imagem com precisão. Ele é usado em vez da imagem quando o bloco é recolhido. Se for null ou undefined, uma string vazia será usada.
opt_onClick	(Opcional) Uma função a ser chamada quando o campo é clicado.
opt_flipRtl	(Opcional) Um booleano. Se true, a imagem será invertida no eixo vertical quando estiver no modo da direita para a esquerda. O padrão é false. Útil para ícones de "vire à esquerda" e "vire à direita".

Serialização

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

Gerenciador de cliques

Observação: para informações gerais sobre validadores, 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 agir como botões que existem em blocos.

O manipulador de eventos de clique pode ser definido no Construtor JavaScript ou usando a função setOnClickHandler.

Veja um exemplo de um gerenciador de cliques que recolhe o bloco quando é chamado.

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