原文地址 www.chuyouxiang.com
在使用 CocosCreator 引擎開發(fā)的過程中崩哩，如果需要做不同寬高比屏幕的適配或旋轉(zhuǎn)，必定會接觸到 designSize、visibleSize邓嘹、frameSize 等不同屬性酣栈，它們各代表什么意思？區(qū)別是什么汹押？本文將解答這些問題矿筝，并總結(jié)這幾個屬性之間的推導公式。
1 簡介
在使用 CocosCreator 引擎開發(fā)的過程中鲸阻，如果需要做不同寬高比屏幕的適配或旋轉(zhuǎn)跋涣，必定會接觸到 designSize、visibleSize鸟悴、frameSize 等不同屬性陈辱，它們各代表什么意思？區(qū)別是什么细诸？本文將解答這些問題沛贪，并總結(jié)這幾個屬性之間的推導公式。
2 定義
designSize
視圖的設(shè)計分辨率震贵。
運行中可通過以下代碼獲壤场：
const designSize = view.getDesignResolutionSize();
這是開發(fā)者自己在 CocosCreator 中設(shè)定的尺寸，代表一個固定的寬高比猩系。
devicePixelRatio
設(shè)備或瀏覽器像素比例媚送。
在運行中可通過以下代碼獲取：
const devicePixelRatio = view.getDevicePixelRatio();
它的值由設(shè)備硬件決定寇甸，代表一個邏輯點有幾個像素塘偎，例如 iPhone7 設(shè)備上是 2攘已。
frameSize
視圖中邊框尺寸言秸。在 native 平臺下，它返回全屏視圖下屏幕的尺寸驶社。在 web 平臺下绽淘，它返回 canvas 元素的外層 DOM 元素尺寸涵防。
在運行中可通過以下代碼獲取：
const frameSize = view.getFrameSize();
這是一個最重要的屬性沪铭，因為之后的幾個屬性都可以根據(jù)它推導出來壮池。在 H5 平臺，它等同于canvas.clientWidth/clientHeight伦意，在微信平臺火窒，它等同于window.screenWidth/screenHeight或window.innerWidth/innerHeight。
它的值也是由設(shè)備硬件決定驮肉，實際上等于 設(shè)備屏幕分辨率 / devicePixelRatio，例如：iPhone7 的屏幕分辨率是750x1334已骇，則運行在 iPhone7 設(shè)備上的全屏游戲的 frameSize 是分辨率除以 2离钝，即375x667票编。
canvasSize
視圖中 canvas 的尺寸。在 native 平臺下卵渴，它返回全屏視圖下屏幕的尺寸慧域。在 Web 平臺下，它返回 canvas 元素尺寸浪读。
在運行中可通過以下代碼獲任袅瘛：
const canvasSize = view.getCanvasSize();
閱讀引擎源碼可知，它實際上等于 frameSize * devicePixelRatio碘橘；
scale
這是將畫布像素分辨率放到設(shè)計分辨率的比例互订。
在運行中可通過以下代碼獲取：
const scaleX = view.getScaleX();
const scaleY = view.getScaleY();
一般適配都是等比縮放的痘拆，所以 scaleX 和 scaleY 相等仰禽，但它的值根據(jù)屏幕適配方式不同而不同。閱讀引擎源碼可知纺蛆，當 FixedHeight 時吐葵，scale = canvasSize.height / design.height；當 FixedWidth 時桥氏，scale = canvasSize.width / design.width温峭；
visibleSize
視圖窗口可見區(qū)域尺寸。
在運行中可通過以下代碼獲茸种А：
const visibleSize = view.getVisibleSize();
閱讀引擎源碼可知凤藏，它的值實際上等于 canvasSize / scale。這是一個在 UI 適配中使用頻率很高的屬性祥款，例如清笨，想讓一個節(jié)點放到屏幕中央，通橙絮耍可這樣：
const vsize = view.getVisibleSize();
node.setPosition(vsize.width/2, vsize.height/2);
visibleSizeInPixel
視圖窗口可見區(qū)域像素尺寸抠艾。
閱讀引擎源碼可知，它的值實際上等于 visibleSize * scale桨昙；
3 總結(jié)
devicePixelRatio检号、frameSize 由設(shè)備硬件決定，designSize 由開發(fā)者自定義蛙酪，無論是哪種屏幕適配方式齐苛，根據(jù)以上 3 者，都可以推導出剩余的所有屬性桂塞。
推導順序如下：
(frameSize * devicePixelRatio) -> canvasSize -> scale -> visibleSize -> visibleSizePixel
最后凹蜂，以 iPhone7 設(shè)備為例，它的屏幕分辨率是750x1334，假設(shè)開發(fā)者的設(shè)計分辨率為640x960玛痊，適配方式為FixedWidth汰瘫，則各個屬性值的總結(jié)如下：
屬性? ? ? ? 值? ? ? ? 計算公式
designSize? ? ? ? 640 x 960? ? ? ? ? ? 開發(fā)者自定義
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
