Champs de l'image

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

Champ "Image"

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

Paramètre Description
src Chaîne qui pointe vers un fichier d'image matricielle.
width Doit être converti en nombre non nul.
height Doit être converti en nombre non nul.
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) 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 droite à gauche. La valeur par défaut est false. Utile pour "tourner à gauche" et "tournez à droite" .

Sérialisation

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

Gestionnaire de clics

Le champ "Image" n'accepte pas d'outil de validation. Au lieu de cela, il accepte explicitement 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.

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

Voici un exemple d'utilisation d'un gestionnaire de clics qui réduit le bloc lorsque appelé.

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