블록의 모양은 블록의 정의 (즉, 필드와 연결)에 따라 렌더러가 결정합니다.
기본 제공 렌더기
Blockly는 세 가지 내장 렌더기를 제공하며, 각 렌더기는 프로그램에 약간 다른 느낌을 줍니다.
렌더기 | 설명 | 이미지 |
---|---|---|
스라소스 | 권장되는 렌더기입니다. 더 균일한 간격과 단색 테두리를 사용하여 geras 렌더기를 현대적으로 해석한 것입니다. | |
게라스 | 기본 렌더기입니다. Blockly를 만들 때 사용한 원래 렌더기입니다. | |
젤로스 | Scratch-3.0 블록 설계를 기반으로 하는 렌더러입니다. |
이러한 렌더러 중 하나를 사용하려면 이름을 삽입 옵션에 전달합니다.
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
맞춤 렌더기
프로그램에 기본 제공 렌더기와 다른 디자인을 적용하려면 맞춤 렌더기를 만들면 됩니다. 시작하기 전에 Blockly팀에서는 다음을 권장합니다.
- 렌더기 개념 문서를 살펴보고 렌더기의 모든 구성요소가 함께 작동하는 방식을 알아봅니다.
- 맞춤 렌더기 Codelab을 완료하여 맞춤 렌더링을 실제로 사용해 보세요.
- 프로젝트에 디버그 렌더러를 추가합니다.
- 렌더기를 맞춤설정합니다.