새 렌더기 만들기

참고: 렌더기 개념 문서를 읽지 않았다면 또는 앞서 살펴본 맞춤 렌더기 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',
});