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

来源：程序员客栈时间：2023-01-09 19:55:43

上一篇文章和大家分享了低代码平台组件间通信方案的几种实现:

低代码平台组件间通信方案复盘

今天继续和大家分享一下比较有意思的可视化印章组件的实现.

你将收获低代码组件的基本设计模式印章组件的设计原理(canvas相关)如何快速将任意组件集成到低代码平台正文低代码组件的基本设计模式

我们都知道任何低代码或者零代码搭建产品都非常注重底层搭建协议(schema), 这些产品通常会设计一套向上兼容且可扩展的 DSL结构, 来实现页面元件的标准化配置, 并支持元件的向上扩展:

(资料图片)

在设计 H5-Dooring可视化搭建平台前, 我也参考了很多标准化软件数据协议, 给我启发最大的就是 ODATA规范, 具体设计细节可以参考我之前的文章:

Dooring无代码搭建平台技术演进之路

之所以要介绍低代码的 schema设计, 是因为低代码组件的设计与开发需要依赖 schema的定义, 为了满足低代码组件能被用户实时编辑, 其基本的组成类似如下:

我们只需要在写普通组件的基础上加一个 schema文件即可, 这里以Dooring组件来举一个例子:

//组件代码tsximportstylesfrom"./index.less";importReact,{memo,useState}from"react";import{IHeaderConfig}from"./schema";constHeader=memo((props:IHeaderConfig)=>{const{cpName,bgColor,logo,height}=props;return(H5-dooring

);});exportdefaultHeader;//组件样式.header{box-sizing:content-box;padding:3px12px;background-color:#000;.logo{max-width:160px;overflow:hidden;img{height:100%;object-fit:contain;}}}//组件schemaconstHeader={editData:[...baseConfig,{key:"bgColor",name:背景色,type:"Color",},{key:"height",name:高,type:"Number",},{key:"logo",name:"logo",type:"Upload",isCrop:false,cropRate:1000/618,}],config:{...baseDefault,bgColor:"rgba(245,245,245,1)",logo:[{uid:"001",name:"image.png",status:"done",url:"http://cdn.dooring.cn/dr/logo.ff7fc6bb.png",},],height:50,},};exportdefaultHeader;

在初步了解了低代码组件的设计模式之后, 我们接下来就来实现一下低代码印章组件的实现.

印章组件的设计原理

我们由上图可以看出, 一个印章组件包含如下几个部分:

对于印章的绘制, 我们可以采用 canvas或者 svg来实现, 这里我采用 canvas来实现, 首先我们需要定义组件可以对外暴露的属性, 以便在低代码平台中可以让用户来自定义, 这里我直接列出基本的配置:

接下来我们就来实现一下吧!

1. 绘制印章边框

letcanvas=dom;letcontext=canvas.getContext("2d")asany;//初始化canvas.width=w0;canvas.height=w0;//绘制印章边框letwidth=canvas.width/2;letheight=canvas.height/2;context.lineWidth=lineWidth;context.strokeStyle=color;context.beginPath();context.arc(width,height,width-lineWidth,0,Math.PI*2);context.stroke();

由上面代码可知我们用 canvas的 arc方法来创建一个圆形边框.

2. 绘制五角星

创建一个五角星形状. 该五角星的中心坐标为(x0, y0),中心到顶点的距离为 radius, rotate=0时一个顶点在对称轴上

functioncreate5star(context:any,sx:number,sy:number,radius:number,color:string,rotato:number){context.save();context.fillStyle=color;//移动坐标原点context.translate(sx,sy);//旋转context.rotate(Math.PI+rotato);//创建路径context.beginPath();letx=Math.sin(0);lety=Math.cos(0);letdig=Math.PI/5*4;for(leti=0;i<5;i++){//画五角星的五条边letx=Math.sin(i*dig);lety=Math.cos(i*dig);context.lineTo(x*radius,y*radius);}context.closePath();context.stroke();context.fill();context.restore();}

3. 绘制印章名称

context.font=`${fontSize}pxHelvetica`;//设置文本的垂直对齐方式context.textBaseline="middle";//设置文本的水平对对齐方式context.textAlign="center";context.lineWidth=1;context.fillStyle=color;context.fillText(name,width,height+60);

4. 绘制环形印章单位

//平移到此位置context.translate(width,height);context.font=`${componySize}pxHelvetica`letcount=company.length;//字数letangle=4*Math.PI/(3*(count-1));//字间角度letchars=company.split("");letc;for(leti=0;i
在基本的印章实现之后, 我们来接收属性配置:
对于低代码的 schema配置, 这里以 H5-Dooring的组件为例, 给大家分享一下:
import{IColorConfigType,IDataListConfigType,INumberConfigType,ISelectConfigType,TColorDefaultType,ISwitchConfigType,ITextConfigType,TNumberDefaultType,TTextDefaultType,}from"@/core/FormComponents/types";import{ICommonBaseType,baseConfig,baseDefault}from"../../common";importintlfrom"@/utils/intl";constt=intl();exporttypeTTextSelectKeyType="left"|"right"|"center";exporttypeTTextPosSelectKeyType="bottom"|"top";exporttypeTTextFormatSelectKeyType="CODE128"|"pharmacode"exporttypeTListEditData=Array|ISelectConfigType|ISelectConfigType|ISwitchConfigType|ITextConfigType>;exportinterfaceIListConfigextendsICommonBaseType{width:TNumberDefaultType;compony:TTextDefaultType;componySize:TNumberDefaultType;text:TTextDefaultType;fontSize:TNumberDefaultType;color:TColorDefaultType;lineWidth:TNumberDefaultType;opacity:TNumberDefaultType;}exportinterfaceIListSchema{editData:TListEditData;config:IListConfig;}constList:IListSchema={editData:[...baseConfig,{key:"width",name:t("dr.attr.sealSize"),type:"Number",},{key:"compony",name:t("dr.attr.componyName"),type:"Text",},{key:"componySize",name:t("dr.attr.componySize"),type:"Number",},{key:"text",name:t("dr.attr.sealUnit"),type:"Text",},{key:"fontSize",name:t("dr.attr.fontSize"),type:"Number",},{key:"color",name:t("dr.attr.color"),type:"Color",},{key:"lineWidth",name:t("dr.attr.lineWidth"),type:"Number",},{key:"opacity",name:t("dr.attr.opacity"),type:"Number",},],config:{...baseDefault,cpName:"Seal",width:180,compony:"Dooring零代码搭建平台",componySize:18,text:"H5-Dooring",fontSize:14,color:"rgba(240,0,0,1)",lineWidth:6,opacity:100},};exportdefaultList;
快速将任意组件集成到低代码平台在上面的分析实现中我们可以发现, 只需要把普通组件按照属性对外暴露出来, 并按照 Dooring的 schema定义模式来描述出来, 普通组件就可以立马变成低代码组件, 并自动生成组件配置面板:
具体的 schema描述我在文档中做了详细的介绍, 大家感兴趣可以参考一下:
总结后续我会继续和大家分享一下 H5-Dooring 低代码的更多实践和思考, 如果大家对可视化低代码感兴趣也可以参考我的低代码可视化专栏, 如果大家对图形学感兴趣, 也可以参考我的专栏100+前端几何学应用案例.
H5-dooring低代码
H5-dooring低代码
V6.Dooring可视化大屏搭建平台
V6.Dooring可视化大屏搭建平台
					
					
					  标签：
													
												基本设计