研究调查问卷:请告诉我们您使用 Blockly 的体验
开始调查问卷
渲染程序概念
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在开始构建自定义渲染程序之前,了解构成渲染程序的不同组件以及块如何拆分为行和元素会很有帮助。
渲染程序组件
渲染程序由几个不同的组件组成。每个组件都有一个唯一的作业,以最大限度地提高代码重用和可扩展性。
渲染程序
渲染程序是一个工厂类,用于将所有其他组件捆绑在一起。
常量提供程序
常量提供程序是所有其他组件使用的一系列数字和形状,以及内置字段。
渲染信息
渲染信息会根据块的定义决定该块的布局方式,然后创建可测量值和有关块的数据的集合,供抽屉用于创建 SVG 路径。
路径对象
path 对象包含位于 dom 中且构成块的 SVG 元素。
抽屉式导航栏
抽屉式导航栏(如“one-who-draws”中所示)会根据渲染信息构建 SVG 路径,并将其应用于路径对象。
屏蔽可衡量项
可衡量元素是一个矩形,表示某个块的区域。可衡量值是指“渲染信息”用于定义代码块布局的内容。
一些可衡量的内容还包括额外数据(例如它们所表示的视觉元素)或渲染信息可用于确定如何布局块的辅助方法。
不同的渲染程序可能会创建自定义测量结果来更改这些数据或辅助方法。
行
行是元素和元素分隔符的水平集合。
行分隔符
行分隔符是指两行之间的空白垂直空间。
元素
元素表示块上的可视内容。包括字段、图标、连接等。
元素分隔符
元素分隔符是一行元素之间的空白空间。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\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."]]