研究调查问卷:请告诉我们您使用 Blockly 的体验
开始调查问卷
渲染程序概念
在开始构建自定义渲染程序之前,了解构成渲染程序的不同组件以及块如何拆分为行和元素会很有帮助。
渲染程序组件
渲染程序由几个不同的组件组成。每个组件都有一个唯一的作业,以最大限度地提高代码重用和可扩展性。
渲染程序
渲染程序是一个工厂类,用于将所有其他组件捆绑在一起。
常量提供程序
常量提供程序是所有其他组件使用的一系列数字和形状,以及内置字段。
渲染信息
渲染信息会根据块的定义决定该块的布局方式,然后创建可测量值和有关块的数据的集合,供抽屉用于创建 SVG 路径。
路径对象
path 对象包含位于 dom 中且构成块的 SVG 元素。
抽屉式导航栏
抽屉式导航栏(如“one-who-draws”中所示)会根据渲染信息构建 SVG 路径,并将其应用于路径对象。
屏蔽可衡量项
可衡量元素是一个矩形,表示某个块的区域。可衡量值是指“渲染信息”用于定义代码块布局的内容。
一些可衡量的内容还包括额外数据(例如它们所表示的视觉元素)或渲染信息可用于确定如何布局块的辅助方法。
不同的渲染程序可能会创建自定义测量结果来更改这些数据或辅助方法。
行
行是元素和元素分隔符的水平集合。
行分隔符
行分隔符是指两行之间的空白垂直空间。
元素
元素表示块上的可视内容。包括字段、图标、连接等。
元素分隔符
元素分隔符是一行元素之间的空白空间。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-12-02。
[null,null,["最后更新时间 (UTC):2023-12-02。"],[[["Blockly renderers are comprised of several components (Renderer, Constant Provider, Render Info, Path Object, and Drawer) working together to display blocks."],["Renderers utilize \"measurables\" to define the layout of a block, which are rectangular regions representing different parts of the block."],["Blocks are visually structured using rows and elements, with spacers providing spacing between them for better organization."],["Each component of a renderer has a specific role, such as defining constants, laying out the block, creating SVG paths, and managing the SVG elements."],["Custom renderers can be built by extending or modifying these components and measurables for unique visual styles and behaviors."]]],["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"]]