Campi immagine

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

Parametro	Descrizione
`src`	Una stringa che rimanda a un file di 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 accuratamente l'immagine. Se è `null` o `undefined`, verrà utilizzata una stringa vuota.
`opt_onClick`	(Facoltativo) Una funzione da richiamare 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 "girare a sinistra" e "gira a destra" .

Serializzazione

I campi Immagine non sono serializzabili.

Gestore clic

Il campo dell'immagine non accetta uno strumento di convalida. ma accetta esplicitamente un che viene richiamata ogni volta che si fa clic sul campo. Ciò significa che le immagini possono agire come pulsanti che esistono sui blocchi.

Il gestore al clic può essere impostato nel Generatore JavaScript o mediante la funzione setOnClickHandler.

Ecco un esempio di un gestore al clic che comprime il blocco chiamato.

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