Campos de imagen

Un campo de imagen almacena una cadena como su valor y una cadena como su texto. Es value es el src de la imagen, mientras que su texto es una cadena alt que describen o representan la imagen.

Campo de imagen

Campo de imagen en el bloque contraído

Creación

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

El constructor de imágenes toma lo siguiente:

Parámetro	Descripción
`src`	Es una cadena que apunta a un archivo de imagen de trama.
`width`	Debe convertir el valor en un número distinto de cero.
`height`	Debe convertir el valor en un número distinto de cero.
`opt_alt`	Es una cadena que describe o representa con precisión la imagen (opcional). Si es `null` o `undefined`, se usará una cadena vacía.
`opt_onClick`	Una función a la que se llamará cuando se haga clic en el campo (opcional).
`opt_flipRtl`	Un valor booleano (opcional). Si es `true`, la imagen se invierte en el eje vertical cuando se encuentra en el modo de derecha a izquierda. La configuración predeterminada es `false`. Útil para "girar a la izquierda" y "girar a la derecha" íconos.

Serialización

Los campos de imagen no se pueden serializar.

Controlador de clics

El campo de imagen no acepta un validador. sino que acepta explícitamente un a la que se llama cada vez que se hace clic en el campo. Esto significa que las imágenes pueden actuar como botones que existen en los bloques.

El controlador de clics se puede configurar en el Constructor de JavaScript o con la función setOnClickHandler.

Este es un ejemplo de un controlador de clics que contrae el bloque cuando llamado.

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