@cniot/canvas2flex NPM

canvas画布中的绝对位置转换成flex布局，适应动态缩放能力

TODO:

抽离核心代码
fixed布局支持（重要）在canvasConfig里增加一个position参数
绝对定位支持
使用rollup打包
最小最大高度解析
自适应规则（宽度按照百分比来算，高度改成min-height）
高度相等的时候，出现了丢元素的情况

使用方式

import {transformMethod} from '@cniot/canvas2flex'
let res = transformMethod(data);
let {finalTransData} = res; // finalTransData里就包含了转换过后的所有数据

转换后字段含义：

{
    "start":0, // 起始位置
    "end":36, // 终止位置
    "children":[], // 子元素列表
    "type":"horizontal", // 横切还是纵切
    "proportion":"0.05000", // 这个元素占这一层元素的比例（用来计算宽度百分比）
    "canvasConfig":{
      "y":0,
      "height":36
    },//起始位置和高度
    "level":1, // 层级
    "isFillComponent":true, // 是不是一个填充元素
    "flexLayout":{
    "display":"flex",
      "flexDirection":"row",
      "flexGrow":0,
      "flexShrink":0,
      "minWidth":"0px",
      "height":"36px"
    }, // 这个元素的样式
    "tagName":"div" //只要是填充元素，tagName就是div
}