렌더기

블록의 모양은 블록의 정의 (즉, 필드와 연결)에 따라 렌더러가 결정합니다.

기본 제공 렌더기

Blockly는 세 가지 내장 렌더기를 제공하며, 각 렌더기는 프로그램에 약간 다른 느낌을 줍니다.

렌더기 설명 이미지
스라소스 권장되는 렌더기입니다. 더 균일한 간격과 단색 테두리를 사용하여 geras 렌더기를 현대적으로 해석한 것입니다. Thrasos
게라스 기본 렌더기입니다. Blockly를 만들 때 사용한 원래 렌더기입니다. 게라스
젤로스 Scratch-3.0 블록 설계를 기반으로 하는 렌더러입니다. 젤로스

이러한 렌더러 중 하나를 사용하려면 이름을 삽입 옵션에 전달합니다.

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

맞춤 렌더기

프로그램에 기본 제공 렌더기와 다른 디자인을 적용하려면 맞춤 렌더기를 만들면 됩니다. 시작하기 전에 Blockly팀에서는 다음을 권장합니다.

  1. 렌더기 개념 문서를 살펴보고 렌더기의 모든 구성요소가 함께 작동하는 방식을 알아봅니다.
  2. 맞춤 렌더기 Codelab을 완료하여 맞춤 렌더링을 실제로 사용해 보세요.
  3. 프로젝트에 디버그 렌더러를 추가합니다.
  4. 렌더기를 맞춤설정합니다.