可视化拖拽组件库一些技术要点原理分析

1、可视化拖拽组件库一些技术要点原理分 析谭光志发布于2020-12-21 本文主要对以下技术要点进行分析:编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码.绑定事件.绑定动画.导入PSD.手机模式为了让本文更加容易理解，我将以上技术要点结合在一起写了一个可视化拖拽组 件库DEMO： github工程地址在线预览 建议结合源码一起阅读，效果更好（这个DEMO使用的是Vue技术栈）。1.编辑器先来看一下页面的整体结构。MoixsckOMe事件，每次鼠标移动时，都用当前最新的xy坐标减去最开始的xy坐 标，从而计算出移动距离，再改变组件位置。koasc？事件，

2、鼠标抬起时结束移动。e.stopPgpagatioM)tli$4tore.coivit(,setCb(rCokvpoMt,J co3?。八e八t： tkis.e/cnAcrvtj z伉dex:丽s.z伉dex )。八贪 pos = this.defabdtStgle )const starts = e.ctietYcost startX = e.clicntX/如果直接修改属性，值的类型会变为字符串，所以要转为数值型coist startTop = NjmbeKpos.top)，。八贪 start Left =叭 pos./e储co八st iove - (HAO/eEMC八t) = c。八st

3、 currX = ioveEveit.clieiritXcovst currY = ioveEveit.clieitYpos.top = currY - st4rt丫 + startToppos.left = currX - starts + start Left/修改当前组件样式this.$stoHC.c。mitCsetShapcStgleL pos)CO八St up = 0 = docuiMeit.reioveEvetUsteieirCioiAseiove1 j wove)dociAeit.reioveEvetLiteeirvxoiAseiApj ？)docuaeit.addEveitUs

4、teerCouseixove, m。docLaet.addEveitUsteierCoiAseiAp1, up)撤消 重做插入图片预宽 保存 清空画布画布大小 1200* 740之文字 按钮四图片按钮删除组件、调整图层层级改变图层层级由于拖拽组件到画布中是有先后顺序的，所以可以按照数据顺序来分配图层层级。例如画布新增了五个组件abcde,那它们在画布数据中的顺序为图层层级和索引对应，即它们的z-ihdex属性值是01234 （后来居上）。用代码表示如下：div for=(item index) in compo八entData :zl八4ex=icdexataZ = teixp同理，置顶置底也

5、是一样，例如我要将a组件置顶，只需将a和最后一个组件 调换顺序即可：const teip = coipoinetData0coipoieitData0 = copoieitDatacoipoMtUata.leyglt - 1cokvpoMtDatacokvpoietData.lekght - 1J =按钮按钮按钮PEARLryuxxiJALGOL. Assembly删除组件删除组件非常简单，一行代码搞定：coipoMtPatasplice(idex,1)。按钮按钮i Assemblyoy!Gi PEARL5.放大缩小细心的网友可能会发现，点击画布上的组件时，组件上会出现8个小圆点。这8 个小圆

