Renderizadores

Um renderizador no Blockly controla a forma de um bloco, incluindo altura, padding, espessura da borda e forma da conexão.

Renderizadores personalizados

Caso queira personalizar a forma dos blocos, crie um renderizador personalizado. Para saber mais sobre esse processo, conclua o codelab ou leia a documentação de referência. Pode ser útil ler o código de qualquer um dos renderizadores integrados do Blockly para entender como eles funcionam.

Para criar um renderizador personalizado, você precisa:

1. Define um novo renderizador. Você pode criar subclasses da classe de renderizador base ou de qualquer um dos renderizadores existentes, dependendo de onde quer começar.
2. Substitua as partes que você quer alterar.
   1. Por exemplo, para adicionar mais padding aos blocos, você pode criar uma subclasse ConstantProvider (novamente, o renderizador base ou existente) e substituir a constante relevante. Todos os outros valores permanecerão os mesmos da classe base escolhida.
   2. Na subclasse Renderer personalizada, é necessário vincular a nova classe ConstantProvider. Substitua a função makeConstants_ para retornar uma nova instância da sua ConstantProvider personalizada em vez da classe base.
   3. Siga o mesmo processo ao substituir outras classes, como PathObject ou Drawer.

3. Registre seu renderizador:

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

4. Use o renderizador no seu aplicativo:

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

Renderizadores integrados

O Blockly fornece vários renderizadores pré-criados. Você pode usá-los no estado em que se encontram ou como base de um renderizador personalizado.

• geras (padrão)
• thrasos (versão mais moderna de geras)
• zelos (semelhante a um rascunho)
• minimalist (as classes de renderizador base)

Para usar um desses renderizadores, transmita o nome para as opções de injeção:

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

Para criar subclasses, estenda as classes apropriadas:

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