引擎升级后canvas尺寸失真,widget失效

我把引擎从1.10.2升级为2.0.9了,好不容易花了近两天把一些东西解决掉,特别是camera相关的东西。打包到android机时发现适配乱了,之前在1.10.2版本中是好的。
不但canvas的尺寸不能代表表示真正的屏幕大小,而且所有的widget都失效。
后来经过各种测试可能性,发现需要把Canvas下面的FitWdith勾选才正确。我的做法是两个都没有勾选,因为引擎文档中有这样一段说明

,我正是利用这个来让引擎自动帮我适配。我的设计分辨率为1600x900,有些机型会 比我的长宽比大,也可能有一些机型会比我的长宽比小,我没办法在编辑器中定死指定一项。
之所以我会两个没有选择的还有另一个原因,我的UI界面中有几十个按钮按每行5个排列,每个按钮表示一个关卡大章。我需要对这些按钮进行适配。我的做法是在onstart函数中得到Canvas的宽和高,然后反推每个按钮的大小,对每个按钮进行缩放,这样只要引擎帮我保证了自动适配宽,或是高了后,我就能获得具体的canvas大小,进行调整按钮。这种方法是可以适配任意机型。可惜在2.0.9中已经失去了自动适配的功能了,请引擎大大给出个好的方法处理。

自已顶起来

另外升级引擎了后,播放飞行动画老是抖,一开始怀疑是不是动画的用法和旧版本不一样了,经过各种排查,还是无效。最后可以确定的是fps下降一点点,比如从60->50的这个短时间内动画抖动的特厉害,但是1.10.2版本就没有这个问题,fps下降一点点不受影响。还有就是文字显示也暗淡了好多。最后只好回退到1.10.2版本了,没办法,搞了几天无功而返。希望引擎开发组正视这些问题,把2.0版本完善好。

升级之后获取的数据有问题是么?你把代码贴出来看看。在网页预览能重现么?

网页版可以重现。一定要Fit Height Fit Width都不选择的情况下。
代码:
var canvasNode = cc.find(“Canvas”);
var debugInfoNode = cc.find(“Canvas/displayDebugInfo”);//this is a label component
var width0 = Math.floor(canvasNode.width);
var height0 = Math.floor(canvasNode.height);
debugInfoNode.getComponent(cc.Label).string = width0.toString() + " " + height0.toString();

我的设计分辨率是1600x900,下图这个在iphone 6下是正确的

以下这个是在iphone x下的,适配不正确,


可以看到最上面一排的小按钮都不显示了,这些小按钮都是挂了widget控件的。在iphone x手机上引擎自动帮我做了适配宽度,因此高度应该是被裁剪,那么就是比900小一些,但是你看图片中央的显示是899,明显不等于实际屏幕大小。按引擎的说法,canvas的大小是等于实际屏幕大小的的(在无黑边的适配模式下)。

但是回退到1.10.2版本的ipad mini (1.10.2中没有iphone x机型)


可以看到在1.10.2中是适配了高度,宽度被裁剪,实际canvas大小是1200x899,而上面一排小按钮也没有因为宽度小了400被
裁剪掉。

总之一下,在FitHeight FitWidh都没有选择的情况下,1.10.2是正确的,而2.0.9是错误的

顶起来

你好,这个目前来看是引擎bug,目前针对这个适配模式暂时可以通过修改引擎代码解决。
找到引擎的CCView.js中如下红框中的代码:

修改成绿框中的代码。改完之后编译一下引擎然后重启编辑器就可以了。
https://docs.cocos.com/creator/manual/zh/advanced-topics/engine-customization.html

好的,谢谢

再确认一下这个问题,是因为原先1.10.x上 No Border也就是不勾选fixWidth和fixHeight时,所呈现的效果是错误的,正确的效果应该以2.0以上版本为准。
文档写错的部分会修改过来的。

嗨,Jno:
2.0.9正式版更新后,发现cc.Canvas.instance.node.width取出的数值有误
需求解决方法之际,尝试了您的修改方案
尝试之后自己的问题没解决,却在当前项目中暴露出一个修改后的衍生问题

当前项目是竖版项目,项目约定的canvas设定分辨率为(585至758,1136),默认fitHeight,为了适配最小585的分辨率,采取方法如下:
let frameHeight = cc.view.getFrameSize().height;
let frameWidth = cc.view.getFrameSize().width;

    if (frameWidth/frameHeight < 585/1136) {
         //最小宽度适配
        cc.view.setDesignResolutionSize(585, 1136, cc.ResolutionPolicy.SHOW_ALL);
    }
    ……

在进入“最小宽度适配”逻辑之后,修改后引擎出现了屏幕点击坐标偏移问题(点击按钮显示区,按钮无法响应),修改前引擎逻辑无误
所以在后续更新中,烦请慎重修改此块逻辑

另外我所谓的cc.Canvas.instance.node.width取出的数值有误,指的是:
进入“最小宽度适配”逻辑后,cc.Canvas.instance.node.width理论上应该取值为585(2.0.5版本),却取值成524.6305418719212(2.0.9版本)
关于上述canvasWidth问题,如果团队内部有新的解决动态,也麻烦回复一下。感谢

mark一下。持续关注

我也遇到了相同的问题。。。搞了个把星期了没搞懂

你如果两个都不勾选,引擎会自动适配的目的是防止黑边。引擎做不到让所有东西都显示出来的情况下,又没有黑边,不存在的。
记住,Canvas 节点的尺寸并不等于屏幕尺寸
Canvas 是 设计分辨率,也就是说长宽比会等于设计分辨率。因此 Canvas 的长宽比不一定等于屏幕的长宽比
如果你希望对齐到实际屏幕,而不是 Canvas,那直接把节点放到 Canvas 节点外边,直接放在场景里面,然后挂一个 Widget 组件就行。

大大,Canvas选的fit height,横向的layout设置了widget四方向0px。在适配ipX的时候,layout缩放模式已经勾选了child对子节点的大小进行缩放,但是子节点还是会被挤压,其他的机型都不会有这问题
log打出来的结果:
Canvas的width=295.5665024630542
layout的width=390

求解~~~~

应该是长宽比不对吧,设成 Fit width 试试

大佬,我把问题详情发这个帖子里了,里面有demo,我的项目如果选了fit width,iphoneX的界面会扭曲更严重。。。

https://forum.cocos.com/t/layout-child/78898?u=99512257