یک رندر جدید ایجاد کنید

برای ایجاد یک رندر سفارشی، باید کلاس Renderer زیر کلاس قرار دهید. برای اطلاعات بیشتر در مورد اینکه رندر چیست و چه کاری انجام می دهد، به اسناد مفهومی رندر مراجعه کنید.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

بدون هیچ گونه سفارشی سازی، رندر پیش فرض به صورت زیر است:

رندر پایه

همچنین می‌توانید یکی از رندرهای داخلی دیگر را زیرکلاس کنید و سپس بخش‌هایی از آن را لغو کنید.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

سایر اجزای رندرگر را زیر کلاس قرار دهید

شکل واقعی بلوک توسط مولفه های فرعی رندر تعیین می شود.

به طور پیش‌فرض، کلاس Renderer نسخه‌های کاری تمام اجزای رندر را ارائه می‌کند. این به شما این امکان را می دهد که یک جزء را بدون نگرانی در مورد بقیه تغییر دهید.

برای مثال، اگر می‌خواهید شکل اتصالات را تغییر دهید ، می‌توانید ثابت‌ها را بدون نیاز به لمس اجزای دیگر لغو کنید.

برای اطلاعات بیشتر در مورد کارهایی که هر جزء جداگانه انجام می دهد ، اسناد مؤلفه رندر را بررسی کنید.

نادیده گرفتن روش های کارخانه

پس از زیر کلاس‌بندی اجزای رندر ، باید روش‌های کارخانه‌ای Renderer را برای اجزایی که زیر کلاس‌بندی کرده‌اید لغو کنید. این به رندر اجازه می دهد تا اجزای مختلف را به درستی به هم متصل کند.

برای هر نوع جزء روشی وجود دارد:

makeConstants_
makeRenderInfo_
makePathObject (توجه داشته باشید که زیرخط وجود ندارد)
makeDrawer_

رندر را ثبت کنید

در نهایت، هنگامی که ایجاد رندر سفارشی خود را کامل کردید، باید آن را ثبت کنید. این رندر را با یک رشته مرتبط می کند تا بتوانید آن را به پیکربندی تزریق خود منتقل کنید.

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

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

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

بدون هیچ گونه سفارشی سازی، رندر پیش فرض به صورت زیر است:

رندر پایه

همچنین می‌توانید یکی از رندرهای داخلی دیگر را زیرکلاس کنید و سپس بخش‌هایی از آن را لغو کنید.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

سایر اجزای رندرگر را زیر کلاس قرار دهید

شکل واقعی بلوک توسط مولفه های فرعی رندر تعیین می شود.

برای اطلاعات بیشتر در مورد کارهایی که هر جزء جداگانه انجام می دهد ، اسناد مؤلفه رندر را بررسی کنید.

نادیده گرفتن روش های کارخانه

برای هر نوع جزء روشی وجود دارد:

makeConstants_
makeRenderInfo_
makePathObject (توجه داشته باشید که زیرخط وجود ندارد)
makeDrawer_

رندر را ثبت کنید

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

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