Cocos Creator 2.x 横竖

主要思路

• 在onLoad中监听ViewSize更新事件，调用updateViewSize
• 在切换场景时调用updateOrientation和updateViewSize
• updateOrientation() 根据当前设计分辨率调整横竖屏方向
• updateViewSize() 根据横竖屏调整当前canvas的显示区域

TS版

在onLoad()方法中添加

export default class GameEntry extends cc.Component
{
    protected onLoad(): void
    {
        cc.view.setResizeCallback(this.updateViewSize);
        this.updateOrientation();
        this.updateViewSize();
    }
 
    /**
     * 更新设备朝向
     * @private
     */
    private updateOrientation(): void {
        console.log("GameEntry updateOrientation!");
        let design: cc.Size = cc.view.getDesignResolutionSize();
        if (design.width < design.height) {
            console.log("setOrientation = PORTRAIT");
            cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
        }
        else {
            console.log("setOrientation = LANDSCAPE");
            cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
        }
    }
 
    /**
     * 更新显示尺寸
     * @private
     */
    private updateViewSize(): void {
        console.log("GameEntry updateViewSize!");
        let visible: cc.Size = cc.view.getVisibleSize();    // 实际显示尺寸
        let design: cc.Size = cc.view.getDesignResolutionSize(); // 设计分辨率
        let canvas: cc.Canvas = cc.director.getScene().getComponentInChildren(cc.Canvas);
        let widget: cc.Widget = canvas.getComponent(cc.Widget);
 
        if (design.width < design.height) { // 竖屏
            let ratio = design.width / design.height;
            if (visible.width / visible.height > ratio) {
                widget.left = widget.right = (visible.width - visible.height * ratio) / 2;
                canvas.fitWidth = false;
                canvas.fitHeight = true;
            } else {
                widget.left = widget.right = 0;
                canvas.fitWidth = true;
                canvas.fitHeight = false;
            }
        }
        else {  // 横屏
            let ratio: number = design.height / design.width;
            if (visible.height / visible.width > ratio) {
                widget.top = widget.bottom = (visible.height - visible.width * ratio) / 2;
                canvas.fitWidth = true;
                canvas.fitHeight = false;
            }
            else {
                widget.top = widget.bottom = 0;
                canvas.fitWidth = false;
                canvas.fitHeight = true;
            }
        }
        widget.updateAlignment();
    }
 
    public onLaunchedScene(): void {
        this.updateOrientation();
        this.updateViewSize();
    }
}

JS版

在onLoad()方法中添加

   
    onLoad(){
        cc.view.setResizeCallback(this.updateViewSize);
        this.updateOrientation();
        this.updateViewSize();
    }

    /**
     * 更新设备朝向
     * @private
     */
     updateOrientation() {
        console.log("GameEntry updateOrientation!");
        let design= cc.view.getDesignResolutionSize();
        if (design.width < design.height) {
            console.log("setOrientation = PORTRAIT");
            cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
        }
        else {
            console.log("setOrientation = LANDSCAPE");
            cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
        }
    },
 
    /**
     * 更新显示尺寸
     * @private
     */
     updateViewSize() {
        console.log("GameEntry updateViewSize!");
        let visible= cc.view.getVisibleSize();    // 实际显示尺寸
        let design= cc.view.getDesignResolutionSize(); // 设计分辨率
        let canvas = cc.director.getScene().getComponentInChildren(cc.Canvas);
        let widget = canvas.getComponent(cc.Widget);
 
        if (design.width < design.height) { // 竖屏
            let ratio = design.width / design.height;
            if (visible.width / visible.height > ratio) {
                widget.left = widget.right = (visible.width - visible.height * ratio) / 2;
                canvas.fitWidth = false;
                canvas.fitHeight = true;
            } else {
                widget.left = widget.right = 0;
                canvas.fitWidth = true;
                canvas.fitHeight = false;
            }
        }
        else {  // 横屏
            let ratio = design.height / design.width;
            if (visible.height / visible.width > ratio) {
                widget.top = widget.bottom = (visible.height - visible.width * ratio) / 2;
                canvas.fitWidth = true;
                canvas.fitHeight = false;
            }
            else {
                widget.top = widget.bottom = 0;
                canvas.fitWidth = false;
                canvas.fitHeight = true;
            }
        }
        widget.updateAlignment();
    }

来源：CocosCreator2.x横竖屏切换方案