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

这是一个最重要的属性,因为之后的几个属性都可以根据它推导出来。在H5平台,它等同于canvas.clientWidth/clientHeight,在微信平台,它等同于window.screenWidth/screenHeightwindow.innerWidth/innerHeight

它的值也是由设备硬件决定,实际上等于 设备屏幕分辨率 / devicePixelRatio,例如:iPhone7的屏幕分辨率是750x1334,则运行在iPhone7设备上的全屏游戏的 frameSize 是分辨率除以2,即375x667

canvasSize

视图中 canvas 的尺寸。在 native 平台下,它返回全屏视图下屏幕的尺寸。在 Web 平台下,它返回 canvas 元素尺寸。

在运行中可通过以下代码获取:

const canvasSize = view.getCanvasSize();

阅读引擎源码可知,它实际上等于 frameSize * devicePixelRatio

scale

这是将画布像素分辨率放到设计分辨率的比例。

在运行中可通过以下代码获取:

const scaleX = view.getScaleX();
const scaleY = view.getScaleY();

一般适配都是等比缩放的,所以scaleX和scaleY相等,但它的值根据屏幕适配方式不同而不同。阅读引擎源码可知,当 FixedHeight 时,scale = canvasSize.height / design.height;当 FixedWidth 时,scale = canvasSize.width / design.width

visibleSize

视图窗口可见区域尺寸。

在运行中可通过以下代码获取:

const visibleSize = view.getVisibleSize();

阅读引擎源码可知,它的值实际上等于 canvasSize / scale。这是一个在UI适配中使用频率很高的属性,例如,想让一个节点放到屏幕中央,通常可这样:

const vsize = view.getVisibleSize();
node.setPosition(vsize.width/2, vsize.height/2);

visibleSizeInPixel

视图窗口可见区域像素尺寸。

阅读引擎源码可知,它的值实际上等于 visibleSize * scale

3 总结

devicePixelRatio、frameSize由设备硬件决定,designSize由开发者自定义,无论是哪种屏幕适配方式,根据以上3者,都可以推导出剩余的所有属性。

推导顺序如下:
(frameSize * devicePixelRatio) -> canvasSize -> scale -> visibleSize -> visibleSizePixel

最后,以iPhone7设备为例,它的屏幕分辨率是750x1334,假设开发者的设计分辨率为640x960,适配方式为FixedWidth,则各个属性值的总结如下:

属性 计算公式
designSize 640 x 960 开发者自定义
devicePixelRatio 2 硬件决定
frameSize 375 x 667 硬件决定,等同于window.screenWidth/screenHeight
canvasSize 750 x 1334 canvasSize = frameSize * devicePixelRatio
scale 1.17 scale = canvasSize.width / design.width
visibleSize 640 x 1138 visibleSize = canvasSize / scale
visibleSizeInPixel 750 x 1334 visibleSizeInPixel = visibleSize * scale
标签:

发表回复

您的电子邮箱地址不会被公开。