@cniot/canvas2flex
v0.0.12
Published
canvas绝对定位转flex布局
Downloads
26
Readme
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
}
更新日志
###0.0.11:
- 增加zIndex布局支持
0.0.9:
- 修复图片不显示的问题
- 增加lockedWidth/lockedMarginRight/lockedMarginLeft 三个属性,用来锁定边距