Trình kết xuất

Trình kết xuất trong Blockly kiểm soát hình dạng của một khối, bao gồm chiều cao, khoảng đệm, độ dày đường viền và hình dạng kết nối.

Trình kết xuất tuỳ chỉnh

Nếu muốn tuỳ chỉnh hình dạng của các khối, bạn cần tạo một trình kết xuất tuỳ chỉnh. Bạn có thể tìm hiểu thêm về quy trình này bằng cách hoàn thành lớp học lập trình hoặc đọc tài liệu tham khảo. Bạn nên đọc mã này cho bất kỳ trình kết xuất tích hợp nào của Blockly để hiểu cách hoạt động của các trình kết xuất này.

Để tạo một trình kết xuất tuỳ chỉnh, bạn cần phải:

  1. Xác định trình kết xuất mới. Bạn có thể phân lớp con lớp trình kết xuất cơ sở hoặc bất kỳ trình kết xuất hiện có nào tuỳ thuộc vào nơi bạn muốn bắt đầu.
  2. Ghi đè những phần bạn muốn thay đổi.
    1. Ví dụ: để thêm nhiều khoảng đệm vào các khối, bạn có thể thêm lớp con ConstantProvider (một lần nữa là trình kết xuất cơ sở hoặc bất kỳ trình kết xuất nào hiện có) và ghi đè hằng số có liên quan. Tất cả các giá trị khác sẽ vẫn giữ nguyên với lớp cơ sở mà bạn đã chọn.
    2. Trong lớp con Renderer tuỳ chỉnh, bạn cần kết nối lớp ConstantProvider mới. Ghi đè hàm makeConstants_ để trả về một thực thể mới của ConstantProvider tuỳ chỉnh thay vì lớp cơ sở.
    3. Hãy làm theo quy trình tương tự khi ghi đè các lớp khác như PathObject hoặc Drawer.

  3. Đăng ký trình kết xuất đồ hoạ của bạn:

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

  4. Sử dụng trình kết xuất đồ hoạ trong ứng dụng của bạn:

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

Trình kết xuất tích hợp sẵn

Blockly cung cấp một số trình kết xuất đồ hoạ được tạo sẵn. Bạn có thể sử dụng các đối tượng này nguyên trạng hoặc sử dụng làm cơ sở của trình kết xuất tuỳ chỉnh.

  • geras (mặc định)
  • throse (góc nhìn hiện đại hơn về geras)
  • zelos (Tương tự như vết xước)
  • minimalist (các lớp kết xuất đồ hoạ cơ sở)

Để sử dụng một trong các trình kết xuất đồ hoạ này, hãy chuyển tên vào các tuỳ chọn chèn:

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

Để thêm các lớp con, hãy mở rộng(các) lớp thích hợp:

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