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

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

设计稿转代码基本流程

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

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

图层抽象

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

1. Shape，可用样式实现的形状图层，如纯色带边框的矩形、圆角矩形、圆形等；

2. Text，可用样式实现的文本图层；

3. Image，不可用样式实现的图层，如复杂图形、带纹理的形状、位图和艺术字等；

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

• 基础属性，好比名字、id、图层类型

• 位置属性，好比宽高、坐标

• 样式属性，描述图层颜色和边框等

UINode属性

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

/**
 * 图层类接口
 */
interface UINode {
  // 图层id
  id: string = '';
  // 图层类型，包括Text,Shape,Image
  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))
  );
};
复制代码

1.2 图层被其它图元覆盖

// 节点是否被覆盖
const isCovered = function(node: UINode, nodelist: Array<UINode>): boolean {
  const index = nodelist.indexOf(node);
  const arr2 = nodelist.slice(index + 1).filter(n => !isContained(n, node)); // 越日后节点的z-index越大
  return arr2.some(brother => brother.type !== QNodeTypes.QLayer
      && isBelong(node, brother)
      && !brother.hasComplexStyle); // 若是节点被兄弟覆盖，而且本身没有其它属性（shadow）影响到兄弟，则移除该节点
};
复制代码

1.3 图层颜色与底层图元颜色相同

// 节点颜色是否与背景同色
const isCamouflage = function(node: UINode, nodelist: Array<UINode>): boolean {
  const { pureColor } = node;
  if (!pureColor) return false;
  const nodeIndex = nodelist.indexOf(node);
  const bgNode = nodelist
    .slice(0, nodeIndex)
    .reverse()
    .find(n => isSameColor(pureColor, n.pureColor)
        && (!n.parent || isBelong(node, n)));
  if (!bgNode) return false;
  const bgNodeIndex = nodelist.indexOf(bgNode);
  if (bgNodeIndex + 1 < nodeIndex) return !nodelist
    .slice(bgNodeIndex + 1, nodeIndex)
    .some(n => isIntersect(node, n));
  return false;
};
复制代码

1.4 图层位于可视边界外

// 节点是否在边界外
const isOutside = function(node: UINode, rootNode: UINode): boolean {
  return !(
    node.abX >= rootNode.abXops
    || node.abY >= rootNode.abYops
    || node.abX >= rootNode.abXops
    || node.abY >= rootNode.abYops
  );
};
复制代码

咱们定义为一个清洗函数，输入图层节点列表遍历，若是知足上述四个条件之一，则过滤掉该节点。

// 图元冗余清洗
function clean(nodes: UINode[]) {
  const [rootNode] = nodes;
  return nodes.filter((node: UINode) => {
    const needClean =
      isTransparentStyle(node) // 节点是否样式不可见
      || isOutside(node, rootNode) // 节点是否位于边界外
      || isCovered(node, nodes) // 节点是否被覆盖
      || isCamouflage(node, nodes); // 节点是否颜色假装
    // 知足其中一种状况则视为冗余节点
    return !needClean;
  }
}
复制代码

2. 图层合并

这个步骤主要是判断设计稿中哪些图层须要合并，好比下图的笑脸icon，若是不对图层进行成组而直接导出，会输出四张零散图。

需合并的零散图层

咱们判断合并的思路是根据图层之间空间关系是否相交，主要分为如下两步：

2.1 判断两节点之间的相交关系

如上图，图形eye和face相交，mouth和face相交，获得相交关系A：[eye,face]，相交关系B：[mouth,face]两个组，代码以下：

let isCollision = (node: UINode, brother: UINode) => !(
        (node.abY + node.height < brother.abY) || (node.abY > brother.abY + brother.height) ||
        (node.abX + node.width < brother.abX) || (node.abX > brother.abX + brother.width)
    );
复制代码

2.2 多个节点合并

咱们将相交关系的组（边）进行合并，好比边A中的face图层在B关系中也存在，那么将A和B进行合并，获得C：[ eye, face, mouth ]。

mergeJudge(nodelist: UINode[]): Array<Set<UINode>> {
    // 相交检测
    const groups: Array<Set<UINode>> = [];
    const relations = [];
    for (let i = 0; i < nodelist.length; i++) {
      const node = nodelist[i];
      for (let j = i + 1; j < nodelist.length; j++) {
        const brother = nodelist[j];
        if (isCollision(node, brother)) { // 判断两节点是否相交
          relations.push([node, brother]); // 相交则加入边列表
        }
      }
    }
    // 关系聚合
    relations.forEach(([node, brother]) => {
      // 查找当前边的两个端点是否已经有过成组
      let res = groups.filter(group => group.has(node) || group.has(brother));
      if (res.length) { // 已成过组
          const unionGroup = res.reduce((p, c) => p.concat([...Array.from(c)]), []);
          res.forEach(g => groups.splice(groups.indexOf(g), 1)); // 剔除原有组
          groups.push(new Set(unionGroup).add(node)
            .add(brother)); // 合并新组
      } else groups.push(new Set([node, brother])); // 不然，自成新组
    });
    return groups;
  }
}
复制代码

最后根据将这些关系合并成新的节点：

// 零散图元合并
function merge(nodes: UINode[]) {
    // 根据空间关系合并图层
    if ( !nodes.length) return;
    const groupArr = mergeJudge(nodes); // 碰撞检测，输出成组列表 [[node1,node2],[node3,node4],node5]
    groupArr.map((item: UINode | UINode[]) => {
        if (item.size > 1) {
            const newNode = union([...item], UINodeTypes.Image); // 合并成图片节点
            return newNode;
        }
        return item;
    });
});
复制代码

总结

本文经过图层抽象和优化两个步骤，抽象过程是将不一样设计软件图层解析为统一的数据结构，接着经过图层优化，清除冗余节点和合并零散节点，获得“干净”的UI节点集合。 后续咱们将介绍如何利用这些UI节点进行布局到生成最终代码。

更多关于前端智能化的课程，能够参考我以前分享的课程：ke.qq.com/course/2995…

前端智能化 ——从图片识别UI样式​ ：zhuanlan.zhihu.com/p/207308196