Bildfelder

In einem Bildfeld wird eine Zeichenfolge als Wert und eine Zeichenfolge als Text gespeichert. Sein Wert ist die Quelle des Bildes, während sein Text ein Alt-String ist, der das Bild beschreibt/darstellt.

Image-Feld

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 Image-Konstruktor ü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/darstellt. Bei null oder undefined wird ein leerer String verwendet.
opt_onClick (Optional) Eine Funktion, die beim Klicken auf das Feld aufgerufen wird.
opt_flipRtl (Optional) Boolescher Wert. Bei true wird das Bild im linksläufigen Modus über die vertikale Achse gespiegelt. Die Standardeinstellung ist false. Nützlich für die Symbole „Nach links abbiegen“ und „Nach rechts abbiegen“.

Serialisierung

Bildfelder können nicht serialisiert werden.

Klick-Handler

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

Der on-click-Handler kann im JavaScript-Konstruktor oder mithilfe der Funktion setOnClickHandler festgelegt werden.

Hier ist ein Beispiel für einen On-Click-Handler, mit dem der Block beim Aufruf minimiert wird.

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