1 简介
在使用CocosCreator引擎开发的过程中,如果需要做不同宽高比屏幕的适配或旋转,必定会接触到designSize、visibleSize、frameSize等不同属性,它们各代表什么意思?区别是什么?本文将解答这些问题,并总结这几个属性之间的推导公式。
2 定义
designSize
视图的设计分辨率。
运行中可通过以下代码获取:
const designSize = view.getDesignResolutionSize();
这是开发者自己在CocosCreator中设定的尺寸,代表一个固定的宽高比。
devicePixelRatio
设备或浏览器像素比例。
在运行中可通过以下代码获取:
const devicePixelRatio = view.getDevicePixelRatio();
它的值由设备硬件决定,代表一个逻辑点有几个像素,例如iPhone7设备上是2。
frameSize
视图中边框尺寸。在 native 平台下,它返回全屏视图下屏幕的尺寸。在 web 平台下,它返回 canvas 元素的外层 DOM 元素尺寸。
在运行中可通过以下代码获取:
const frameSize = view.getFrameSize();
这是一个最重要的属性,因为之后的几个属性都可以根据它