Campi immagine

Un campo immagine memorizza una stringa come valore e una stringa come testo. Il suo valore è l' src dell'immagine, mentre il testo è una stringa alternativa che descrive e 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 prende in considerazione:

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

Serializzazione

I campi immagine non sono serializzabili.

Gestore dei clic

Il campo image non accetta uno strumento di convalida, ma esplicitamente una funzione che viene richiamata ogni volta che l'utente fa clic sul campo. Ciò significa che le immagini possono agire come pulsanti che esistono sui blocchi.

Il gestore dei clic può essere impostato nel Costruttore JavaScript o utilizzando la funzione setOnClickHandler.

Ecco un esempio di gestore dei clic che comprime il blocco quando viene richiamato.

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