6、点就是用来放大缩小用的。实现原理如下：.在每个组件外面包一层Shape组件，Shape组件里包含8个小圆点和一个 勾。力 插槽，用于放置组件。，一一页面组件歹U表展示一一xSkapc v-fo片(itCM, index)心 covpoieicom?。八 c 八方c/SS = COM?。八 c 八 t”:is =CM.conA?。八 c 八 t”:stgle=geCoMpo 八 entStg 忆(iteM.stg(c)”:propVabe =pVabc”/Sk叩e组件内部结构：.点击组件时，将8个小圆点显示出来。起作用的是这行代码:active=itCM = curC。叫9。八八

7、廿。.计算每个小圆点的位置。先来看一下计算小圆点位置的代码：coiast poMtList =优什中 J伶 Jrt，他匕的getPoiitStyle(poiit) const width, height - this.defaodtStg忆const k“sT = /t/est(poin。co八st= /b/.test(poict)co八st ksL 二 /l/est(poMt)co八st hasR = /ir/est(poi八t)let 八ewLeft - Olet iewTop = O/四个角的点if (point.lcngth = 2) MwLeft = hasL? O : widtht

8、aewTop = hasT? O : height eke (/上下两点的点，宽度居中if (kasT | hasB) MwLeft = width. / 2newTop = hasTP O : height/左右两边的点，高度居中if (hsL H kasR) MwLeft = kasL? O : widthMwTop = Matkfloor(keight / 2)covxst style = kvxargiiLeft: knsR?4Px3Pxi八Top: J：3Pxi(次:、*八cwLcPtypx、,top:%八cwToppx、jcursor: ?oi八七平位().kc/cksc().m4

9、P(m = this.dikcctio八Keg时).jok() + 1-resize)return style)计算小圆点的位置需要获取一些信息: 组件的高度keight、宽度width注意，小圆点也是绝对定位的，相对于Sk的c组件。所以有四个小圆点的位置很 好确定：.左上角的小圆点，坐标怙任stop:。.右上角的小圆点，坐标(eft： widt九top：。.左下角的小圆点，坐标left： O, top: height.右下角的小圆点，坐标left: width, top: heightBft另外的四个小圆点需要通过计算间接算出来。例如左边中间的小圆点，计算公式 为left: Oj top：

10、height / 2,其他小圆点同理。4.点击小点时，可以进行放大缩小操作。k八山eMoqseDownOnPoMKpoint) covst dow八Emcht = windoweventdowiEveitstopPropagatioiQdowEveit.pirevetDefaiAltQ)const pos = this.dcfabdtStgle co八st height = NixMbeKpos.height)coist width = NiAMber(pos.width)covst top = 14abe心。s.top)coist left = N(AMbcpos.left)covst st

11、artX = dow八Eve八t.clie八tXcovst startY = dow八Eve八t.cc八2Y洞42布 布大小 1200740工具栏2文字日图片wn6WU组件列表属性区这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽 出一个组件放到画布中时，画布要把这个组件渲染出来。这个编辑器的实现思路是：.用一个数组coipoMitData维护编辑器中的数据。.把组件拖拽到画布中时，使用？”sk()方法将新的组件数据添加到coMRmcntDdhu.编辑器使用一f。匕指令遍历c。叼9。八。八将每个组件逐个渲染到画布(也可以使用JSX语法结合匕八方法代替)。编辑器渲染的核心代

12、码如下所示：com?。八ent/是否需要保存快照let ieedSave = falsecoinst iove - (3omcEmc八t) = teedSave = truec。八贪 currX = movcEmc八八tXconst currY = movcEmcht.ce八七Ycoist WisY = currY - startYcovst disX = currX - startXconst kasT = /t/.test(point)const = /b/est(point)const k4sL = /l/est(poMt)coiast hasR = /r7.近况point)c。八st

13、八ewHeight = height + (ksT? isY : kasB? disY :。)cost 八ewWidtk = width + (kxasL? -disX : kasR? disX :。)pos.height =八ewHeigkt O?八ewHeight : Opos.width =八cwWidtk O?八cwWidtk : OposJeft = left + (kasL? disX : O)pos.top = top + (k“sT? disY : O)this.$stoYc mitCsctShapcStg(eL pos)co八优 up = 0 = dociAeit.reove

14、EveitL-isteer(,iouseiove, wove)docMe八t.vcHAO/eE/e八tListe八erCuAoase”？，？)ieedSave & tis.tore.coiitCirecordSapshot1)docuet.addEveintUsteirierCOLiSeove1, Move)doc“Me八t.qddEvchtListc八。匕(作。60？1p)它的原理是这样的：.点击小圆点时，记录点击的坐标xyo.假设我们现在向下拖动，那么y坐标就会增大。.用新的y坐标减去原来的y坐标，就可以知道在纵轴方向的移动距离是多少。.最后再将移动距离加上原来组件的高度，就可以得出新的组

