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);
}