렌더기

블록의 모양은 블록의 정의 (즉, 블록의 필드와 연결)를 정의합니다.

기본 렌더기

Blockly는 세 가지 내장 렌더기를 제공하며, 각 렌더기는 프로그램에 대해 다른 느낌을 갖게 될 것입니다.

렌더기 설명 이미지
트라소스 권장되는 렌더기입니다. 이것은 geras 렌더기에 대한 현대적인 접근 방식을 보여주며 균일한 간격과 실선 테두리를 사용합니다. 트라소스
Geras 기본 렌더기입니다. 원래 렌더러입니다. 제라스
Zelos Scratch-3.0 블록 디자인에 기반한 렌더기 젤로스

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

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

맞춤 렌더기

기존의 그 어떤 프로그램보다도 다른 느낌의 프로그램을 만들고 싶다면 맞춤 렌더기를 생성할 수도 있습니다. 시작하려면 Blockly팀에서 추천하는 방법:

  1. 렌더기 개념 문서를 읽고 자세히 알아보기 함께 작동하는 방식을 이해하는 것이 중요합니다.
  2. 맞춤 렌더기 Codelab을 완료하여 다음 작업 수행 실무형 실습을 진행합니다
  3. 프로젝트에 디버그 렌더기를 추가합니다.
  4. 렌더기를 맞춤설정합니다.