leafer-ui
leafer-ui copied to clipboard
Published
2 weeks ago
•
leaferjs
leaferjs
flow布局设置inFlow false设置x或者y导致出现问题，flow溢出了
环境：Node v22.12.0 + leafer-draw v1.9.0 + windows10 flow布局设置inFlow设置false，然后设置x或者y导致出现问题，flow溢出了 代码：
{
"tag": "Leafer",
"children": [
{
"tag": "Frame",
"fill": {
"type": "image",
"url": "./assets/logo_back.png",
"mode": "repeat"
},
"id": "root",
"children": [
{
"tag": "Box",
"padding": 20,
"flow": "y",
"children": [
{
"tag": "Box",
"padding": 5,
"flow": "x",
"gap": 30,
"flowAlign": "center",
"children": [
{
"tag": "Box",
"width": 150,
"flow": "y",
"gap": -15,
"flowAlign": "center",
"children": [
{
"tag": "MImage",
"width": 150,
"height": 150,
"fill": {
"type": "image",
"url": "./assets/panel/img/head.png"
}
},
{
"tag": "ShadowText",
"fill": "#fff",
"text": "#0.581867 ",
"fontFamily": "english,chinese,emoji",
"fontSize": 29,
"lineHeight": {
"type": "percent",
"value": 1.5
},
"textAlign": "center",
"stroke": {
"type": "solid",
"color": "#000"
},
"strokeWidth": 1.74,
"strokeJoin": "round",
"shadow": {
"x": 0,
"y": 2.1750000000000003,
"blur": 0,
"color": "#000"
}
},
{
"tag": "Box",
"width": 80,
"height": 80,
"y": "10",
"padding": 12,
"fill": {
"type": "image",
"url": "./assets/panel/winsk.png",
"mode": "fit"
},
"flow": "y",
"flowAlign": "bottom",
"inFlow": false,
"children": [
{
"tag": "ShadowText",
"fill": "#fff",
"text": "99",
"fontFamily": "english,chinese,emoji",
"fontSize": 30,
"lineHeight": {
"type": "percent",
"value": 1.5
},
"textAlign": "center",
"skewX": "-5",
"stroke": {
"type": "solid",
"color": "#A40700"
},
"strokeWidth": 1.8,
"strokeJoin": "round",
"shadow": {
"x": 0,
"y": 2.25,
"blur": 0,
"color": "#A40700"
}
}
]
}
]
},
{
"tag": "Box",
"flow": "y",
"gap": 10,
"flowAlign": "center",
"children": [
{
"tag": "ShadowText",
"fill": "#fff",
"text": "金正恩",
"fontFamily": "english,chinese,emoji",
"fontSize": 50,
"lineHeight": {
"type": "percent",
"value": 1.5
},
"textAlign": "center",
"textWrap": "none",
"stroke": {
"type": "solid",
"color": "#000"
},
"strokeWidth": 2.25,
"strokeJoin": "round",
"shadow": {
"x": 0,
"y": 3.75,
"blur": 0,
"color": "#000"
}
},
{
"tag": "Box",
"height": 50,
"padding": [
0,
10,
0,
-20
],
"fill": "#1C486A",
"cornerRadius": 5,
"flow": "x",
"children": [
{
"tag": "MImage",
"width": 50,
"height": 50,
"fill": {
"type": "image",
"url": "./assets/panel/club.png",
"mode": "fit"
}
},
{
"tag": "ShadowText",
"fill": "#fff",
"text": "测试战队0.123156",
"fontFamily": "english,chinese,emoji",
"fontSize": 30,
"lineHeight": {
"type": "percent",
"value": 1.5
},
"stroke": {
"type": "solid",
"color": "#000"
},
"strokeWidth": 1.8,
"strokeJoin": "round",
"shadow": {
"x": 0,
"y": 2.25,
"blur": 0,
"color": "#000"
}
}
]
}
]
},
{
"tag": "Box",
"width": 250,
"height": 150,
"skewX": -3,
"fill": "#4D94FF",
"stroke": {
"type": "solid",
"color": "rgba(0,0,0,0.8)"
},
"strokeWidth": 2,
"cornerRadius": 5,
"shadow": {
"x": 0,
"y": 3,
"blur": 0,
"color": "#000"
},
"flow": "y",
"flowAlign": "center",
"children": [
{
"tag": "Box",
"skewX": 3,
"flow": "x",
"children": [
{
"tag": "MImage",
"width": 70,
"height": 70,
"fill": {
"type": "image",
"url": "./assets/panel/img/head.png",
"mode": "fit"
}
},
{
"tag": "MImage",
"width": 70,
"height": 70,
"fill": {
"type": "image",
"url": "./assets/panel/img/head.png",
"mode": "fit"
}
}
]
},
{
"tag": "ShadowText",
"fill": "#FFD23E",
"text": "玩家头衔",
"fontFamily": "english,chinese,emoji",
"fontSize": 30,
"lineHeight": {
"type": "percent",
"value": 1.5
},
"stroke": {
"type": "solid",
"color": "#000"
},
"strokeWidth": 1.8,
"strokeJoin": "round",
"shadow": {
"x": 0,
"y": 2.25,
"blur": 0,
"color": "#000"
}
}
]
}
]
}
]
}
]
}
]
}
报错：
@leafer-in/export [Error: I/O Error: Could not allocate new 802×100130 bitmap] Error
at Nt.error (file:///E:/dev/canvas_xml/node_modules/@leafer/core/lib/core.esm.min.js:1:21180)
at file:///E:/dev/canvas_xml/node_modules/@leafer-draw/node/dist/node.esm.min.js:1:37977
这里802x100130很明显是设置了y然后出现了问题，flow布局的root没有设置width，全是其他元素自动撑起来的
又尝试了一下offsetX和offsetY都是基于root来定位，而且套上flow无法定位到flow父元素的坐标，只能基于root，这就导致在flow设置x或y均会导致偏离很远。希望修复一下，在flow设置了inFlow基于flow开始定位。
如图，设置了y导致图片变的非常长，height从自动计算变成10000多的height，并且这个y是在flow设置了inFlow为false出现的问题
正常情况：
如果再用一个box套壳则可以正常生成，设置padding以确保相对于父元素（头像）来定位，但是这样很麻烦。
new Box({
inFlow:false,
padding:-20,
width:150,
height:150
children:[
new Text({
text:"99"
})
]
})