15、件高度。.如果是正数，说明是往下拉，组件的高度在增加。如果是负数，说明是往上拉，组 件的高度在减少。ALGOL. AssemblyPEARLSc的-Python j.撤消、重做撤销重做的实现原理其实挺简单的，先看一下代码：s八叩skotD比& 口/编辑器快照数据s八叩sk。七以dcx: T,/快照索引lAido（state） if （states八psko?八dcx =。）states n apsh。乜八 dcx -store.coiiitCsetCoipoieiWata1 jdccpCopg（statc.s 八 apshotDat 矶 states 八 apshot八 de 灯）redo圮e

16、) if (stateshapsk。十八dex ata(state, covipo八。= 口)(Vuesettate, ,coipoiaeiatPata,J coipoieitDatd)Irecords八叩sot(s标&) /添加新的快照statesapshotDatastatesapotlidex二 4eepCopg(state poAtData)/在，八W。过程中，添加新的快照时，要将它后面的快照清理掉if (states八叩shot伉dex 用一个数组来保存编辑器的快照数据。保存快照就是不停地执行叩sM)操作，将当前的编辑器数据推入小叩6。加4仅数组，并增加快照索引力印5元以dex。目前

17、 以下几个动作会触发保存快照操作：新增组件删除组件改变图层层级拖动组件结束时 撤销假设现在s八即skotData保存了 4个快照。即0仇c,可,对应的快照索引为3。如果昌时进行了撤销操作，我们需要将快照索引减1,然后将对应的快照数据赋 值给画布。例如当前画布数据是d,进行撤销后，索引-1,现在画布的数据是Co重做明白了撤销，那重做就很好理解了，就是将快照索引加1,然后将对应的快照数 据赋值给画布。不过还有一点要注意，就是在撤销操作中进行了新的操作，要怎么办呢？有两种 解决方案：.新操作替换当前快照索引后面所有的数据。还是用刚才的数据囿儿心可举例，假 设现在进行了两次撤销操作，快照索引变为1,对

18、应的快照数据为b,如果这时进 行了新的操作，对应的快照数据为e。那e会把cd顶掉，现在的快照数据为卬乩eo.不顶掉数据，在原来的快照中新增一条记录。用刚才的例子举例，e不会把cd顶 掉，而是在cd之前插入，即快照数据变为处九心g四。我采用的是第一种方案。撤消 重做 插入图片 预览 保存清空画布画布大小 1200* 7402文字按钮四图片文字文字按钮7.吸附什么是吸附？就是在拖拽组件时，如果它和另一个组件的距离比拟接近，就会自 动吸附在一起。按钮按钮吸附的代码大概在300行左右，建议自己翻开源码文件看（文件路径：srcWco岬onentsEditorMaKkLi八。这里不贴代码了，主要说说原理是

19、怎么实现的。标线在页面上创立6条线，分别是三横三竖。这6条线的作用是对齐，它们什么时 候会出现呢？.上下方向的两个组件左边、中间、右边对齐时会出现竖线.左右方向的两个组件上边、中间、下边对齐时会出现横线具体的计算公式主要是根据每个组件的xy坐标和宽度高度进行计算的。例如要 判断ab两个组件的左边是否对齐，那么要知道它们每个组件的x坐标；如果要 知道它们右边是否对齐，除了要知道x坐标，还要知道它们各自的宽度。/左对齐的条件a.x = b.x/右对齐的条件a.x + a.width - b.x + b.width在对齐的时候，显示标线。另外还要判断ab两个组件是否足够近。如果足够近，就吸附在一起。

20、是否足 够近要靠一个变量来判断：力仟；3,/相距dff像素将自动吸附小于等于a肝像素那么自动吸附。吸附吸附效果是怎么实现的呢？假设现在有ab组件，a组件坐标xy都是0,宽高都是100o现在假设a组 件不动，我们正在拖拽b组件。当把b组件拖到坐标为工”时，由于工先阳，所以可以判定它们已经接近得足够近。这时需要手动将b组件 的y坐标值设为100,这样就将ab组件吸附在一起了。按钮按钮优化在拖拽时如果6条标线都显示出来会不太美观。所以我们可以做一下优化，在 纵横方向上最多只同时显示一条线。实现原理如下：. a组件在左边不动，我们拖着b组件往a组件靠近。.这时它们最先对齐的是a的右边和b的左边，所以只

21、需要一条线就够了。.如果ab组件己经靠近，并且b组件继续往左边移动，这时就要判断它们俩的中间 是否对齐。. b组件继续拖动，这时需要判断a组件的左边和b组件的右边是否对齐，也是只 需要一条线。可以发现，关键的地方是我们要知道两个组件的方向。即ab两个组件靠近，我 们要知道到底b是在a的左边还是右边。这一点可以通过鼠标移动事件来判断，之前在讲解拖拽的时候说过，Mousedown事件触发时会记录起点坐标。所以每次触发mouscvc事件时，用当前坐标减去原来的坐标，就可以判断组件方向。例如X方向上，如果尻x-a.x的差值为正，说明是b在a右边，否那么为左边。/触发元素移动事件，用于显示标线、吸附功能

22、/后面两个参数代表鼠标移动方向/c“Y-startYO true表示向下移动false表示向上移动/ currX - startX O true表示向右移动False表示向左移动eve八thisfeL currY - startY O, currX - startX O).组件属性设置每个组件都有一些通用属性和独有的属性，我们需要提供一个能显示和修改属性 的地方。/每个组件数据大概是这样coipoieit: V-text /组件名称，需要提前注册到Vuelabel:文字左侧组件列表中显示的名字pKopVabe:文字，/组件所使用的值。八：3T.e。八-edit，/左侧组件列表中显示的名字aii

