一、前提概念:
屏幕分辨率 :确定屏幕上显示多少信息的设置,以水平和垂直像素来衡量,网上很多,可自行参考。
设计分辨率:开发时候,为制定的参考大小,比如常见的480*800,在初期就要定好,美术、程序按照这个标准来安排布局物件。很大原因是物理屏幕分辨率太多,不能兼顾,只能自行设计个参考大小。
二、目的
把设计分辨率 投放 映射到 屏幕分辨率。
三、思路:
首先用 屏幕分辨率和设计分辨率 求出x,y轴缩放因子;然后根据各种缩放策略 修正缩放因子;最后在算出viewPort大小(可理解为显示视窗大小,或者叫视窗分辨率);若视窗大于屏幕大小,则会发生裁剪现象,部分会显示不出来;若视窗小于屏幕大小,则会有黑边。
下面一起来看代码。
四、代码分析
点击(此处)折叠或打开
- 在开发中, 该函数是我们在外经常用到的,在新版中他调用 updateDesignResolutionSize来设置分辨率。
- void GLView::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)
- {
- CCASSERT(resolutionPolicy != ResolutionPolicy::UNKNOWN, "should set resolutionPolicy");
-
- if (width == 0.0f || height == 0.0f)
- {
- return;
- }
- _designResolutionSize.setSize(width, height);
- _resolutionPolicy = resolutionPolicy;
-
- updateDesignResolutionSize();
- }
- void GLView::updateDesignResolutionSize()
- {
- if (_screenSize.width > 0 && _screenSize.height > 0
- && _designResolutionSize.width > 0 && _designResolutionSize.height > 0)
- {
- //关键点 用屏幕分辨率 和设计分辨率 求出x轴和y轴缩放因子
- _scaleX = (float)_screenSize.width / _designResolutionSize.width;
- _scaleY = (float)_screenSize.height / _designResolutionSize.height;
-
- //NO_BORDER 模式,就是用最大缩放因子,显然此类情形 使得小(窄)边 超出实际,所以会导致裁剪
- if (_resolutionPolicy == ResolutionPolicy::NO_BORDER)
- {
- _scaleX = _scaleY = MAX(_scaleX, _scaleY);
- }
-
- //SHOW_ALL模式 ,用的是最小因子;显然视窗会小于屏幕,所以会有黑边
- else if (_resolutionPolicy == ResolutionPolicy::SHOW_ALL)
- {
- _scaleX = _scaleY = MIN(_scaleX, _scaleY);
- }
- //固定高度,是指统一用y轴缩放因子。显然x轴会受影响,x轴实际是按照y因子进行缩放,
- //同时根据实际物理屏幕分辨率 修正 设计分辨率,目的保持视窗和物理屏幕大小一致。
- //此类情形会铺满整个屏幕,但x轴方向也会发生裁剪或者黑边,这主要是设计分辨率的x轴会根据物理屏幕实际大小
- //动态发生变化。应用程序中,若绘制布局的物件位置 大于设计分辨率x轴,则会裁剪;若没x轴方向没有被绘制部分,
- //则会黑边,如x轴被缩放过大时候。
- //总之此类情形,若完美满足匹配,要求我们在程序中,宽度(x轴向)要用相对坐标,不要用绝度坐标,
- //常需要getVisualeSize配合
- else if ( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) {
- _scaleX = _scaleY;
- _designResolutionSize.width = ceilf(_screenSize.width/_scaleX);
- }
- //分析同上
- else if ( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) {
- _scaleY = _scaleX;
- _designResolutionSize.height = ceilf(_screenSize.height/_scaleY);
- }
-
- //默认情形是EXACT_FIT,分别按照x,y各自缩放;视窗和屏幕大小一致;但会有拉伸现象,不建议使用。
- // calculate the rect of viewport。 计算出视窗大小。
- float viewPortW = _designResolutionSize.width * _scaleX;
- float viewPortH = _designResolutionSize.height * _scaleY;
-
- _viewPortRect.setRect((_screenSize.width - viewPortW) / 2, (_screenSize.height - viewPortH) / 2, viewPortW, viewPortH);
-
- // reset director's member variables to fit visible rect
- auto director = Director::getInstance();
- director->_winSizeInPoints = getDesignResolutionSize();
- director->createStatsLabel();
- director->setGLDefaultValues();
- }
- }