สร้างโหมดแสดงภาพใหม่

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