หากต้องการสร้างตัวแสดงผลที่กำหนดเอง คุณต้องคลาสย่อย 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',
});