맞춤 렌더기 만들기

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

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

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

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

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

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

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

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

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

예를 들어 연결의 도형을 변경하려면 다른 구성요소를 건드리지 않고도 상수를 재정의할 수 있습니다.

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

팩토리 메서드 재정의

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

구성요소의 종류마다 메서드가 있습니다.

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

렌더기 등록

마지막으로 맞춤 렌더러 생성을 완료하면 이를 등록해야 합니다. 이렇게 하면 렌더러를 문자열과 연결하여 구성 옵션에 전달할 수 있습니다.

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

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