カスタム レンダラを作成するには、Renderer
クラスをサブクラス化する必要があります。レンダラとその機能について詳しくは、レンダラのコンセプトに関するドキュメントをご覧ください。
class CustomRenderer extends Blockly.blockRendering.Renderer {
constructor() {
super();
}
}
カスタマイズしない場合、デフォルトのレンダラは次のようになります。
他の組み込みレンダラのいずれかをサブクラス化して、その一部をオーバーライドすることもできます。
class CustomRenderer extends Blockly.thrasos.Renderer {
constructor() {
super();
}
}
他のレンダラ コンポーネントをサブクラス化する
ブロックの実際の形状は、レンダラのサブコンポーネントによって決まります。
デフォルトでは、Renderer
クラスはすべてのレンダラ コンポーネントの作業バージョンを提供します。これにより、他の要素を気にすることなく、1 つのコンポーネントを変更できます。
たとえば、接続の形状を変更する場合は、他のコンポーネントを変更することなく、constantsをオーバーライドできます。
各コンポーネントの動作の詳細については、レンダラ コンポーネントのドキュメントをご覧ください。
ファクトリ メソッドをオーバーライドする
レンダラ コンポーネントをサブクラス化した後、サブクラス化したコンポーネントについて、Renderer
のファクトリ メソッドをオーバーライドする必要があります。これにより、レンダラはさまざまなコンポーネントを適切に接続できます。
コンポーネントの種類ごとにメソッドがあります。
makeConstants_
makeRenderInfo_
makePathObject
(アンダースコアは含まれません)makeDrawer_
レンダラを登録する
カスタム レンダラの作成が完了したら、最後に登録する必要があります。これにより、レンダラが文字列に関連付けられ、インジェクション構成に渡せるようになります。
Blockly.blockRendering.register('custom_renderer', CustomRenderer);
const workspace = Blockly.inject(blocklyDiv, {
renderer: 'custom_renderer',
});