नया रेंडरर बनाएं

ध्यान दें: अगर आपने रेंडरर कॉन्सेप्ट से जुड़े दस्तावेज़ नहीं पढ़े हैं या कस्टम रेंडरर कोडलैब को पूरा नहीं किया है, तो हमारा सुझाव है कि आप पहले उन्हें बनाएं!

पसंद के मुताबिक रेंडरर बनाने के लिए, आपको Renderer क्लास को सब-क्लास करना होगा. रेंडरर क्या है और वह क्या करता है, इस बारे में ज़्यादा जानकारी के लिए रेंडर कॉन्सेप्ट से जुड़े दस्तावेज़ देखें.

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

किसी भी कस्टमाइज़ेशन के बिना, डिफ़ॉल्ट रेंडरर ऐसा दिखता है:

पहले से मौजूद रेंडरर में से किसी एक को सब-क्लास भी किया जा सकता है और उसके हिस्सों को बदला जा सकता है.

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

रेंडर करने वाले अन्य कॉम्पोनेंट को सब-क्लास

ब्लॉक का असल आकार, रेंडरर के सबकॉम्पोनेंट से तय होता है.

डिफ़ॉल्ट रूप से, Renderer क्लास, सभी रेंडर कॉम्पोनेंट के काम करने वाले वर्शन उपलब्ध कराती है. इससे आपको दूसरे कॉम्पोनेंट की चिंता किए बिना, एक ही कॉम्पोनेंट में बदलाव करने में मदद मिलती है.

उदाहरण के लिए, अगर आपको कनेक्शन के आकार बदलना है, तो दूसरे कॉम्पोनेंट को छुए बिना constants को बदला जा सकता है.

हर कॉम्पोनेंट क्या करता है, इस बारे में ज़्यादा जानकारी के लिए रेंडरर कॉम्पोनेंट दस्तावेज़ देखें.

फ़ैक्ट्री के तरीके बदलें

रेंडरर कॉम्पोनेंट को सब-क्लास करने के बाद, आपको सब-क्लास किए गए कॉम्पोनेंट के लिए, Renderer के फ़ैक्ट्री तरीकों को बदलना होगा. इससे रेंडरर, अलग-अलग कॉम्पोनेंट को एक साथ ठीक से तार कर देता है.

हर तरह के कॉम्पोनेंट के लिए एक तरीका है:

• makeConstants_
• makeRenderInfo_
• makePathObject (ध्यान दें कि कोई अंडरस्कोर नहीं है)
• makeDrawer_

रेंडर करने वाले को रजिस्टर करें

कस्टम रेंडरर बनाने के बाद, आपको उसे रजिस्टर करना होगा. यह रेंडरर को एक स्ट्रिंग से जोड़ता है, ताकि आप उसे अपने इंजेक्शन कॉन्फ़िगरेशन पर भेज सकें.

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

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