Champs de l'image

Un champ d'image stocke une chaîne comme valeur et une chaîne comme texte. Sa valeur correspond à la source de l'image, tandis que son texte est une chaîne alternative décrivant/représentant l'image.

Champ d'image

Champ d'image sur un bloc réduit

Création

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

Le constructeur d'images accepte les éléments suivants :

Paramètre	Description
src	Chaîne pointant vers un fichier image raster.
width	Doit être converti en nombre non nul.
height	Doit être converti en nombre non nul.
opt_alt	(Facultatif) Chaîne décrivant/représentant l'image avec précision. Elle est utilisée à la place de l'image lorsque le bloc est réduit. Si elle est null ou undefined, une chaîne vide est utilisée.
opt_onClick	(Facultatif) Fonction à appeler lorsque l'utilisateur clique sur le champ.
opt_flipRtl	(Facultatif) Valeur booléenne. Si la valeur est true, l'image est inversée sur l'axe vertical en mode de droite à gauche. La valeur par défaut est false. Utile pour les icônes "Tourner à gauche" et "Tourner à droite".

Sérialisation

Les champs d'image ne sont pas sérialisables.

Gestionnaire de clics

**Remarque** : Pour en savoir plus sur les validateurs en général, consultez la section Validateurs.

Le champ d'image n'accepte pas de programme de validation. Il accepte explicitement une fonction qui est appelée chaque fois que l'utilisateur clique sur le champ. Cela signifie que les images peuvent se comporter comme des boutons qui existent sur les blocs.

Le gestionnaire de clics peut être défini dans le constructeur JavaScript ou à l'aide de la setOnClickHandler fonction.

Voici un exemple de gestionnaire de clics qui réduit le bloc lorsqu'il est appelé.

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