Pola obrazu

Pole obrazu przechowuje ciąg znaków jako wartość i ciąg znaków jako tekst. Jego wartością jest atrybut src obrazu, a tekstem jest ciąg alt opisujący lub reprezentujący obraz.

Pole obrazu

Pole obrazu w zwiniętym bloku

na podstawie trendów

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

Konstruktor obrazów przyjmuje:

Parametr	Opis
src	Ciąg znaków wskazujący plik obrazu rastrowego.
width	Musi być rzutowana na liczbę różną od zera.
height	Musi być rzutowana na liczbę różną od zera.
opt_alt	(Opcjonalnie) Ciąg znaków, który dokładnie opisuje lub reprezentuje obraz. Jest on używany zamiast obrazu, gdy blok jest zwinięty. Jeśli jest to null lub undefined, używany jest pusty ciąg znaków.
opt_onClick	(Opcjonalnie) Funkcja wywoływana po kliknięciu pola.
opt_flipRtl	(Opcjonalnie) Wartość logiczna. Jeśli true, obraz jest odwracany wzdłuż osi pionowej w trybie od prawej do lewej. Domyślna wartość to false. Przydatne w przypadku ikon „skręć w lewo” i „skręć w prawo”.

Publikacja w odcinkach

Pola obrazu nie są serializowane.

Moduł do obsługiwania kliknięć

Uwaga: więcej informacji o walidatorach znajdziesz w artykule Walidatory.

Pole obrazu nie akceptuje walidatora. Zamiast tego akceptuje funkcję, która jest wywoływana za każdym razem, gdy klikniesz pole. Oznacza to, że obrazy mogą działać jak przyciski znajdujące się w blokach.

Obsługę kliknięcia można ustawić w konstruktorze JavaScript lub za pomocą funkcji setOnClickHandler.

Oto przykład funkcji obsługi kliknięcia, która zwija blok po wywołaniu.

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