• <menu id="gokgi"></menu>
    <nav id="gokgi"><nav id="gokgi"></nav></nav> <menu id="gokgi"><tt id="gokgi"></tt></menu>
    您的位置:首頁 >聚焦 >

    從零實現Dooring低代碼印章組件|世界熱議

    2023-01-09 14:57:01    來源:程序員客棧

    上一篇文章和大家分享了低代碼平臺組件間通信方案的幾種實現:


    (資料圖)

    低代碼平臺組件間通信方案復盤

    今天繼續和大家分享一下比較有意思的可視化印章組件的實現.

    你將收獲低代碼組件的基本設計模式印章組件的設計原理(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可視化大屏搭建平臺

    關鍵詞: 基本設計

    相關閱讀

    和老少妇做真爽
  • <menu id="gokgi"></menu>
    <nav id="gokgi"><nav id="gokgi"></nav></nav> <menu id="gokgi"><tt id="gokgi"></tt></menu>