Champs de l'image

Un champ d'image stocke une chaîne en tant que valeur et une chaîne en tant que texte. Sa valeur est le src de l'image, tandis que son texte est une chaîne alt décrivant/représentant l'image.

Champ "Image"

Champ d'image sur le 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 utilise:

Paramètres Description
src Chaîne pointant vers un fichier d'image matricielle.
width La valeur doit être une valeur non nulle.
height La valeur doit être une valeur non nulle.
opt_alt (Facultatif) Chaîne qui décrit/représente l'image avec précision. Si la valeur est null ou undefined, une chaîne vide est utilisée.
opt_onClick (Facultatif) Une fonction à appeler lorsque l'utilisateur clique sur le champ.
opt_flipRtl (Facultatif) Valeur booléenne. Si la valeur est true, l'image est retourné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

Le champ d'image n'accepte pas de programme de validation, mais 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 des blocs.

Vous pouvez définir le gestionnaire lors d'un clic 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);
}