mask全面屏适配出现的问题询问

在做全面屏的适配的时候不想用直接的canvas缩放去做,结果用的是背景超框缩放,内容位置进行上下左右以及居中的对应调整。
在页面中一旦有scrollView就进行上下位置的widget,但是在全面屏(iphoneX 小米8)手机上scrollView的mask大小虽然是跟着改变了,但是在canvas外面的时候mask失效了,需要遮挡的内容就露出来了。求个大佬帮我解答。

3赞

利用 cc.Maskcc.Widgetcc.Layout以及调整 Fit HeightFit Width 再加上 一些特殊UI部分的自定义适配组件 基本上可以完成任何要求的适配。 一般是不会出现任何问题的,检查一下你自己的适配对应逻辑和对应组件的使用。

还有像这种自己使用文字描述不清楚的问题,尽量提个demo上来。

等下,我传张图吧。

widget使用了把顶部的放到了最上方,下面那个是滚动视图,MASK位置和大小都是没有问题的,但是会出现这样正常屏幕之外的无法被遮盖

适配好了的话,应该类似于下面这样的效果,检查下你的适配。

普通屏

普通全面屏

针对有刘海水滴等的全面屏(包括小米8、iphoneX等)

竖屏适配,建议勾选Fit Width,手动使用组件对高度进行适配,横屏反之。

总之,熟练使用以上组件的配合,我认为可以达到任何适配效果,你可以试试。可以的话,建议你附上你的demo,还能帮你看一下。

现在的问题不是我适配做不好,是滑动视图中的mask超过canvas的地方失效了。canvas用的fixHeight fixWidth毕竟会比屏幕小,所以我来问下关于mask的处理方式

不过谢谢你的解答啦。:kissing_heart:

我还是觉得不是你适配的问题就是你组件没用对或者压根就没使用cc.Mask组件对scrollView进行裁剪。cc.Mask组件没有什么特殊的用法,勾上就裁剪。我记得编辑器中拖出的scrollView里面有一个名字叫view的节点,它上面是自带一个cc.Mask组件会对它的子节点content进行裁剪。所以只要你对它们适配好了或者说组件用对了,是不会出现这样的问题的。算了,明天上班搞个完整的demo给你参考下吧。demo.zip (540.9 KB)

1赞

我好像知道问题的原因了,我的canvas大小不对。我只对内部节点大小进行了处理,没有处理canvas。

但是你的DEMO因为只使用了fixWidth会导致在pad上显示的东西很少吧。

我使用了fixwidth和fixheight那么canvas在非1280*720的时候必定会有空白部位,然后我通过代码去改变节点宽度来做的全面屏,这样全面屏能够看到更多的长度,pad也不会少看到什么东西。

可以根据横竖屏、分辨率以及手机型号等调整适配策略,demo只是一个简单演示。

你这个在iPhoneX的模式下上面那排按钮往下移是手动调整的吗?

根据分辨率比例和平台来调整。