从零实现Dooring低代码印章组件

今天继续和大家分享一下比较有意思的可视化印章组件的实现.,,你将收获,我们都知道任何低代码或者零代码搭建产品都非常注重底层搭建协议(schema), 这些产品通常会设计一套向上兼容且可扩展的 DSL 结构, 来实现页面元件的标准化配置, 并支持元件的向上扩展:,,在设计 H5-Dooring​ 可视化搭建平台前, 我也参考了很多标准化软件数据协议, 给我启发最大的就是 ODATA 规范, 具体设计细节可以参考我之前的文章:,之所以要介绍低代码的 schema​ 设计, 是因为低代码组件的设计与开发需要依赖 schema 的定义, 为了满足低代码组件能被用户实时编辑, 其基本的组成类似如下:,,我们只需要在写普通组件的基础上加一个 schema 文件即可, 这里以Dooring组件来举一个例子:,在初步了解了低代码组件的设计模式之后, 我们接下来就来实现一下低代码印章组件的实现.,,我们由上图可以看出, 一个印章组件包含如下几个部分:,,对于印章的绘制, 我们可以采用 canvas​ 或者 svg​ 来实现, 这里我采用 canvas 来实现, 首先我们需要定义组件可以对外暴露的属性, 以便在低代码平台中可以让用户来自定义, 这里我直接列出基本的配置:,,接下来我们就来实现一下吧!,1. 绘制印章边框,由上面代码可知我们用 canvas​ 的 arc 方法来创建一个圆形边框.,2. 绘制五角星,创建一个五角星形状. 该五角星的中心坐标为(x0, y0),中心到顶点的距离为 radius​, rotate=0 时一个顶点在对称轴上,3. 绘制印章名称,4. 绘制环形印章单位,在基本的印章实现之后, 我们来接收属性配置:,,对于低代码的 schema​ 配置, 这里以 H5-Dooring 的组件为例, 给大家分享一下:,在上面的分析实现中我们可以发现, 只需要把普通组件按照属性对外暴露出来, 并按照 Dooring​ 的 schema 定义模式来描述出来, 普通组件就可以立马变成低代码组件, 并自动生成组件配置面板:,,具体的 schema 描述我在文档中做了详细的介绍, 大家感兴趣可以参考一下:,​ ​