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 suo testo è una stringa alt che descrive/rappresenta l'immagine.

Campo immagine

Campo immagine nel 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 di immagini accetta:

Parametro	Descrizione
src	Una stringa che rimanda a un file immagine raster.
width	Deve essere convertito in un numero diverso da zero.
height	Deve essere convertito in un numero diverso da zero.
opt_alt	(Facoltativo) Una stringa che descrive/rappresenta accuratamente 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 rispetto all'asse verticale quando è in modalità da destra a sinistra. Il valore predefinito è false. Utile per le icone "Svolta a sinistra" e "Svolta a destra".

Serializzazione

I campi immagine non sono serializzabili.

Gestore dei clic

Nota: per informazioni sui validatori in generale, consulta Validatori.

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 fungere da pulsanti che si trovano sui blocchi.

Il gestore on click può essere impostato nel costruttore JavaScript o utilizzando la funzione setOnClickHandler.

Di seguito è riportato un esempio di gestore on click che comprime il blocco quando viene chiamato.

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