Blockly 于 2025 年 11 月 10 日移至 Raspberry Pi Foundation!请阅读博文和常见问题解答。
Google uses AI technology to translate content into your preferred language. AI translations can contain errors.
渲染程序概念
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在开始构建自定义渲染程序之前,了解构成渲染程序的不同组件以及块如何拆分为行和元素会很有帮助。
渲染程序组件
渲染程序由几个不同的组件组成。每个组件都有一个唯一的作业,以最大限度地提高代码重用和可扩展性。
渲染程序
渲染程序是一个工厂类,用于将所有其他组件捆绑在一起。
常量提供程序
常量提供程序是所有其他组件使用的一系列数字和形状,以及内置字段。
渲染信息
渲染信息会根据块的定义决定该块的布局方式,然后创建可测量值和有关块的数据的集合,供抽屉用于创建 SVG 路径。
路径对象
path 对象包含位于 dom 中且构成块的 SVG 元素。
抽屉式导航栏
抽屉式导航栏(如“one-who-draws”中所示)会根据渲染信息构建 SVG 路径,并将其应用于路径对象。
屏蔽可衡量项
可衡量元素是一个矩形,表示某个块的区域。可衡量值是指“渲染信息”用于定义代码块布局的内容。
一些可衡量的内容还包括额外数据(例如它们所表示的视觉元素)或渲染信息可用于确定如何布局块的辅助方法。
不同的渲染程序可能会创建自定义测量结果来更改这些数据或辅助方法。
行
行是元素和元素分隔符的水平集合。
行分隔符
行分隔符是指两行之间的空白垂直空间。
元素
元素表示块上的可视内容。包括字段、图标、连接等。
元素分隔符
元素分隔符是一行元素之间的空白空间。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-07-25。"],[],["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"]]