Bildfelder

In einem Bildfeld wird ein String als Wert und ein String als Text gespeichert. Der Wert ist das src-Attribut des Bildes, während der Text ein Alt-String ist, der das Bild beschreibt oder darstellt.

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 nimmt Folgendes an:

Parameter	Beschreibung
src	Ein String, der auf eine Rasterbilddatei verweist.
width	Muss in eine nicht nullwertige Zahl umgewandelt werden.
height	Muss in eine nicht nullwertige Zahl umgewandelt werden.
opt_alt	(Optional) Ein String, der das Bild genau beschreibt oder darstellt. Dieser Text wird anstelle des Bilds verwendet, wenn der Block minimiert ist. Wenn der Wert null oder undefined ist, 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 Modus „Von rechts nach links“ entlang der vertikalen Achse gespiegelt. Die Standardeinstellung ist false. Nützlich für Symbole wie „Nach links abbiegen“ und „Nach 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 ausdrücklich eine Funktion, die jedes Mal aufgerufen wird, wenn auf das Feld geklickt wird. Das bedeutet, dass Bilder wie Schaltflächen funktionieren können, die sich in Blöcken befinden.

Der On-Click-Handler 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 er aufgerufen wird.

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