canvas画布中的绝对位置转换成flex布局,适应动态缩放能力
TODO:
- 抽离核心代码
- fixed布局支持(重要)在canvasConfig里增加一个position参数
- 绝对定位支持
- 使用rollup打包
- 最小最大高度解析
- 自适应规则(宽度按照百分比来算,高度改成min-height)
- 高度相等的时候,出现了丢元素的情况
使用方式
import {transformMethod} from '@cniot/canvas2flex'
let res = transformMethod(data);
let {finalTransData} = res;
转换后字段含义:
{
"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"
}
更新日志
###0.0.11:
- 增加zIndex布局支持
0.0.9:
- 修复图片不显示的问题
- 增加lockedWidth/lockedMarginRight/lockedMarginLeft 三个属性,用来锁定边距