ตัวแสดงผล

โหมดแสดงภาพใน Blockly จะควบคุมรูปร่างของบล็อก ซึ่งรวมถึงความสูง, ระยะห่างจากขอบ, ความหนาของเส้นขอบ และรูปร่างเส้นเชื่อมต่อ

โหมดแสดงภาพที่กำหนดเอง

หากต้องการปรับแต่งรูปร่างของบล็อก คุณจะต้องสร้างตัวแสดงผลที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับกระบวนการนี้ได้โดยกรอก Codelab หรืออ่านเอกสารอ้างอิง การอ่านโค้ดสำหรับโหมดแสดงภาพในตัวของ Blockly จะช่วยให้เข้าใจวิธีการทำงานของโค้ด

หากต้องการสร้างตัวแสดงผลที่กำหนดเอง คุณจะต้องทำดังนี้

1. กำหนดตัวแสดงผลใหม่ คุณจะคลาสย่อยคลาสการแสดงผลพื้นฐานหรือตัวแสดงผลที่มีอยู่ก็ได้โดยขึ้นอยู่กับตำแหน่งที่คุณต้องการเริ่มต้น
2. ลบล้างส่วนที่ต้องการเปลี่ยน
   1. เช่น หากต้องการเพิ่มระยะห่างจากขอบในบล็อก คุณสามารถคลาสย่อย 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 (เหมือนรอยขีด)
• minimalist (คลาสโหมดแสดงภาพพื้นฐาน)

หากต้องการใช้ตัวแสดงผลแบบใดแบบหนึ่งต่อไปนี้ ให้ส่งชื่อไปยังตัวเลือกการแทรก

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

หากต้องการจัดคลาสย่อย ให้ขยายคลาสที่เหมาะสม:

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