基础转换原理

解释 Semi D2C 的一些基本运作原理

💡基础转换逻辑

了解基础的转换逻辑,可能对你使用 D2C 工具有帮助

Flex 布局还是绝对定位布局?

Figma to Code 转换结果中,只会有两种布局方式,Flex 布局和绝对定位布局。所以什么场景会对应什么布局呢?
  1. 当两个图层在同一层级,且出现图层相互遮挡时,此时会创建一个 Wrapper 容器,内部使用绝对定位布局。测试设计稿
  2. 当图层设置了 Auto Layout 时,会使用 Flex 布局。此时转换后 UI 具有一定的响应式能力。测试设计稿
  3. 其他情况下会默认使用 Flex 布局,此时会对子图层进行自动分组,从而应用 Flex 行布局和列布局。此时图层之间通过 margin 进行位置还原,因此不具备响应式效果。测试设计稿

如何自动分组?

当所有元素在同一层级时,默认会对图层自动进行分组后应用 Flex 布局,大致对元素分组的思路为:
  1. 首先判断子元素之间是否存在遮挡,如果是创建父容器
  2. 分别尝试对元素进行分组
水平方向存在交叠时,会按行分为一组;垂直方向存在交叠时,会按列分为一组;
  1. 按行分组,求分组元素数量的均值和方差
  2. 按列分组,求分组元素数量的均值和方差
  3. 根据均值和方差,判断按行还是按列分组,均值越小越好(分布越分散),方差越小越好(分布越平均),如果最终按列分组,flex 布局方向为 'row',如果最终按行分组,flex 布局方向为 'column',同时分组内元素数量大于1的,自动创建父容器。
  4. 递归进行子图层的判断,进入步骤 1

哪些情况会转成图片?

当前共有四种情况会转译为图片:
  1. 当图层设置了 Export 时,该图层会被转译为图片;
  2. 当图层类型为 LineNode, VectorNode, StarNode, PolygonNode, BooleanOperationNode 时,该图层会被转译为图片;
  3. 当图层的所有子图层为 LineNode, VectorNode, StarNode, PolygonNode, BooleanOperationNode 时,该图层会整体转译为图片;
  4. 当图层被标记为 mask 时,所有在该图层之上的图层都会被转译为图片。

Class 名称是怎么确定的?

默认情况,会以图层名称作为 CSS class 来组织 CSS 样式,此时会对图层名称做如下改动:
  1. 中文名称会替换为图层类型名
  2. 太长的名称会进行截取前 20 个字符
  3. 重复图层名称会进行去重
  4. 不同图层名称样式相同时,会统一名称

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题