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 (src) de l'image, tandis que son texte est une chaîne alt décrivant/représentant l'image.

Champ d'image

Champ d'image dans 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'image accepte les éléments suivants :

Paramètre	Description
src	Chaîne qui pointe vers un fichier image raster.
width	Doit être converti en un nombre différent de zéro.
height	Doit être converti en un nombre différent de zéro.
opt_alt	(Facultatif) Chaîne décrivant/représentant précisément l'image. Cette image est utilisée à la place de l'image lorsque le bloc est réduit. Si la valeur est null ou undefined, une chaîne vide sera utilisée.
opt_onClick	(Facultatif) Fonction à appeler lorsque l'utilisateur clique sur le champ.
opt_flipRtl	(Facultatif) Booléen. Si la valeur est true, l'image est inversée sur l'axe vertical en mode de lecture 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 Validateurs.

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

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

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

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