23、iatiois: 口/ / 动画列表以母仇/事件列表tyle: /组件样式width: 2。1height: 33?fcmtS ize：f。八tWeight: 500,li八eHeight: letterSpactig: O,tcxtAlign: color:in copoieitData11:is =辿3.，。叫。八c 八土:stg 忆=”item.stg 忆“:pYopValuc=itCM.propValbic”/每个组件数据大概是这样：coMpoMit: V-text /组件名称，需要提前注册到Vue（她e文字一/左侧组件列表中显示的名字propValue:，文字，组件所使用的值。八：3

24、-。八-edit, /左侧组件列表中显示的名字aiiiatiois: 口/ / 动画列表events： & /事件列表style： /组件样式width 2-00height: 33?f。八 tSize:fontWcight: 500,lineHcight: letterSpaciig: O,textAligh： 属性动画事件宽100按钮高34边框宽度边框蹶色边框半径字体大小14字体粗细500行高字间距I 0对齐方式 甑e id我定义了一个Attdist组件，用于显示每个组件的属性。div cSss=attEist“v-foY=(kcg, MHex) MstgleKegs ：keg=MHcx

25、：Sbc(=Mapkcg-color-picker -eke-if= keg = color111/-kvodel=,Cb(rCokvpoMitstylekey,d-coloir-picker v-eke-if=keg = ,backgroiAiadColorn,v-kodc/二忆rCoKAp。八 e 八 t.s 到 ekeg”el-select v-eke-if=keg =+cxtAlig屋M-xodc/二忆 rConApo 八c 八t.s切ekeg3-optionv-foUitCM i八 options”:keg =iteM.vabe”:labcl=itcM.labd”:value=l,i

26、tei./alue,1x/el-option c(一-itCM”(-input typeicxtarea v-iodelcurCpValiAC11 /com?。八entclass- coipoyeit:is 二 itehzv ?。八。八廿:stg 加=gctCoMpo 八 eAtStgle(itCM.stgle)”:pHopVa(L(c= itCM.pHopVa(ue/ Shape经过刚才的介绍，我们知道Ska2组件具备了拖拽、放大缩小的功能。现在只需 要将外平c组件去掉，外面改成套一个普通的DIV就可以了(其实不用这个DIV 也行，但为了绑定事件这个功能，所以需要加

27、上)。V一页面组件列表展示一保存代码的功能也特别简单，只需要保存画布上的数据COMP。八以加4口即可。保存有两种选择：.保存到服务器.本地保存在DEMO上我使用的保存在本地。撤消 室做插入图片预览 保存清空画布画布大小1200* 7402文字 按钮四图片10.绑定事件每个组件有一个Chts对象，用于存储绑定的事件。目前我只定义了两个事件:alert事件redirect 事件/编辑器自定义事件const events = rediirect(iAirl) if (urf) (wi八dow./oc 岫。八.kref = ur/)&a/ert(3sg) if Osg) Hcrt(n/sg)const

28、 Mxi八s = hac协。ds: events,co八st eveitUst -keg: WediircctL，跳转事件Ieveint: eveirits.irediirect,paraM： u,bkeg:匕（eirtLlabel： falert 事件，eveirit： events.alert,paraww 11,export kixigevents,eveitUst, 不过不能在编辑的时候触发，可以在预览的时候触发。撤消 里做插入图片预览 保存清空画布画布大小 1200* 740R文字按钮四图片按钮添加事件通过一 f指令将事件列表渲染出来:3 -tabs v-iModel-ueveitA

29、ctiveXaienel-hiAttoi style-11 iairgii-top: 2Opx c(ick=addEveMitCM.keg)iten/vp匕4&) 确定 /c(一 butt。八选中事件时将事件添加到组件的events对象。触发事件预览或真正渲染页面时，也需要在每个组件外面套一层DIV,这样就可以在DIV 上绑定一个点击事件，点击时触发我们刚才添加的事件。法md/cC/ick。coist events = this.co八fig.eventscolor: 11I)在遍历cooWata组件数据时，主要靠is属性来识别出真正要渲染的是哪个 组件。例如要渲染的组件数据是 cokvpoM

30、it: v-text ,那么 cokvpoMt :is=itekv.cokvpoMt/会被转换为-text/。当然，你这个组件也要提前注册到Vue中。如果你想了解更多is属性的资料，请查看官方文档。2.自定义组件原那么上使用第三方组件也是可以的，但建议你最好封装一下。不管是第三方组件 还是自定义组件，每个组件所需的属性可能都不一样，所以每个组件数据可以暴露出一个属性propValue用于传递值。例如a组件只需要一个属性，你的“opVa/ue可以这样写：propValue: aaao如果需要多个属性，“叩Va/uc那么可以是一个对象：propValue: a： 1,b: text1在这个DEMO

31、组件库中我定义了三个组件。图片组件Picture：/循环触发绑定的事件。可ect.kcgs/。八ts).foKEck/e八2 = tkiseMC 八灯(eve 八 tsc/c 八切).绑定动画动画和事件的原理是一样的，先将所有的动画通过f指令渲染出来，然后点击动画将对应的动画添加到组件的M面岫数组里。同事件一样，执行的时候 也是遍历组件所有的动画并执行。为了方便，我们使用了 animate.css动画库。现在我们提前定义好所有的动画数据：export default e/：，进入Ichildren: /:渐显value: adeli1向右进入，fade心Left: /abe/:，向左进入val

32、ue: fadel八Right卜 /abc向上进入 value: fadeliUp1 , /abc/:，向下进入、fade以Dow ,/她e/：向右长距进入，vabc： fade灰Le化Big ?，向左长距进入 vq/ac:牛“de伉, /abe”向上长距进入value:做deU?B，向下长距进入 value: fa4cl八DownBig ? /abR:，旋转进入，value: RotateI /nbe/:，左顺时针旋转 value: 1 rotate!iPowLeft1 ）? /be，右逆时针旋转: value: otatelowiRiglt1 , SbH:，左逆时针旋转，value: Ro

33、tate I iUp Left1 ,，右逆时针旋转I value: irotateliUpRiglt1 /nbe/：弹入，vaMc：八cel ）?向右弹入value： %。八cc伉Left4 ）, Sbe/一向左弹入。value: bouiaceliaRigkt1 1 /abc”向上弹入 value： ,boo（celUp, , /abc/:向下弹入 value: %oa八ce伉Down ）?，光速从右进入ligktSpeedRig/诂卜 （abc”光速从左进入，value:中gktSpcedd八L册 光速从右退出、value: igktSpeedOutRigkt1 , SbR:，光速从左退出

34、I value: igktSpeedOutLeft1 , label： V 轴旋转 value:伟）, label:，中心 X 轴旋转I value: fhpl八X （abe”中心 丫 轴旋转，value: flipliY1 ）?左长半径旋转value： Collin1 1 /nbc/:，由小变大进入，value:佐变大进入-zooha以Left4 , /abe/:，右变大进入，value: zooiliR.igkxt1 , label:，向上变大进入 value: Nooha伍U/ ), /abc/:，向下变大进入，value: oomlPow )? /abc/:，向右滑动展开I za/c:

35、5以c伍Left/ ), /abe/:，向左滑动展开，value: slideMRight , Sbc/:向上滑动展开，value:夕以c伍U? label:，向下滑动展开I z”(ae: sde伍Dow )?b(，强调:child*八: /她。/:弹跳一 value; houce1 , /nbc/:闪烁，value:依sW ),(，放大缩小。value: pbdse.放大缩小弹簧，value: ubherBaid1 ,彷be/:，左右晃动，value: eadShake1 ), /：左右扇形摇摆swMg. label:放大晃动缩小，value: tada1扇形摇摆、value: wobble

36、1 卜 Sbc”左右上下晃动 value： Jello1 label: 丫 轴旋转。value:伟.)(label:，退出。children: SbR:渐隐value: adeOut1 label:，向左退出、value: fadeOutLeft1 卜 /abe/:，向右退出value: adeOixtRight1 )? /nbc/:，向上退出value: adeOutUp1 /nbe/向下退出value: fadeOmtDowi1 ) Sbe/:向左长距退出，fndcOatLeFtB ), /abc/:向右长距退出value: fadcObctRightBig )? /dbH:，向上长距退出

