【世界新视野】从零实现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

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

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

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

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

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方法来创建一个圆形边框.

创建一个五角星形状. 该五角星的中心坐标为(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();}

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

//平移到此位置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低代码
V6.Dooring可视化大屏搭建平台
						
					  
标签：
													
												基本设计