Layout布局设置了间距 编辑器显示正常 但是在浏览器显示异常(有demo)

问题描述:节点都是正方形 想用Layout的间距(spacing)做网格线

编辑器显示正常

Chrome浏览器显示出现了异常

操作系统:macos
Creator 版本:2.3.3
出现概率:必现

备注:不通过Layout 直接设置节点坐标同样出现上述问题
附必现demo:demo.zip (834.9 KB)

如果没出现异常 把子节点复制到几十个再看下

没问题呀

你把锚点改下x=0,y=0.5

谢谢你 @Zhao_Yu96

我按照你的方法改了锚点 但好像还是没有用
不太清楚是不是我电脑的问题
我重启Creator后 原来的四个节点又显示正常了 但当我手动扩充到16个节点后 又变得不正常了

编辑器:

Chrome浏览器:

备注:确认应该不是浏览器的问题 我用firefox和Safari都试过了 显示都异常
这是我IOS手机上的显示效果 也是有异常

我觉是你Item的坐标问题, 你先把坐标都设置成(0,0)。 之后再打开 layout. 再看看

Item是你的 BoardUnit

@Zhao_Yu96

我觉得不是坐标的问题 我把Layout改成了GRID模式 然后设置spacingX和spacingY为1

还是有异常

我觉得是spacing太小了 设置成2之后就恢复正常了 但我觉得这是一个bug

哈哈,1px太小了。

再更新
感觉是分辨率的问题
使用浏览器的放大功能后 又能看到节点之间的间隔了

放大前

放大后

再放大则会看到明细的间隔粗细不一样

但是我觉得应该 要么都看不到间隔 要么都能看到且一致才合理 不然UI上显示会很怪

@Zhao_Yu96

我好像找到问题出现在哪了

出现异常的最中间的那条线 坐标是 0, 0
如果坐标改成其他坐标 则1px的线就能显示正常了

我觉得这是一个bug

@Zhao_Yu96
解决了 1px是设计像素 实际上显示的时候 可能不是1像素
GL好像会隐藏小于1px的元素

const a = cc.view.getFrameSize();
const spacing = cc.winSize.height / a.width;
this.node.getComponent(cc.Layout).spacingX = spacing;
this.node.getComponent(cc.Layout).spacingY = spacing;

我改成跟屏幕分辨率匹配就没问题了