新しいレンダラを作成する

カスタム レンダラを作成するには、Renderer をサブクラス化する必要があります。 クラスです。詳しくは、レンダラのコンセプト ドキュメントをご覧ください。 レンダラの概要と機能について説明します

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

カスタマイズしない場合、デフォルトのレンダラは次のようになります。

ベースレンダラ

他の組み込みレンダラの 1 つをサブクラス化することもできます。 その一部をオーバーライドできます

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

他のレンダラ コンポーネントをサブクラス化する

ブロックの実際の形状は、 サブコンポーネントです。

デフォルトでは、Renderer クラスは、 すべてのレンダラ コンポーネント。これにより、 他のコンポーネントを気にする必要がなくなります。

たとえば 接続の形状を変更する場合、デフォルトの 他のコンポーネントに影響を与えずに呼び出すことができます。

詳しくは、レンダラ コンポーネントのドキュメントをご覧ください。 各コンポーネントが何をするかについての情報を 得ることができます

ファクトリ メソッドをオーバーライドする

レンダラ コンポーネントをサブクラス化したら、以下を行う必要があります。 設定するコンポーネントの Renderer のファクトリ メソッドをオーバーライドする 作成します。これにより、レンダラがさまざまなコンポーネントを適切に接続できるようになります。 説明します。

コンポーネントの種類ごとにメソッドがあります。

レンダラを登録する

最後に、カスタム レンダラの作成が完了したら、以下を行う必要があります。 登録します。これにより、レンダラが文字列に関連付けられ、その文字列を渡せるようになります。 インジェクション構成に追加します。

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

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