Рендереры

Средство визуализации в Blockly управляет формой блока, включая высоту, отступы, толщину границы и форму соединения.

Пользовательские средства визуализации

Если вы хотите настроить форму блоков, вам нужно будет создать собственный рендерер. Вы можете узнать больше об этом процессе, пройдя кодовую лабораторию или прочитав справочную документацию . Возможно, будет полезно прочитать код любого из встроенных средств визуализации Blockly, чтобы понять, как они работают.

Чтобы создать собственный рендерер, вам необходимо:

  1. Определите новый рендерер. Вы можете создать подкласс либо базового класса средства визуализации , либо любого из существующих средств визуализации, в зависимости от того, с чего вы хотите начать.
  2. Отмените те части, которые вы хотите изменить.
    1. Например, чтобы добавить дополнительные отступы к блокам, вы можете создать подкласс ConstantProvider (опять же, либо базовый, либо любой существующий модуль рендеринга) и переопределить соответствующую константу. Все остальные значения останутся такими же, как выбранный вами базовый класс.
    2. В вашем пользовательском подклассе Renderer вам необходимо подключить новый класс ConstantProvider . Переопределите функцию makeConstants_ , чтобы она возвращала новый экземпляр вашего пользовательского ConstantProvider вместо базового класса.
    3. Выполните тот же процесс при переопределении других классов, таких как PathObject или Drawer .

  3. Зарегистрируйте свой рендерер:

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

  4. Используйте свой рендерер в своем приложении: 

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

Встроенные рендереры

Blockly предоставляет несколько готовых средств визуализации. Вы можете использовать их как есть или использовать в качестве основы для собственного средства визуализации.

Чтобы использовать один из этих рендереров, передайте имя в параметры внедрения:

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

Чтобы подклассифицировать их, расширите соответствующий класс(ы):

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