Kolom gambar

Kolom gambar menyimpan string sebagai nilainya, dan string sebagai teksnya. Nilainya adalah src gambar, sedangkan teksnya adalah string alt yang menjelaskan/mewakili gambar.

Kolom gambar

Blok dengan label "image:" dan gambar bintang kuning.

Kolom gambar pada blok yang diciutkan

Blok yang sama setelah diciutkan. Elemen ini memiliki label "variable: *", dengan "*" adalah teks alternatif untuk gambar, dan tepi kanan yang tidak rata untuk menunjukkan bahwa elemen tersebut ditutup.

yang Dipicu oleh Tren

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 gambar menggunakan:

Parameter Deskripsi
src String yang mengarah ke file gambar raster.
width Harus ditransmisikan ke angka selain nol.
height Harus ditransmisikan ke angka selain nol.
opt_alt (Opsional) String yang secara akurat mendeskripsikan/mewakili gambar. Ini digunakan sebagai pengganti gambar saat blok diciutkan. Jika null atau undefined, string kosong akan digunakan.
opt_onClick (Opsional) Fungsi yang akan dipanggil saat kolom diklik.
opt_flipRtl (Opsional) Boolean. Jika true, gambar akan dibalik di sepanjang sumbu vertikal saat dalam mode kanan ke kiri. Nilai defaultnya adalah false. Berguna untuk ikon "belok kiri" dan "belok kanan".

Serialisasi

Kolom gambar tidak dapat diserialisasi.

Pengendali klik

Kolom gambar tidak menerima validator; sebagai gantinya, kolom ini secara eksplisit menerima fungsi yang dipanggil setiap kali kolom diklik. Ini berarti gambar dapat berfungsi seperti tombol yang ada di blok.

Pemroses klik dapat ditetapkan di Konstruktor JavaScript atau menggunakan fungsi setOnClickHandler.

Berikut adalah contoh pengendali saat diklik yang menciutkan blok saat dipanggil.

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

GIF animasi yang menampilkan gambar yang diklik, blok yang diciutkan, klik kanan untuk menampilkan menu konteks, Luaskan Blok yang dipilih, dan blok yang diluaskan.