レンダラ

Blockly のレンダラは、高さ、パディング、枠線の太さ、接続形状など、ブロックの形状を制御します。

カスタム レンダラ

ブロックの形状をカスタマイズする場合は、カスタム レンダラを作成する必要があります。このプロセスの詳細については、Codelab をご覧になるか、リファレンス ドキュメントをご覧ください。 Blockly の組み込みレンダラのコードを読んで動作を理解することをおすすめします。

カスタム レンダラを作成するには、以下を行う必要があります。

  1. 新しいレンダラを定義します。どこから始めるかに応じて、基本レンダラクラスまたは既存の任意のレンダラをサブクラス化できます。
  2. 変更する部分をオーバーライドします。
    1. たとえば、ブロックにパディングを追加するには、ConstantProvider（ベースまたは既存のレンダラ）をサブクラス化し、関連する定数をオーバーライドします。その他の値はすべて、選択した基本クラスと同じです。
    2. カスタム Renderer サブクラス内で、新しい ConstantProvider クラスを接続する必要があります。基本クラスではなくカスタム ConstantProvider の新しいインスタンスを返すように、makeConstants_ 関数をオーバーライドします。
    3. PathObject や Drawer などの他のクラスをオーバーライドする場合も、同じプロセスに従ってください。

  3. レンダラを登録します。

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

  4. アプリケーションでレンダラを使用します。

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

組み込みレンダラ

Blockly には、事前に構築された複数のレンダラが用意されています。これらはそのまま使用することも、カスタム レンダラのベースとして使用することもできます。

  • geras（デフォルト）
  • thrasos（geras に対する現代風）
  • zelos（引っかくような）
  • minimalist（基本レンダラ クラス）

これらのレンダラのいずれかを使用するには、名前をインジェクション オプションに渡します。

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

それをサブクラス化するには、適切なクラスを拡張します。

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