연구 설문조사: Blockly 사용 경험을 알려주세요
설문조사 시작
렌더기 개념
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
맞춤 렌더기 빌드를 시작하기 전에 렌더기를 구성하는 다양한 구성요소와 블록이 행과 요소로 나뉘는 방식을 이해하면 도움이 됩니다.
렌더기 구성요소
렌더기는 여러 다양한 구성요소로 구성됩니다. 각 구성요소는 코드 재사용과 확장성을 극대화하는 고유한 작업을 수행합니다.
렌더기
렌더러는 다른 모든 구성요소를 함께 번들로 묶는 팩토리 클래스입니다.
상수 제공자
상수 제공자는 다른 모든 구성요소와 기본 제공 필드에서 사용하는 숫자와 도형의 모음입니다.
렌더링 정보
렌더링 정보는 정의에 따라 블록의 배치 방법을 결정하고 창에서 SVG 경로를 만드는 데 사용하는 블록에 관한 측정 가능 항목 및 데이터 모음을 만듭니다.
경로 객체
경로 객체에는 돔에 있고 블록을 구성하는 SVG 요소가 포함됩니다.
창
창('one-who-draws')은 렌더링 정보를 기반으로 SVG 경로를 빌드하고 경로 객체에 적용합니다.
측정 가능 항목 차단
측정 가능 영역은 블록의 영역을 나타내는 직사각형입니다. 측정 가능 항목은 렌더링 정보가 블록의 레이아웃을 정의하는 데 사용하는 항목입니다.
일부 측정 가능한 항목에는 추가 데이터 (예: 표현되는 시각적 대상) 또는 렌더링 정보가 블록 배치 방법을 파악하는 데 사용할 수 있는 도우미 메서드도 포함됩니다.
다양한 렌더러가 맞춤 측정 가능 항목을 만들어 이러한 데이터 또는 도우미 메서드를 변경할 수 있습니다.
행
행은 요소와 요소 스페이서의 가로 모음입니다.
행 스페이서
행 스페이서는 두 행 사이에 있는 빈 세로 공간입니다.
요소
요소는 블록 위의 시각적 항목을 나타냅니다. 여기에는 필드, 아이콘, 연결 등이 포함됩니다.
요소 스페이서
요소 스페이서는 행의 요소 사이에 들어가는 빈 공간입니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eBlockly renderers are comprised of several components (Renderer, Constant Provider, Render Info, Path Object, and Drawer) working together to display blocks.\u003c/p\u003e\n"],["\u003cp\u003eRenderers utilize "measurables" to define the layout of a block, which are rectangular regions representing different parts of the block.\u003c/p\u003e\n"],["\u003cp\u003eBlocks are visually structured using rows and elements, with spacers providing spacing between them for better organization.\u003c/p\u003e\n"],["\u003cp\u003eEach component of a renderer has a specific role, such as defining constants, laying out the block, creating SVG paths, and managing the SVG elements.\u003c/p\u003e\n"],["\u003cp\u003eCustom renderers can be built by extending or modifying these components and measurables for unique visual styles and behaviors.\u003c/p\u003e\n"]]],["A renderer is composed of several components: the **renderer** (factory class), **constant provider** (numbers/shapes), **render info** (layout decision-maker), **path object** (SVG elements), and **drawer** (SVG path builder). **Render info** uses **measurables** (block region rectangles) to define the block's layout. Blocks are structured into horizontal **rows** of **elements** (visual components) separated by **element spacers**, and rows are separated by **row spacers**.\n"],null,["# Renderer concepts\n\nBefore you start building a custom renderer, it is helpful to understand the\ndifferent components that make up a renderer, as well as how a block gets\nbroken up into rows and elements.\n\nRenderer components\n-------------------\n\nA renderer is built up of several different components. Each component has a\nunique job to maximize code reuse and extensibility.\n\n### Renderer\n\nThe [renderer](/blockly/guides/create-custom-blocks/renderers/concepts/renderer) is a factory class that bundles all of the other\ncomponents together.\n\n### Constant provider\n\nThe [constant provider](/blockly/guides/create-custom-blocks/renderers/concepts/constants) is a collection of numbers, and shapes used\nby all of the other components, as well as built-in fields.\n\n### Render info\n\nThe [render info](/blockly/guides/create-custom-blocks/renderers/concepts/info) decides how it a block should be laid out based\non its definition, and then creates a collection of\n[measurables](#block_measurables) and data about the block which the\n[drawer](/blockly/guides/create-custom-blocks/renderers/concepts/drawer) uses to create SVG paths.\n\n### Path Object\n\nThe [path object](/blockly/guides/create-custom-blocks/renderers/concepts/path-object) contains the SVG elements that live in the dom\nand make up the block.\n\n### Drawer\n\nThe [drawer](/blockly/guides/create-custom-blocks/renderers/concepts/drawer) (as in \"one-who-draws\") builds SVG [paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) based on\nthe [render info](/blockly/guides/create-custom-blocks/renderers/concepts/info) and applies them to the\n[path object](/blockly/guides/create-custom-blocks/renderers/concepts/path-object).\n\nBlock measurables\n-----------------\n\nA measurable is a rectangle representing a region of a block. Measurables are\nwhat the [render info](/blockly/guides/create-custom-blocks/renderers/concepts/info) uses to define the layout of the block.\n\nSome measurables also include extra data (such as the visual thing they are\nrepresenting), or helper methods that the render info can use to figure out how\nto lay out the block.\n\nDifferent renderers may create custom measurables to change these data or\nhelper methods.\n\n### Rows\n\nA [row](/blockly/guides/create-custom-blocks/renderers/concepts/rows) is a horizontal collection of [elements](/blockly/guides/create-custom-blocks/renderers/concepts/elements) and\n[element spacers](/blockly/guides/create-custom-blocks/renderers/concepts/elements#element_spacer).\n\n### Row spacers\n\nA [row spacer](/blockly/guides/create-custom-blocks/renderers/concepts/rows#row_spacer) is an empty vertical space that goes between two\nrows.\n\n### Elements\n\nAn [element](/blockly/guides/create-custom-blocks/renderers/concepts/elements) represents a visual thing on a block. These include\n[fields](/blockly/guides/create-custom-blocks/fields/overview), [icons](/blockly/guides/create-custom-blocks/icons/overview), connections, etc.\n\n### Element spacers\n\nAn [element spacer](/blockly/guides/create-custom-blocks/renderers/concepts/elements#element_spacer) is an empty space that goes between elements\nin a row."]]
