Bildfelder

In einem Bildfeld wird eine Zeichenfolge als Wert und eine Zeichenfolge als Text gespeichert. Das "value" ist die Quelle des Bilds, während sein Text eine "alt"-Zeichenfolge ist beschreiben/Darstellung des Bildes.

Feld „Bild“

Bildfeld auf minimiertem Block

Erstellung

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

Der Bildkonstruktor übernimmt Folgendes:

Parameter	Beschreibung
`src`	Ein String, der auf eine Rasterbilddatei verweist.
`width`	Muss in eine Zahl ungleich null umgewandelt werden.
`height`	Muss in eine Zahl ungleich null umgewandelt werden.
`opt_alt`	Optional: Ein String, der das Bild genau beschreibt bzw. darstellt. Bei `null` oder `undefined` wird ein leerer String verwendet.
`opt_onClick`	Optional: Eine Funktion, die aufgerufen wird, wenn auf das Feld geklickt wird.
`opt_flipRtl`	(Optional) Ein boolescher Wert. Bei `true` wird das Bild im linksläufigen Modus über die vertikale Achse gespiegelt. Die Standardeinstellung ist `false`. Nützlich für „Links abbiegen“ und „nach rechts abbiegen“ Symbole.

Serialisierung

Image-Felder können nicht serialisiert werden.

Klick-Handler

Im Bildfeld kann keine Validierung verwendet werden. akzeptiert stattdessen explizit eine -Funktion, die bei jedem Klick auf das Feld aufgerufen wird. Das bedeutet, dass Bilder können wie Schaltflächen auf Blöcken funktionieren.

Der Handler für Klicks kann im JavaScript-Konstruktor oder mit der Funktion setOnClickHandler festgelegt werden.

Hier ist ein Beispiel für einen On-Click-Handler, der den Block minimiert, wenn aufgerufen.

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