Renderujące

Mechanizm renderowania w Blockly kontroluje kształt bryły, w tym wysokość, dopełnienie, grubość obramowania i kształt połączenia.

Niestandardowe mechanizmy renderowania

Jeśli chcesz dostosować kształt bloków, musisz utworzyć niestandardowy mechanizm renderowania. Więcej informacji o tym procesie znajdziesz w ćwiczeniach z programowania lub w dokumentacji referencyjnej. Warto też przeczytać kod wbudowanych mechanizmów renderowania Blockly, aby zrozumieć, jak one działają.

Aby utworzyć niestandardowy mechanizm renderowania:

1. Zdefiniuj nowy mechanizm renderowania. W zależności od tego, od czego chcesz zacząć, możesz podklasyfikować podstawową klasę mechanizmu renderowania lub dowolny dotychczasowy mechanizm renderowania.
2. Zastąp fragmenty, które chcesz zmienić.
   1. Aby np. dodać więcej dopełnienia bloków, możesz podklasyfikować ConstantProvider (ponownie jako podstawowy lub dowolny istniejący mechanizm renderowania) i zastąpić odpowiednią stałą. Wszystkie inne wartości pozostaną takie same jak wybrana klasa bazowa.
   2. W niestandardowej podklasie Renderer musisz połączyć nową klasę ConstantProvider. Zastąp funkcję makeConstants_, aby zwrócić nową instancję niestandardowej klasy ConstantProvider zamiast klasy podstawowej.
   3. Wykonaj te same czynności, zastępując inne klasy, takie jak PathObject lub Drawer.

3. Zarejestruj mechanizm renderowania:

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

4. Użyj mechanizmu renderowania w aplikacji:

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

Wbudowane mechanizmy renderowania

Blockly udostępnia kilka gotowych mechanizmów renderowania. Można ich używać w postaci, w jakiej są, lub jako podstawy niestandardowego mechanizmu renderowania.

• geras (domyślnie)
• thrasos (nowoczesne podejście do gerab)
• zelos (podobne do Scratcha)
• minimalist (podstawowe klasy mechanizmu renderowania)

Aby użyć jednego z tych mechanizmów renderowania, przekaż jego nazwę do opcji wstrzykiwania:

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

Aby utworzyć podklasy, rozszerz odpowiednie klasy:

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