1.5.1setFrameSize方法有bug，导致屏幕旋转异常

Creator 2.x
#1 
//设置竖屏
    setPortrait() {
        if (cc.sys.isNative && cc.sys.os === cc.sys.OS_ANDROID) {
            jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", 
"changeOrientation", "(I)V", 1);
        } else if (cc.sys.isNative && cc.sys.os === cc.sys.OS_IOS) {
            jsb.reflection.callStaticMethod("IOSHelper", "changeOrientation:", 1);
        }
        else {
            cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
        }
        let width = cc.view.getFrameSize().height > cc.view.getFrameSize().width ?
 cc.view.getFrameSize().width : cc.view.getFrameSize().height;
        let height = cc.view.getFrameSize().height < cc.view.getFrameSize().width ? 
cc.view.getFrameSize().width : cc.view.getFrameSize().height;
        cc.view.setFrameSize(width, height);
        cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_HEIGHT);
    },
    //设置横屏
    setLandscape() {
        if (cc.sys.isNative && cc.sys.os === cc.sys.OS_ANDROID) {
            //0横1竖
            jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity",
 "changeOrientation", "(I)V", 0);
        } else if (cc.sys.isNative && cc.sys.os === cc.sys.OS_IOS) {
            jsb.reflection.callStaticMethod("IOSHelper", "changeOrientation:", 0);
        }
        else {
            cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
        }
        let width = cc.view.getFrameSize().height < cc.view.getFrameSize().width ?
 cc.view.getFrameSize().width : cc.view.getFrameSize().height;
        let height = cc.view.getFrameSize().height > cc.view.getFrameSize().width ?
 cc.view.getFrameSize().width : cc.view.getFrameSize().height;
        cc.view.setFrameSize(width, height);
        cc.view.setDesignResolutionSize(1334, 750, cc.ResolutionPolicy.FIXED_WIDTH);
    },

以上这段代码在1.5之前能够正常控制屏幕旋转，今天更新了1.5.1发现在web就异常了···@panda

#2

我调试发现setFrameSize之后就出现问题了，调用这个方法之后界面就变成1334*1334的正方形的了···

#3

但是我看了，代码中let width = cc.view.getFrameSize().height < cc.view.getFrameSize().width ?
cc.view.getFrameSize().width : cc.view.getFrameSize().height;
let height = cc.view.getFrameSize().height > cc.view.getFrameSize().width ?
cc.view.getFrameSize().width : cc.view.getFrameSize().height;
这里的width和height是对的···而且当时竖屏下多次调用竖屏这个方法一切都正常···但是竖屏切换横屏的时候就会显示一个正方形13341334，然后返回切换到竖屏也就一直都是13341334···所以我觉得这里是不是有一个bug···求解决啊···

#5

image.png707×601 41.3 KB
我调试走到这就发现不对了···

#6

你这个用法并不是我们推荐的 web 平台旋转屏幕的用法诶，我们建议使用 cc.view.setOrientation 接口

http://cocos.com/docs/creator/api/classes/View.html#method_setOrientation

至于你遇到的情况，感觉是某个 div 把整个 html 撑大了，导致适配错误。

#7

我里面没有自定义html，而且不仅是在web上有问题，在ccc模拟器中也有问题的···demo发你QQ了···这里再发一个demo···test.zip (196.5 KB)

#8

验证清楚了，转屏的体验是不能够用 preview 模版直接调试的。需要将项目打包成 web mobile，然后再用手机浏览器，或者 chrome 模拟手机来测试。

preview 模版和 desktop 模版我们没有打算做转屏适配的支持。

#9

我们不说你们设计模式是怎么样的···我们就看cc.view.getFrameSize()和cc.view.setFrameSize（）两者的表现···
理论上我一个东西set多少我get就应该是多少吧除非有边界限制对吧···但是以下效果你觉得合理吗？

1.5.1中的表现是：
设计分辨率是7501334，cc.view.getFrameSize()得到的值是（375,667）
调用cc.view.setFrameSize（667,375）后再cc.view.getFrameSize()得到的值是（667,667）。
1.4.2及之前版本中的表现是：
设计分辨率是7501334，cc.view.getFrameSize()得到的值是（375,667）
调用cc.view.setFrameSize（667,375）后再cc.view.getFrameSize()得到的值是（667,375）。
后者才是正常的表现，1.5.1肯定是bug啊···

#10

setFrameSize 是用 css 设置 frame 的尺寸，getFrameSize 使用 css 获取尺寸，而如果在两者之间发生了什么操作让 frame 尺寸被改变（比如你做的改变画布分辨率），那 frame 的 css 发生变化很正常，只是我们不支持你的开发模式，但是并不是说没有选择，你完全可以 build 出 mobile 再看，这种情况下是有保障的。

当然，你的需求是一个新需求，我们目前还不够满足，如果要加的话，我是在无法给你确定的时间，因为优先级并不高

最后再说明一下，不支持的情况并不是 bug，我们无法支持所有的可能性

#11

那我们直接看效果图：
demo：NewProject.zip (116.4 KB)
这个demo中就一个场景一个脚本：
cc.Class({ extends: cc.Component, properties: { label: { default: null, type: cc.Label }, }, onLoad() { this.label.string = cc.view.getFrameSize().toString(); }, clickBtn() { let width = cc.view.getFrameSize().width; let height = cc.view.getFrameSize().height; if (width > height) { cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT); cc.view.setFrameSize(height, width); cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_HEIGHT); this.label.string = cc.view.getFrameSize().toString(); } else { cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE); cc.view.setFrameSize(height, width); cc.view.setDesignResolutionSize(1334, 750, cc.ResolutionPolicy.FIXED_WIDTH) this.label.string = cc.view.getFrameSize().toString(); } }, });
场景中一个按钮，点击切换屏幕方向。有一个label显示cc.view.getFrameSize()。
先看1.4.2运行截图：

1.png1928×1048 45 KB

点击中间按钮后：
2.png1928×1048 43.1 KB

再看1.5.2beta1运行截图：
3.png1928×1048 48.4 KB

点击中间按钮后：
4.png1928×1048 47.3 KB

两个版本运行效果有如此大的差异难道没问题吗？还有我代码就那点没干别的操作了啊···

#12

原因找到了，preview-template 里设置了视窗容器的 display: table-cell，会造成设置宽高时无法减少

修改安装目录下这个文件：Resources/static/preview-templates/style.css

把

#GameDiv {
    visibility: hidden;

    display: table-cell; 这句注释掉
}
#13

为什么在1.5.2-beta.1里面还是没有修复，难道需要自己修改？ @nantas

#14

根据上面的做法，我再把所有的控件的widget的alignoce都设置为false，这样让他重新适配，测试了下是能得到想要的效果,但是这样可能会造成额外的内存消耗，如果有更好的方法，麻烦告知下

#15

想问一下大佬，在安卓和ios那边的方法是怎么写的，我研究了一上午还是没找到方法。