求助:多分辨率适配的问题

  • Creator 版本: 3.8.7

  • 目标平台:浏览器调试

  • 问题描述:
    cocos crator 2D项目,在canvas有一个sprite组件作为背景图,现在需要使用一个另一个sprite组件的图片做一个遮罩,完整覆盖掉背景图中的一个区域。
    canvas和背景图片都使用了widget组件,去自适应屏幕。
    组件树如图:
    image
    widget设置如图:
    image
    项目设置为【适配屏幕宽度】
    如图:
    image
    在设计分辨下,遮罩节点可以完整覆盖。可是切换目标设备的分辨率后,就无法完整覆盖了。
    设计分辨率下如图:
    image
    切换目标分辨率后:


    我知道【适配屏幕宽度】和widget组件,会根据目标分辨率拉伸或压缩所有的组件。

想求一个算法,能根据设计稿分辨率下的坐标和宽高,计算出目标设备下的坐标和宽高,让遮罩组件能完美覆盖掉背景图上目标区域。

求各位大佬帮忙,谢谢!!!!

计算目标分辨率和设计稿分辨的宽高各自的缩放比,对你的遮罩进行缩放

遮罩作为背景图的子节点,完美解决

widget 可以按照比例而不是距离绝对值进行适配