37、, value: adeOutUpBig1 ) /abc”向下长距退出，vabe: fadeOutDow八Big , label:旋转退出 value: otateOut ), /abc/:，左顺时针旋转，value: otateOutDowiLeft1 /abc”右逆时针旋转，za/e:什。笈。atDowhRig/诂)?，左逆时针旋转，value: irotateOutUpLeft1 , /abR:，右逆时针旋转，value: otateOiAtUpRight1 , /。/:，弹出一 value: boiAceOut1 ),/她H:，向左弹出:value: ,houiceOiAtLeft,

38、, SbH:，向右弹出value: boL（八ceObctRight , /abe/向上弹出 value: bouiceOutUp1 , label:，向下弹出、value:七。八ceOixtDow ? /nbc/中心 X 轴旋转value: flipOixtX1 ）? Sbc中心 Y 轴旋转value: （ipOutY1 , Sbe/左长半径旋转，value: rollout1 , /abc/）由小变大退出，value: ooiOut1 ）? Sbc/:，左变大退出一 value: ooOutLeft1 , /nbe”右变大退出value: zoomOiAtRight SbH:，向上变大退出

39、value: z.ooOutUp卜 /nbe/）向下变大退出, ua/ac: Noo3OtDow , /nbc”向左滑动收起，value： slideOiAtLeft1 , /abc”向右滑动收起slideOiAtR.ight1 ）? SbR）向上滑动收起, va/ac:5以eOatU? /abc”向下滑动收起，vabe: slideObitDow八,Lb1然后用f指令渲染出来动画列表。撤消 重做插入图片预览 保存清空画布画布大小 1200* 740之文字 按钮四图片OOO按钮添加动画-tabs v-vodel-,aiiiMatioActiveNaeel-tab-paiae v-foWitcm

