Bildfelder

In einem Bildfeld wird ein String als Wert und ein String als Text gespeichert. Sein Wert ist der „src“-Wert des Bildes, während sein Text ein Alt-String ist, der das Bild beschreibt bzw. repräsentiert.

Bildfeld

Bildfeld in 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 verwendet folgende Parameter:

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. repräsentiert. Dieses Bild wird anstelle des Bilds verwendet, wenn der Block minimiert ist. Wenn es null oder undefined ist, wird ein leerer String verwendet.
opt_onClick	(Optional) Eine Funktion, die aufgerufen werden soll, wenn auf das Feld geklickt wird.
opt_flipRtl	Optional: Ein boolescher Wert. Wenn true, wird das Bild im Rechts-nach-links-Modus an der vertikalen Achse gespiegelt. Die Standardeinstellung ist false. Nützlich für Symbole für „Links abbiegen“ und „Rechts abbiegen“.

Serialisierung

Bildfelder können nicht serialisiert werden.

Klick-Handler

Hinweis :Allgemeine Informationen zu Validatoren finden Sie unter Validatoren.

Das Bildfeld akzeptiert keinen Validator, sondern explizit eine Funktion, die aufgerufen wird, wenn auf das Feld geklickt wird. Das bedeutet, dass Bilder wie Schaltflächen in Blöcken verwendet werden können.

Der On-Click-Handler kann im JavaScript-Konstruktor oder mit der Funktion setOnClickHandler festgelegt werden.

Hier sehen Sie ein Beispiel für einen On-Click-Handler, der den Block minimiert, wenn er aufgerufen wird.

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