pc浏览器 拖动缩放窗口该怎么动态适配

Creator 3.x
#1

首先监听了 view.on(‘canvas-resize’, this.handleResize.bind(this)); 拖动缩放浏览器窗口没有回调
window.addEventListener(‘resize’) 有回调但是 view.getVisibleSize() 返回值没有变化。然后我在这个回调里面打印了很多值
getVisibleSize Size {width: 750, height: 1624}
getVisibleSizeInPixel Size {width: 302.0320197044335, height: 654}
windowSize Screen {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
我应该用那些值进行处理适配，我把AI问到系统繁忙也没给出合适方案，变来变去 都是这个 修正后尺寸: 873 654 缩放比例: 0.4027093596059113 。有没有大佬做过 cocos creator 3.8.x pc浏览器窗口变化动态适配 。

#2

document.documentElement.clientWidth
document.documentElement.clientHeight
获取浏览器内容区域的大小
再按比例计算div的大小
然后修改div / canvas大小

#3

大佬有没有更详细点的 ，按比例是指按什么比例勒 ，window.devicePixelRatio 这个一直都是1没有变化，修改 div / canvas大小 div是指什么，canvas 是指游戏的 canvas 还是什么？ 希望大佬不吝赐教 :coffee:

#4

div、canvas都是指游戏的
比例是你想要的比例。
如果游戏不能锁定比例的就是游戏的设计比例
如果游戏跟随窗口的就是窗口的比例（比如前面提到的clientWidth / clientHeight）

#5

我们游戏的设计比例是针对市面上常用的屏幕比例，但是玩家拖动网页肯定就不是正常屏幕比例（比如宽贼大，高贼低你游戏内容想显示全就得缩小，但是缩小多少没有可靠数据去计算），单纯clientWidth / clientHeight 肯定是适用不了所有情况的，我尝试了很多数据 物理像素转区域尺寸啥的都不可靠，最可靠的还是 view.getVisibleSize() 这个返回的区域尺寸数据能够直接应用到UI元素上，但是 window.addEventListener(‘resize’) 窗口发生变化回调时 这个返回值并没有更新

#6

是这种随意拖动适配吗
Cocos Creator | NoTowerLeft

#7

是的 用widget实现吗？

#8

下面的代码配合上Widget就差不多了，代码主要是监听窗口尺寸变化然后设置宽度对齐或者高度对齐

import { ResolutionPolicy, screen, Size, view } from "cc";
import { _tnevE } from "./Event";

export class _weiV {

    private static _instance: _weiV;

    public static get instance(): _weiV {
        if (!this._instance) {
            this._instance = new _weiV();
        }
        return this._instance;
    }

    private constructor() {
        this._designSize = view.getDesignResolutionSize().clone();
        screen.on("orientation-change", this.onOrientationChange, this);
        screen.on("fullscreen-change", this.onFullScreenChange, this);
        screen.on("window-resize", this.onWindowResize, this);
        this.onViewUpdate();
    }

    public readonly ORIENTATION_CHANGE: string = "orientation-change";
    public readonly FULLSCREEN_CHANGE: string = "fullscreen-change";
    public readonly WINDOW_RESIZE: string = "window-resize";
    public readonly VIEW_UPDATE: string = "view-update";

    private _designSize: Size = new Size();
    public get designSize(): Size {
        return this._designSize;
    }

    protected onOrientationChange(orientation: number): void {
        this.onViewUpdate();
        _tnevE.instance.emit(this.ORIENTATION_CHANGE, orientation);
    }

    protected onFullScreenChange(width: number, height: number): void {
        this.onViewUpdate();
        _tnevE.instance.emit(this.FULLSCREEN_CHANGE, width, height);
    }

    protected onWindowResize(width: number, height: number): void {
        this.onViewUpdate();
        _tnevE.instance.emit(this.WINDOW_RESIZE, width, height);
    }

    protected onViewUpdate(): void {
        let resolutionPolicy =
            (view.getVisibleSize().width / view.getVisibleSize().height) >= (this._designSize.width / this._designSize.height) ?
                ResolutionPolicy.FIXED_HEIGHT : ResolutionPolicy.FIXED_WIDTH;
        view.setResolutionPolicy(resolutionPolicy);
        view.emit("canvas-resize");
        _tnevE.instance.emit(this.VIEW_UPDATE);
    }

}
3赞
#9

大佬的这个更加全面基本整合了所有可能的情况 :ok_man:，感谢！

#10

不过我发现了新的情况， window.addEventListener(‘resize’, this.resizeHandler); 如果是编辑器打开本地地址进入网页这个 resize 回调，view.getVisibleSize() 返回值没有变化一直是初始值，但如果打包web手机端然后传云端或者把本机作为链接地址跑起来，窗口变化回调 view.getVisibleSize()是有变化的，感觉像是cocos 的bug，环境不同这个值也会不同，目前只跑了本地和云端 web，没跑其它平台。以下是日志
1.本地日志
Manual visible size {width: 3445.3922651933703, height: 1624}
VisibleSize Size {width: 3445.3922651933703, height: 1624}
Manual visible size {width: 3445.3922651933703, height: 1624}
VisibleSize Size {width: 3445.3922651933703, height: 1624}
2.云端日志
VisibleSize e {width: 2106.9209535759096, height: 1624}
index.js:13 Manual visible size {width: 2106.9209535759096, height: 1624}
index.js:13 VisibleSize e {width: 2109.56783919598, height: 1624}
index.js:13 Manual visible size {width: 2109.56783919598, height: 1624}
index.js:13 VisibleSize e {width: 2112.2213836477986, height: 1624}
index.js:13 Manual visible size {width: 2112.2213836477986, height: 1624}
2相对比就很清楚了，我现在的需求相对简单 bg铺满屏幕所以我需要这个 view.getVisibleSize() 真实数据，游戏元素缩放，我勾选适配宽度 然后挂上widget组件，引擎会自动缩放 游戏元素不会被遮挡或跑出屏幕外！ 然后我想说的是建议引擎有空排查下。本地如果窗口变化回调，view.getVisibleSize() 返回值没有变化很容易让人误会这个值是不会变化的，但实际云端环境会有变化。某些情况适配还是很需要这个值的 。以上！再次感谢各位愿意分享的大佬！

#11

项目设置里高度对齐和宽度对齐只能二选一，两个都选或两个都不选的话会导致getVisibleSize不准确。