• 首页
  • 粮食
  • 蔬菜
  • 果品
  • 水产
  • 酒水
  • 饮料
  • 茶叶
  • 畜禽
  • 食用油
  • 资讯
logo
  • 首页>
  • 水产 >
  • 正文

天天播报:从零实现Dooring低代码印章组件

2023-01-09 17:40:55 来源:程序员客栈

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


(资料图片仅供参考)

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

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

你将收获低代码组件的基本设计模式印章组件的设计原理(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可视化大屏搭建平台

关键词: 基本设计

    为您推荐

  • 天天播报:从零实现Dooring低代码印章组件

    水产2023-01-09
  • 环球实时:体验线下一加Pop-up!不仅抢先体验一加11,现场氛围也是不一般!

    水产2023-01-09
  • 万达普惠网贷逾期39年延迟还款会上征信系统吗

    水产2023-01-09
  • 商务部:把恢复和扩大消费摆在优先位置

    水产2023-01-09
  • 朱军宣布回归央视!“性骚扰案”4年,真相令人脊背发凉…… 播报

    水产2023-01-07
  • 当前资讯!教育部:2023年“寒假教师研修”活动启动

    水产2023-01-06
  • 楼市又迎重磅利好!与新建住房价格走势挂钩,39城首套房贷利率有望下调

    水产2023-01-06
  • 苹果“砍单”?歌尔股份却涨停!多家“果链”企业回应!

    水产2023-01-06
  • 2023重庆公积金贷款利率最新利率表

    水产2023-01-06
  • 华润双鹤董秘回复:根据公平披露原则,公司在定期报告中面向所有投资者统一披露截至报告期末的股东户数

    水产2023-01-06
  • 【环球速看料】芝加哥农产品期价4日下跌

    水产2023-01-05
  • 最新:奇勃科技获数千万元天使轮融资 连发三款清洁新品

    水产2023-01-05
  • 全球聚焦:黄金价格回暖升至6个月高位 分析师称年内或上破2000美元

    水产2023-01-05
  • 世界即时看!中南建设2022年合同销售金额649.2亿元

    水产2023-01-04
  • 焦点要闻:可以只分割一次夫妻共同财产?

    水产2023-01-04
  • 融资丨「英赛斯」完成三轮近1.5亿元融资,新加坡ESCO、鲁信创投、启明创投领投

    水产2023-01-04
  • 连云港劳务工资纠纷律师怎么收费

    水产2023-01-04
  • 贝纳利“龙卷风”再添新丁,Tornado402首次曝光,最大功率35kw 焦点快播

    水产2023-01-04
  • CES2023:三星电子C-Lab新创公司将闪耀登场|天天新资讯

    水产2023-01-03
  • 4岁小孩的抚养权归属问题_讯息

    水产2023-01-03

果品

  • 北京2022年冬奥会、冬残奥会奖牌“同心”正式发布
  • 冬奥故事会丨一图了解冬奥会历届奖牌
  • 冰雪之约 中国之邀 | 9种语言祝福冬奥倒计时100天
  • 同心筑梦向未来——写在北京冬奥会开幕倒计时100天之际
  • 外交部:美国针对亚裔仇恨犯罪数字令人痛心

蔬菜

  • 说好“一梯一户”却成了“两梯两户”,买方能否解除合同?
  • 更高水平开放合作助力中国东盟经贸发展迎新机遇
  • 9被告人犯侵犯著作权罪被判刑罚
  • 玉渊谭天丨中美再通话,“建设性”很重要
  • 环球时报社评:中美经贸需要建设性对话
  • 俄媒:莫斯科扩大新冠感染新疗法试点范围
  • 冰雪之约 中国之邀 | 追赶的勇气
  • 中国第20批赴黎维和建筑工兵分队完成“VA-2”道路排水系统修缮任务
  • 中国常驻联合国代表团举办恢复联合国合法席位50周年图片展
  • 美专家认为三大原因导致美国供应链危机

Copyright   2015-2022 人人食品网 版权所有  备案号:粤ICP备18023326号-36   联系邮箱:8557298@qq.com