Perender

Perender di Blockly mengontrol bentuk blok, termasuk tinggi, padding, ketebalan batas, dan bentuk koneksi.

Perender kustom

Jika ingin menyesuaikan bentuk blok, Anda harus membuat perender kustom. Anda dapat mempelajari proses ini lebih lanjut dengan menyelesaikan codelab atau membaca dokumentasi referensi. Sebaiknya baca kode untuk salah satu perender bawaan Blockly guna memahami cara kerjanya.

Untuk membuat perender kustom, Anda harus:

  1. Tentukan perender baru. Anda dapat membuat subclass class perender dasar atau salah satu perender yang ada, bergantung pada tempat Anda ingin memulai.
  2. Ganti bagian yang ingin Anda ubah.
    1. Misalnya, untuk menambahkan lebih banyak padding ke blok, Anda dapat membuat subclass ConstantProvider (sekali lagi, dasar atau perender yang ada), dan mengganti konstanta yang relevan. Semua nilai lain akan tetap sama seperti class dasar yang Anda pilih.
    2. Di subclass Renderer kustom, Anda harus menghubungkan class ConstantProvider baru. Ganti fungsi makeConstants_ untuk menampilkan instance baru ConstantProvider kustom Anda, bukan class dasar.
    3. Ikuti proses yang sama saat mengganti class lain seperti PathObject atau Drawer.

  3. Daftarkan perender Anda:

    Blockly.blockRendering.register('custom_renderer', CustomRenderer);

  4. Gunakan perender di aplikasi Anda:

    Blockly.inject('blocklyDiv', {
  renderer: 'custom_renderer'
});

Perender bawaan

Blockly menyediakan beberapa perender bawaan. Anda dapat menggunakannya apa adanya atau menggunakannya sebagai dasar perender kustom.

Untuk menggunakan salah satu perender ini, teruskan nama ke opsi injeksi:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

Untuk membuat subclass-nya, perluas class yang sesuai:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}