Campi immagine

Un campo immagine memorizza una stringa come valore e una stringa come testo. Il suo valore è l'attributo src dell'immagine, mentre il testo è una stringa alt che descrive/rappresenta l'immagine.

Campo immagine

Campo immagine in un blocco compresso

Creazione

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

Il costruttore dell'immagine accetta:

Parametro	Descrizione
src	Una stringa che rimanda a un file immagine raster.
width	Deve essere eseguito il casting in un numero diverso da zero.
height	Deve essere eseguito il casting in un numero diverso da zero.
opt_alt	(Facoltativo) Una stringa che descriva/rappresenti con precisione l'immagine. Viene utilizzato al posto dell'immagine quando il blocco è compresso. Se è null o undefined, verrà utilizzata una stringa vuota.
opt_onClick	(Facoltativo) Una funzione da chiamare quando si fa clic sul campo.
opt_flipRtl	(Facoltativo) Un valore booleano. Se true, l'immagine viene capovolta sull'asse verticale in modalità da destra a sinistra. Il valore predefinito è false. Utile per le icone "gira a sinistra" e "gira a destra".

Serializzazione

I campi immagine non sono serializzabili.

Gestore dei clic

Nota: per informazioni sui validator in generale, consulta Validator.

Il campo immagine non accetta un validatore, ma accetta esplicitamente una funzione che viene chiamata ogni volta che si fa clic sul campo. Ciò significa che le immagini possono comportarsi come i pulsanti esistenti nei blocchi.

Il gestore di clic può essere impostato nel costruttore JavaScript o utilizzando la funzione setOnClickHandler.

Ecco un esempio di gestore on click che comprime il blocco quando viene chiamato.

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