前端智能化——图层抽象与优化

在设计稿生成代码流程中，我们需要先将图层解析为UI节点，而后再通过布局算法生成代码。

作为前端智能化的第一步，解析的UI数据关乎后续的代码还原质量，因此需要一套方案来保证解析阶段能输出通用而有效的UI节点。

针对通用性和有效两个目标，我们将解析过程分为图层抽象和图层优化两个步骤。

图层抽象

为了实现UI Nodes通用性，兼容不同的设计稿类型，如psd，sketch和xd等，我们将设计稿的图层抽象为图片Image、图形Shape、文本Text三种类型的UI节点：

1. Shape，可用样式实现的形状图层，如纯色带边框的矩形、圆角矩形、圆形等；
2. Text，可用样式实现的文本图层；
3. Image，不可用样式实现的图层，如复杂图形、带纹理的形状、位图和艺术字等；

除了图层类型抽象，其它图层信息也将抽象为图元属性，可以分为三种：

• 基础属性，比如名字、id、图层类型
• 位置属性，比如宽高、坐标
• 样式属性，描述图层颜色和边框等

UINode类接口的具体代码如下：

/**
 * 图层类接口
 */
interface UINode {
   
	 // 图层id
	  id: string = '';
	 // 图层类型，包括Text,Shape,Image,Group
	  type: string;
	 // 图层名称
	  name: string = '';
	 // 宽度
	  width: number = 0;
	 // 高度
	  height: number = 0;
	 // 位置：距离左边界距离
	  abX: number = 0;
	 // 位置：距离上边界距离
	  abY: number = 0;
	 // 图层样式
	  styles: UIStyle = {
   };
}

图层优化

解析后的图层往往包含一些无效的信息，比如图层冗余、图层零散的问题，我们需要通过数据预处理来优化UI节点信息，提高代码还原的精准度。

预处理阶段主要分为两步：1. 图层清洗 2. 图层合并；

1. 图层清洗

设计稿中会有不可见图层，删除它们不会影响视觉效果，这些图层是冗余的。

图层清洗，就是针对不可见的图层进行剔除，分为以下四种情况：

1.1 图层样式透明无背景；

const isTransparentStyle = function(node: UINode): boolean {
   
  const {
    background, border, shadows } = node.styles;
  return (
    !node.childNum
    && (node.isTransparent
      || (background
        && background.hasOpacity
        && background.type === 'color'
        && +background.color.a === 0)
      || (border && +border.color.a === 0)
      || (node.type === UINodeTypes.Shape && !background && !border && !shadows