CocosCreator引擎中designSize、visibleSize、frameSize的区别

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();

这是一个最重要的属性，因为之后的几个属性都可以根据它