Tạo trình kết xuất mới

Để tạo một trình kết xuất tuỳ chỉnh, bạn cần phải phân lớp con Renderer . Hãy tham khảo tài liệu về khái niệm về trình kết xuất để biết thêm thông tin thông tin về trình kết xuất là gì và chức năng của trình kết xuất đó.

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

Nếu không có bất kỳ hoạt động tuỳ chỉnh nào, trình kết xuất mặc định sẽ có dạng như sau:

trình kết xuất đồ hoạ cơ sở

Bạn cũng có thể thêm lớp con cho một trong những trình kết xuất tích hợp sẵn khác rồi ghi đè các phần của tài sản đó.

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

Lớp con các thành phần kết xuất đồ hoạ khác

Hình dạng thực tế của khối được xác định bởi các thành phần phụ của trình kết xuất.

Theo mặc định, lớp Renderer cung cấp các phiên bản hoạt động của tất cả thành phần trình kết xuất. Điều này cho phép bạn sửa đổi thành phần duy nhất, mà không phải lo lắng về những thành phần khác.

Ví dụ: nếu bạn muốn thay đổi hình dạng của các kết nối, bạn có thể ghi đè hằng số mà không cần phải chạm đến các thành phần khác.

Hãy xem tài liệu về thành phần kết xuất để biết thêm thông tin thông tin về chức năng của từng thành phần riêng lẻ.

Ghi đè phương thức ban đầu

Sau khi phân lớp con cho các thành phần trình kết xuất, bạn cần ghi đè phương thức ban đầu của Renderer cho các thành phần mà bạn phân lớp con. Điều này cho phép trình kết xuất kết nối đúng cách các thành phần khác nhau khi kết hợp cùng nhau.

Có một phương thức cho mỗi loại thành phần:

Đăng ký trình kết xuất

Cuối cùng, khi bạn đã hoàn tất việc tạo trình kết xuất tuỳ chỉnh, bạn cần hãy đăng ký tên đó. Thao tác này sẽ liên kết trình kết xuất với một chuỗi để bạn có thể truyền trình kết xuất đó cho cấu hình chèn.

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

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