# 解析规则
# 素材导出
画板(artboard)和切片(slice)图片导出
- 以sketchID新建文件夹，将sketch文件放入其中
- 在文件夹中新建文件夹slices，将切片文件导入其中，切片包含@1x,@1.5x,@2x,@3x四种格式
- 在文件夹中新建文件夹artboards,将画板导入其中，画板为@1x格式
# sketch拆分
- 将sketch文件按照单个画板进行拆分
- 以画板为最小解析单位进行解析
# 画板解析
# 1.UI组件库(Library)解析
- Library第三方库-无法直接解析，只能导图处理
解析原理:
将Library进行unlink处理变成内部模板,然后再进行解析
处理方法:
通过插件调用sketch内部的unlinkFromRemote方法进行处理
# 2.模块(Symbol)解析
原理:
- symbolMaster 模块类
- symbolInstance 模块实例
- symbolID 每一个模块的唯一标识
Page页面JSON和Symbol模块JSON
- 根据SymbolID 判断模块依赖关系，对JSON进行整合将symbol模块JSON合并到Page页面JSON中
Symbol实例传参数解析
传值规则:
一.传值只用于自己的子模块
二.外层传值权重高于内层传值
a.文本传值 直接替换
b.symbolID传值
1.值为空，则进行删除处理
2.值不为空，则进行替换处理
3.多层传值，则外层传值覆盖内层传值
c.图片传值 直接替换image属性值
Symbol模块缩放比例解析
- 根据SymbolInstance和SymbolMaster的尺寸比例，等比例转换symbolMaster的坐标尺寸，作为实例的坐标尺寸
# 3.图片解析
- a.切片(Slice)解析
规则:
- 纯色切片不导出为图片，使用css描述
- 如何图层的子图层中有切片，则认为该切片为该图层切片，只保留切片，删除其他子图层
- 切片标记为image组件，图片资源使用slices文件夹中对应名称的@2x图片
- b.bitmap类型为图片类型根据路径直接匹配即可
- c.导出为图片的规则：
css无法描述的style和形状 均导出为图片
- 图片大小位置不准确
原因:
- sketch切片导出是自动剪切掉无效区域
- 旋转造成位置形状变化
处理方法:
- 通过sketchtool进行处理
- 利用artboard大小和位置不受旋转影响的特性以及artboard
- 根据图层像素来计算绝对位置
- d.图片去重
所有图片根据MD5值进行去重
# 4.图层信息处理
提取图层（不处理 group， paths, points）消除图层之间包含关系，所有图层均在同一层级，重新计算绝对坐标值及尺寸，记录样式等相关信息
a 坐标及尺寸处理
根据层级相对坐标，累加计算算图层的绝对坐标值
根据symbol模块尺寸缩放比例重新计算模块中的图层坐标及尺寸
b 样式处理
- text内容及字体样式处理
如果编码则进行base64解码处理，然后提取对应属性值
一段字体多种样式的解析，拆分成多个元素片段，再进行样式进行解析
- border处理
没有处理多边框的情况，现在只处理单边框
position: 属性表示 border 设置的位置
1 => Inside border 边框位于盒子的内部
0 => Center border 边框位于盒子边上内外各50%
2 => Outside 边框位于盒容器外部
- 填充处理
多个填充，只处理最后一个填充
填充颜色则直接处理成背景色
填充图片则处理成img类型并且记录图片信息
存在的问题？
1.渐变色-会造成背景色异常（暂时没法处理）
- 图片处理
Image组件类型并且记录图片路径信息
- 背景色
background-color属性
- 圆角处理
border-radius属性
- bitmap处理
如果子图层超出父容器，采取截取超出部分的处理方式
- oval圆形类处理
设置border-radius属性值为50%
存在的问题?
1.圆弧造成结构错误-暂时将大圆弧结构进行删除处理（大于100px）
# 5.层级结构处理
存在的问题？
1.相同大小相同位置的图层z-index不明确，导致解析的样式错误。
图层处理后，包含样式及坐标尺寸信息，并且无层级的图层JSON
包含关系处理
- 根据面积排序，减小层级处理的误差（注意：此方式有副作用，需要重新考虑）
- 对所有的图层进行坐标交集处理，根据坐标及尺寸关系得出图层之间的包含关系
- 特别注意:图层处理后不在进行二次处理的原则，因为会出现图层A和图层B不属于任何图层，但目标图层1介于图层A和图层B之间，导致如果进行多次处理会陷入死循环，即图层1既属于图层A有属于图层B，而图层B和图层A有属于图层1，从而产生死循环,此处处理的原则就是图层1只要被处理过就不在被进行二次比较
分行处理
- 根据高度从大到小排序，图层之间水平方向有重叠的属于同一行，给予同行图层一个包裹的父元素
分列处理
- 只对分行之后的同行元素处理
- 根据宽度从大到小排序，图层之间方向有重叠的属于同一行，给予同列图层一个包裹的父元素
排序处理
- 对所有的图层进行横纵向排序，以便按照从左上角向右下角的顺序进行处理，符合日常开发习惯
特性分行
- 针对文字列表进行处理，并标记为List组件
- 条件:间距相同，高度相同且子元素为Text
冗余html结构处理
- Container 子元素无背景，无边框属于无意义元素 -删除子元素处理
- Container 子元素有背景或者边框，父元素无背景及边框-删除父元素
- Image 父元素无背景及边框-删除父元素
- Image 子元素与父元素位置大小完全相同 -删除父元素
单边框处理
- 主要针对细条线元素
- 边框为第一个或者最后一个子元素
a.优先处理成父元素边框
b.处理成子元素的边框时，优先处理成下边框
列合并
- 连续两行以上，每行的高度相同且每行的子元素的高相同
左边单个元素，右边多个元素且左边距相同--特殊列布局
- 进行拆行处理左边元素为一列，右边多行为一列
文本宽度补偿
- 由于web页面字体渲染特性造成宽度不够的情况，继进行适量宽度补偿
# 6.布局处理
对 X, Y 轴分别进行排序
外层处理
-width大于基准值则设置行边距
布局方式
- 判断为垂直布局，则从上到下排列（条件：<-5px）
- 一列布局
垂直布局和水平布局
- 两列布局
左占【20%-30】右占 【70%-100%】 左边定宽，右边自适应
左占【70%-100%】右占 20%-30%】右边定宽，左边自适应
如果元素的中心点在父元素的左侧，则左浮动，否则右浮动
- 三列布局
左右宽度相等，中间比例小于父元素 50% 的宽度,中间元素与父元素中心重叠 进行中间定宽，左右自适应布局
左右宽度均小于父元素宽度的 20% 进行左右定宽，中间自适应布局
元素的中心点在父元素的左侧进行左浮动，否则右浮动
- 4列以上
如果元素的中心点在父元素的左侧进行左浮动，否则右浮动
- 等宽
等宽布局
# 7.语义化处理
列表语义化
-标记为List类型的列表使用ul-li标签
# 代码生成
# Web端
- 模板生成
generateBody
- SCSS生成
generateScss
生成SCSS便于开发使用
- CSS生成
通过node-scss将scss转换为css
pc端 px布局
M端 rem布局，依据设计稿尺寸750或者375来处理
- images处理
路径使用相对路径