رندرها

یک رندر در Blockly شکل یک بلوک را کنترل می کند، از جمله ارتفاع، بالشتک، ضخامت حاشیه و شکل اتصال.

رندرهای سفارشی

اگر می خواهید شکل بلوک ها را سفارشی کنید، باید یک رندر سفارشی ایجاد کنید. شما می توانید با تکمیل کد لبه یا مطالعه مستندات مرجع درباره این فرآیند اطلاعات بیشتری کسب کنید. خواندن کد هر یک از رندرهای داخلی Blockly برای درک نحوه عملکرد آنها ممکن است مفید باشد.

برای ایجاد یک رندر سفارشی، باید:

1. یک رندر جدید تعریف کنید. بسته به اینکه می‌خواهید از کجا شروع کنید، می‌توانید کلاس رندر پایه یا هر یک از رندرهای موجود را زیر کلاس قرار دهید.
2. بخش هایی را که می خواهید تغییر دهید لغو کنید.
   1. به عنوان مثال، برای افزودن padding بیشتر به بلوک‌ها، می‌توانید یک ConstantProvider (دوباره، پایه یا هر رندر موجود) را زیر کلاس قرار دهید و ثابت مربوطه را لغو کنید. تمام مقادیر دیگر مانند کلاس پایه انتخابی شما باقی خواهند ماند.
   2. در زیر کلاس Renderer سفارشی خود، باید کلاس ConstantProvider جدید را متصل کنید. تابع makeConstants_ را لغو کنید تا نمونه جدیدی از ConstantProvider سفارشی خود را به جای کلاس پایه بازگردانید.
   3. هنگام نادیده گرفتن کلاس های دیگر مانند PathObject یا Drawer ، همین روند را دنبال کنید.

3. رندر خود را ثبت کنید:

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

4. از رندر خود در برنامه خود استفاده کنید:

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

رندرهای داخلی

Blockly چندین رندر از پیش ساخته شده را ارائه می دهد. می‌توانید از اینها به‌صورتی که هست استفاده کنید یا می‌توانید از آنها به عنوان پایه یک رندر سفارشی استفاده کنید.

• geras (پیش‌فرض)
• thrasos (برداشت مدرن تر در مورد geras)
• zelos (خراش مانند)
• مینیمالیستی (کلاس های رندر پایه)

برای استفاده از یکی از این رندرها، نام را در گزینه های تزریق قرار دهید:

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

برای زیر کلاس کردن آنها، کلاس(های) مناسب را گسترش دهید:

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