Oluşturucular

Blockly'deki oluşturucu; yükseklik, dolgu, kenarlık kalınlığı ve bağlantı şekli dahil olmak üzere bir bloğun şeklini kontrol eder.

Özel oluşturucular

Blokların şeklini özelleştirmek istiyorsanız özel bir oluşturucu oluşturmanız gerekir. codelab'i tamamlayarak veya referans belgelerini okuyarak bu süreç hakkında daha fazla bilgi edinebilirsiniz. Blokly'nin yerleşik oluşturucularının kodunu okumak, bunların nasıl çalıştığını anlamak için yararlı olabilir.

Özel oluşturucu oluşturmak için yapmanız gerekenler:

  1. Yeni bir oluşturucu tanımlayın. Nereden başlamak istediğinize bağlı olarak temel oluşturucu sınıfını veya mevcut oluşturuculardan herhangi birini alt sınıflandırma yapabilirsiniz.
  2. Değiştirmek istediğiniz bölümleri geçersiz kılın.
    1. Örneğin, bloklara daha fazla dolgu eklemek için bir ConstantProvider öğesini (yine temel veya mevcut herhangi bir oluşturucu) alt sınıflandırabilir ve ilgili sabit değeri geçersiz kılabilirsiniz. Diğer tüm değerler, seçtiğiniz temel sınıfla aynı kalır.
    2. Özel Renderer alt sınıfınızda yeni ConstantProvider sınıfını bağlamanız gerekir. Temel sınıf yerine özel ConstantProvider öğenizin yeni bir örneğini döndürmek için makeConstants_ işlevini geçersiz kılın.
    3. PathObject veya Drawer gibi diğer sınıfları geçersiz kılarken de aynı süreci uygulayın.

  3. Oluşturucunuzu kaydedin:

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

  4. Uygulamanızda oluşturucunuzu kullanın:

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

Yerleşik oluşturucular

Blockly, önceden oluşturulmuş birçok oluşturucu sağlar. Bunları olduğu gibi kullanabilir veya özel bir oluşturucunun temeli olarak kullanabilirsiniz.

Bu oluşturuculardan birini kullanmak için adı ekleme seçeneklerine geçirin:

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

Bunları alt sınıflandırmak için uygun sınıfları genişletin:

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