Membuat perender baru

Untuk membuat perender kustom, Anda perlu membuat subclass Renderer . Lihat dokumen konsep perender untuk informasi selengkapnya informasi tentang apa itu perender dan apa fungsinya.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

Tanpa penyesuaian apa pun, perender default akan terlihat seperti ini:

perender dasar

Anda juga dapat membuat subclass dari salah satu perender bawaan lainnya dan kemudian mengganti bagian-bagiannya.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

Membuat subclass komponen perender lainnya

Bentuk blok yang sebenarnya ditentukan oleh subkomponen perender.

Secara default, class Renderer menyediakan versi kerja semua komponen perender. Hal ini memungkinkan Anda mengubah satu komponen, tanpa perlu khawatir tentang yang lain.

Misalnya, jika Anda ingin mengubah bentuk koneksi, Anda dapat mengganti konstanta tanpa harus menyentuh komponen lainnya.

Lihat dokumen komponen perender untuk informasi selengkapnya informasi tentang apa yang dilakukan setiap komponen individu.

Mengganti metode factory

Setelah membuat subclass komponen perender, Anda harus mengganti metode factory Renderer untuk komponen yang dibuat subclass-nya. Tindakan ini memungkinkan perender menyambungkan berbagai komponen dengan benar secara bersamaan.

Ada metode untuk setiap jenis komponen:

makeConstants_
makeRenderInfo_
makePathObject (perhatikan bahwa tidak ada garis bawah)
makeDrawer_

Mendaftarkan perender

Terakhir, setelah menyelesaikan pembuatan perender kustom, Anda harus mendaftarkannya. Tindakan ini akan mengaitkan perender dengan string sehingga Anda dapat meneruskannya ke konfigurasi injeksi Anda.

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

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