새 렌더기 만들기

참고: 렌더러 개념 문서를 읽지 않았거나 맞춤 렌더기 Codelab을 완료하지 않았다면 먼저 읽어보는 것이 좋습니다.

맞춤 렌더기를 만들려면 Renderer 클래스의 서브클래스를 만들어야 합니다. 렌더기의 정의와 기능에 대한 자세한 내용은 렌더러 개념 문서를 참조하세요.

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

맞춤설정하지 않으면 기본 렌더기는 다음과 같이 표시됩니다.

다른 기본 제공 렌더기 중 하나를 서브클래스로 분류한 다음 그 일부를 재정의할 수도 있습니다.

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

다른 렌더기 구성요소의 서브클래스화

블록의 실제 모양은 렌더기의 하위 구성요소에 의해 결정됩니다.

기본적으로 Renderer 클래스는 모든 렌더러 구성요소의 작동하는 버전을 제공합니다. 이렇게 하면 다른 구성요소를 신경 쓰지 않고도 하나의 구성요소를 수정할 수 있습니다.

예를 들어 연결 모양을 변경하려는 경우 다른 구성요소를 터치하지 않고도 constants를 재정의할 수 있습니다.

각 개별 구성요소의 기능에 관한 자세한 내용은 렌더러 구성요소 문서를 참고하세요.

팩토리 메서드 재정의

렌더러 구성요소를 서브클래스로 분류한 후에는 서브클래스로 분류한 구성요소의 Renderer의 팩토리 메서드를 재정의해야 합니다. 이렇게 하면 렌더러가 여러 구성요소를 적절하게 연결할 수 있습니다.

구성요소의 각 유형에는 다음과 같은 메서드가 있습니다.

• makeConstants_
• makeRenderInfo_
• makePathObject (밑줄이 없음)
• makeDrawer_

렌더기 등록

마지막으로 맞춤 렌더기 생성을 완료한 후에는 이를 등록해야 합니다. 이렇게 하면 렌더러가 문자열과 연결되어 삽입 구성에 전달할 수 있습니다.

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

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