inBuilder 今日分享丨表单设计器画布渲染引擎揭秘

概述

浪潮海岳低代码开发平台 inBuidler 表单设计器是一种用于创建和定制表单的工具，它能够帮助用户轻松地设计和生成各种类型的表单，例如：调查问卷、信息管理列表等。

表单设计器中主要包含图形画布、控件工具箱、属性面板等部分，用户可以通过拖拽和修改控件来构建自定义表单。本篇文章将重点介绍图形画布的特性、渲染过程以及拖拽控制过程。

浪潮海岳低代码开发平台 inBuidler 表单设计器画布是一份基于 ES6 的纯 JavaScript 描述的渲染引擎，它使用简单的 JSON 结构来描述表单，根据 JSON 中描述的控件类型以及控件属性，获取对应的 HTML 模板，并转换成可视化的控件，并应用字体、颜色、间距等样式类属性、排版布局、点击事件等功能性属性。

表单设计器画布渲染引擎特性

渲染引擎具有以下特点：

1、易用性：inBuilder 表单设计器画布渲染引擎使用简单的 JSON 结构来描述表单，开发人员可以轻松的构建、组装表单。

2、灵活性：inBuilder 表单设计器画布渲染引擎提供了丰富的选项，可以在不同组件之间自由组合，不限制嵌套层级。

3、布局调整：根据设计要求，对表单控件进行拖拽式布局调整，包括位置、大小、间距等。

4、所见即所得：inBuilder 表单设计器画布渲染引擎具有动态渲染的特点，即当用户对表单元素或样式进行修改时，引擎能够实时响应并重新渲染页面，从而使用户可以即时预览设计效果并进行调整。

5、跨平台：inBuilder 表单设计器画布渲染引擎是基于 ES6 的 JavaScript 类工具，可以在不同浏览器、设备和操作系统上运行。

6、可扩展：根据不同的使用场景，表单中需要的控件类型也不同，例如适用于 PC 端的控件库和适用于移动端的控件库可以各自独立定义、打包，控件库开发完成后只需要向渲染引擎提供一份配置脚本即可。渲染引擎读取配置脚本即可加载不同种类的控件进而渲染出不同的表单。

表单设计器画布渲染过程

inBuilder 表单设计器画布渲染引擎是如何把表单 JSON 中的对象回显成可视化组件呢？这个过程中我们采取的方法是遍历表单 JSON，根据其中每个组件节点描述的类型属性，从 UI 组件库中找到对应组件定义，然后读取组件中的 HTML 模板来构建整个表单的布局、组件结构，并为每个组件添加相应的事件回调。

这个过程中的关键节点包括：

1、 创建页面实例：

整个渲染引擎的入口，它接收的参数包括：

• 画布根节点：需要将表单渲染到哪个 DOM 元素下面，它通常是一个 div 或者其他容器元素。

• 表单 JSON：描述表单结构的 JSON 对象，表单中每一个组件对应 JSON 中的一个对象，该组件的所有特性信息都存储在对象中，所以每次对表单的组件增删改操作都会应用到 JSON 对象上。

• UI 控件库：UI 控件库的描述列表，每个控件需要定义自己的 HTML 模板、属性编辑规则、拖拽控制方法、事件挂载方法等。

2、 收集子组件：

表单 JSON 中以“contents”属性标识子级控件，渲染引擎将读取每层 JSON 的“contents”节点，从而遍历整个 JSON，递归收集子组件。

3、 渲染 HTML 模板：

读取组件 JSON 对象，从 UI 库中找到对应的 HTML 模板，将其插入到指定的 DOM 元素中，并返回一个 Promise 对象。对于容器类组件，自动递归渲染所有的子组件，包括所有嵌套的组件。

4、 挂载模板方法：

为组件对应 DOM 节点添加事件处理函数，例如点击事件后的处理逻辑，容器类组件的收折逻辑、拖拽控制逻辑等。处理完成后发送表单渲染完成后事件，最终通知应用程序表单渲染完成。

inBuidler 表单设计器画布拖拽控制

inBuilder 表单设计器画布渲染过程中的 attach 方法除了挂载点击事件类的处理函数，还初始化了组件拖拽逻辑，并将所有可拖拽的布局容器添加到拖拽列表中。

inBuilder 表单设计器画布支持对控件进行拖拽式调整，它支持多个控件、容器之间水平、垂直方向的拖拽操作，同时也支持从画布外部拖入并创建控件。下图说明了用户从选择源组件到将源组件拖拽到目标位置的过程：

拖拽过程中的关键方法包括：

1、 canMove：判断源组件是否能够移动，UI 控件可以根据上下文环境自行判断。

2、 canAccepts：判断目标容器是否可以接收拖入的源组件，UI 控件可以根据目标区域所在上下文环境以及自身要求来自定义判断逻辑。

3、 onDrop：将控件拖拽到画布中或者调整画布中控件位置后触发的事件，用于在拖拽操作完成后执行一些自定义的逻辑。

总结

浪潮海岳低代码开发平台 inBuidler 表单设计器的画布渲染引擎使得用户可以快速、高效的设计、调整表单页面，并实时预览设计效果，极大提升了开发人员效率

若想解锁更多内容，可点击inBuilder社区，免费下载安装 inBuilder 开源社区版！