40、 MavvvsV)ata!1 ikeyitei.lahel :(abe(-uite.labe(,1 :iave=1,ite.label,lel-scrollbar cSss二-c。八W八eddiv :cla$s=l,ho/iewAiiate = aiaiiate.value & aiwate.vaue + 八沁tedq aiivate.label ）点击动画将调用addA八沁七，0八（八厮40）将动画添加到组件的4八沁tio八s数组。触发动画运行动画的代码：export default “sg八c 心八cti。八 ra八A八ikati。八（$c。aiiiatio = 口）co八st play

41、-（八八）= new PsMise（resolve = fel.classUst.adaiaiiatioi.valiAe, avwate,d!coist 忆xovcA八沁岫o八=0 = *e/.rcwoucEve八tListe八0匕（十八，鹏力。八。八4, reioveAiiiatioi）于e/.rehOMcEvc八tListc八八八c4八reioveAiiatioi)$el.classUsteiovaiiiatiovaliAej aiiated1)resolve。)$c/.ddE/e八七List八cr(S八ixdti。八e八kcmomcA八力0八)$c/.ddEve八tLkte八er(Z八i

42、k力。八C4八cel kcmovcA八1恒口力。八)1)for (let i = Oj /e八=aiiiatio.length; i 他八；i+) await play(aiivatioi)运行动画需要两个参数：组件对应的DOM元素(在组件使用的工轮(获取)和它的动画数据并且需要监听.八加泪，。八c八d事件和aiwatiocacd事件: 一个是动画结束时触发，一个是动画意外终止时触发。利用这一点再配合Promise 一起使用，就可以逐个运行组件的每个动画了。12.导入PSD由于时间关系，这个功能我还没做。现在简单的描述一下怎么做这个功能。那就 是使用psd.js库，它可以解析PSD文件。使用p

43、sd库解析PSD文件得出的数据如下： childre八:可修：visible: false,opacity： 1,b/e八di八gModc:仇。vawe: Version D，left: Ojright: q。）top: O,bottom: （bOO,height: （bOO, width q。）children: tgpc： Sgc, visible: true? opacity: 1, b（。八dMgMode:。rw/，Make a change aid save.1, left: 275,right: 636top: 435;bottom: 466?height: 31?width: 3

44、61Mask: )text: value: ake a change aid save.)font:(八akc:，HelveticaNcue -Lightssizes: 33 )colors 85, Q6) 工工O)255 ,aligiakveiat： center1 ?left： O,top: O,right: O,bottom: O,traiasform: xx:也 xy: O, yx: O, gg;，tx: 4S6? ty: 4S9 ,linage: (1,docueit: width: q。,height: (600,resources: (agcrCoMps: id: 692.2.4

45、3163, Version A- capturedlo: 1 力 卫卜/sc呻力按钮组件MBatto八： propValue /btto八export default props: propValue: type: SWMg,default: Nj)七 id： 72523304/ 八qimc： Version Bl capturedliafo: 1 )? id: 73(9932.8 77 八4nac: Vedio八 C, capturedliafo: 1 guides: )从以上代码可以发现，这些数据和css非常像。根据这一点，只需要写一个转 换函数，将这些数据转换成我们组件所需的数据，就能实现PSD文件转成渲染 组件的功能。目前quark-h5和Iuban-h5都是这样实现